CSS: Основа

CSS - Cascading Style Sheets или по русски каскадные таблицы стилей.
Если считать веб-страницу человеком, то html это его тело, а css - его одежда.

До появления CSS почти все веб-сайты выглядели одинаково и примитивно, не ярче статей на википедии. Возможности разработчиков были сильно ограничены, пока в 1994 году не появился CSS.
Пример сайта до CSS
Подключение стиля к html-странице
Есть три способа применить CSS к HTML-документу. Ниже мы рассмотрим эти три метода.
Мы рекомендуем сосредоточиться на третьем - то есть внешней/external таблице стилей.
Метод 1: Inline-стили с помощью атрибута style

Можно применять CSS к HTML с помощью HTML-атрибута style.
В данном методе оформление элемента распространяется лишь на тег, в котором данный атрибут указан.

Например, нам нужно установить зеленый цвет текста только для первого абзаца.
Его можно установить так:
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Пример встроенных стилей</title>
 </head>
 <body> 
  <p style="color: green;">Этот текст будет зеленым</p>
  <p>А этот обычным</p>
 </body>
</html>
С помощью <p style="color: green"> мы применили внутренний стиль только к первому тегу <p>. Второй же остался без изменений.

Результат кода выше:
Метод 2: Глобальные таблицы стилей с помощью тега <style>

При таком варианте использования стили определяются непосредственно в веб-документе и пишутся между тегами <head>…</head> внутри тега <style>...</style>.

Можно смело сказать, что этот способ намного превосходит первый в гибкости и по своим возможностям, кроме того он упрощает работу с большим числом стилей на странице.
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Пример глобальных стилей</title>
  <style>
   p { 
       color: red; 
       font-size: 35px;
      }
  </style>
 </head>
 <body> 
  <p>Этот текст будет красным цветом</p>
  <p>Теперь и этот текст тоже будет красным</p>
 </body>
</html>
Тут внутри тега <style>...</style> мы применили глобальный стиль ко всем абзацам.
Теперь достаточно указать на странице только тег <p>, и его содержимому будут присвоены все те свойства, которые представлены правилами в теге style.

Результат кода выше:
Метод 3: Внешние таблицы стилей

Рекомендуемый метод - создание ссылки на так называемую внешнюю таблицу стилей.

Внешняя таблица стилей - это просто текстовый файл с расширением .css.

Например, таблица стилей вашего проекта называется style.css и находится в папке new_project.
Это можно проиллюстрировать так:

new_project
├── index.html
└── style.css

Вам всего лишь надо создать ссылку из HTML-документа index.html на таблицу стилей style.css.
Это можно сделать одной строчкой HTML-кода:
<link rel="stylesheet" href="style.css">
Обратите внимание, как указан путь к таблице стилей - атрибутом href.
index.html
<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Пример глобальных стилей</title>
  <link rel="stylesheet" href="style.css">
 </head>
 <body>
  <p>Это текст будет отображаться красным цветом</p>
 </body>
</html>
style.css
p 
{ 
    color: red;
}
Значение атрибута тега <link> — rel остаётся неизменным независимо от кода, как приведено в примере выше.
Значение href задаёт путь к CSS-файлу, он может быть задан как относительно, так и абсолютно.

Эта ссылка указывает браузеру, что он должен использовать правила отображения HTML-файла из CSS-файла. Самое важное здесь то, что несколько HTML-документов могут ссылаться на одну таблицу стилей. Иначе говоря, один CSS-файл можно использовать для управления отображением множества HTML-документов.
Синтаксис CSS
Целью CSS является определение макета и стиля элементов HTML.

Синтаксис очень прост:
/* Правила CSS */
селектор { свойство: значение; }
Его можно прочитать так:
кто { что: как; }
Итак, CSS представляет собой процесс из трёх частей:

  • селектор - указывает на какой элемент нацелиться
  • свойство - описывает атрибут, который будет изменяться
  • значение - указывает, как изменить эту характеристи

Весь этот блок (селектор, свойство, значение) является правилом CSS.
Селекторы
Селекторы — краеугольный камень всего CSS.
Селекторы позволяют выбирать элементы, к которым будут применяться стили. Это очень мощный и многогранный инструмент, который позволяет выбирать не только по тегу, но и по классу, идентификатору, наведению мыши, разным атрибутам, выбирать только чётные или нечётные элементы и так далее.

Разбор каждого селектора — это тема для целого курса.
Сейчас нас интересуют три основных селектора, которые можно назвать базовыми.
Селектор по тегу
Цель простая — просто указать тег, для которого будут применяться стили.

Например, покрасим все абзацы (<p>) в красный цвет. Для этого мы будем использовать селектор по тегу.
index.html
<!DOCTYPE html>
<html lang="ru">  <!-- атрибут lang="ru" говорит браузеру, что сайт будет на русском языке -->
<head>
    <meta charset="UTF-8">
    <title>Виды селекторов</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <main>
        <h1>Заголовок с идентификатором</h1>
        <p>Просто абзац без класса или идентификатора, который нужно покрасить в красный</p>
        <p>Просто еще один абзац, он тоже будет красным</p>
    </main>
</body>
</html>
styles.css
/* Селектор по тегу. Теперь только все < p > будут иметь красный цвет */
p 
{
  color: red;
}
Если правило относится сразу к нескольким селекторам, то они перечисляются через запятую.
styles.css
/* Зададим красный цвет заголовку и абзацам через запятую. Теперь только все < p > и <h1> будут иметь красный цвет */
h1, p 
{
  color: red;
}
Селектор по классу
Используется, когда нужно выбрать только конкретные элементы в HTML.

Создается с помощью атрибута class. Все мы друг друга называем по именам, здесь тоже самое - мы должны дать имя нашему блоку, чтобы в последствии к нему обращаться.
Нужно просто поставьте точку перед именем класса который вы хотите использовать (.название_класса) и дальше добавить стили.

Как задать?
В CSS-файле нужно указать любое имя, которое в дальнейшем мы соединим с HTML-файлом.
Например, сделаем цвет фона из примера выше светло-песочным.
Для этого в файле styles.css пропишем .back { background-color: #FFD173; }

Далее в HTML-файле, в нашем примере это блок с названием <main>, указываем атрибут class со именем back:
<main class="back"> - обращаемся по имени.

Имейте в виду, что имя тега не важно, учитывается только атрибут class. То есть задать class мы может любому тегу.
index.html
<!DOCTYPE html>
<html lang="ru">  <!-- атрибут lang="ru" говорит браузеру, что сайт будет на русском языке -->
<head>
    <meta charset="UTF-8">
    <title>Виды селекторов</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <main class="back">
        <h1>Заголовок с идентификатором</h1>
        <p>Просто абзац без класса или идентификатора, который нужно покрасить в красный</p>
        <p>Просто еще один абзац, он тоже будет красным</p>
    </main>
</body>
</html>
styles.css
/* Селектор по тегу. Теперь только все < p > будут иметь красный цвет */
p 
{
  color: red;
}

/*Селектор по классу*/
.back
{
   background-color: #FFD173​;​
}
Селектор по идентификатору
Ещё один случай выборки по дополнительному атрибуту тега.
Главная разница заключается в самом HTML — идентификатор не может повторяться в рамках одной страницы. Одно имя может использоваться только один раз.

В связи с этим нет возможности задать стили для идентификатора и использовать его на других элементах. Для выбора идентификатора используется конструкция #имя-идентификатора.


Вернемся к примеру, мы хотим присвоить заголовку уникальный идентификатор.
Для этого в CSS-файле пропишем # и имя, которое хотим присвоить, например #main-title. И зададим ему цвет, размер шрифта и выровняем по центру.
Дальше в HTML-файле к элементу <h1> добавляем id и пишем имя, указанное в стилях - <h1 id="main-title">
index.html
<!DOCTYPE html>
<html lang="ru">  <!-- атрибут lang="ru" говорит браузеру, что сайт будет на русском языке -->
<head>
    <meta charset="UTF-8">
    <title>Виды селекторов</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <main class="back">
        <h1 id="main-title">Заголовок с идентификатором</h1>
        <p>Просто абзац без класса или идентификатора, который нужно покрасить в красный</p>
        <p>Просто еще один абзац, он тоже будет красным</p>
    </main>
</body>
</html>
main.css
/* Селектор по тегу. Теперь только все < p > будут иметь красный цвет */
p 
{
  color: red;
}

/*Селектор по классу*/
.back
{
   background-color: #FFD173​;​
}

/*Селектор по идентификатору или id*/
#main-title 
{
  color: #A64D00;
  font-size: 48px;
  text-align: center;
}
Свойства CSS
Для изменения каждой части внешнего вида есть разные свойства, разберем несколько самых простых для примера:
CSS паттерны
С помощью css можно делать красивые рисунки на фон любого блока. Это называется паттерн.
Найти их примеры можно на сайте https://leaverou.github.io/css3patterns/
А тут можно почитать как это работает http://css.yoksel.ru/css-patterns/

Пример использования:
  html
  {
      background:
      linear-gradient(135deg, #708090 21px, #d9ecff 22px, #d9ecff 24px,
      transparent 24px, transparent 67px, #d9ecff 67px, #d9ecff 69px, 
      transparent 69px),
      linear-gradient(225deg, #708090 21px, #d9ecff 22px, #d9ecff 24px, 
      transparent 24px, transparent 67px, #d9ecff 67px, #d9ecff 69px, 
      transparent 69px)0 64px;
      background-color:#708090;
      background-size: 64px 128px;
  }
Полезные ссылки
Генератор цвета: https://colorscheme.ru
Код цвета: https://get-color.ru/
Паттерны CSS: https://leaverou.github.io/css3patterns/
Ещё про паттерны: https://freefrontend.com/css-particle-backgrounds/
Генератор текстов для страниц: https://ru.lipsum.com/feed/html
Практика
1. Пробуем стили
Скопируйте код в редактор.
Попробуйте подставлять различные значения, чтобы увидеть, как работает редактор и меняется стиль.
<p style="font-size: 20px; font-style: italic; text-align: center;">Первое изменение стиля с помощью CSS</p>
2. Подключаем стиль
Напишите HTML-страницу с заголовком первого уровня и любым текстом.
С помощью внешних таблиц стилей подключите к HTML файл style.css.

Задайте заголовку с помощью селектора по тегу:
  • шрифт Arial
  • размер 72px
  • цвет текста #A64100
  • выравнивание по центру
  • цвет фона #FFCB73
А тексту:
  • шрифт Times New Roman
  • размер 24px
  • цвет текста #BF6830

У нас получилось так, а у вас? Результатом пришли скриншот преподавателю.
3. Еще немного стилей
В коде ниже в теле документа спрятано задание. Выполните все инструкции документа.

Подсказка: Для подключения к абзацам требуемого класса используйте атрибут class.
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Упражнение</title>
 
  <style>
     
    .red_text{
    color: red;
    }
     
    .blue_text{
    color: blue;
    }   
 
  </style>
 
</head>
<body>
  <p title="Я первый абзац">
    Я текст первого абзаца. 
    Мой цвет должен стать красным, для этого используйте класс red_text из таблицы стилей выше.</p>
   
  <p title="Я второй абзац">
    Я текст второго абзаца.
    Мой цвет должен стать синим, для этого используйте класс blue_text из таблицы стилей выше.
  </p>
</body>
</html>
4. Повторяй за мной
Скопируйте ниже HTML код себе в VS Code.
Добавьте к этому коду CSS стили, чтобы получилось следующее:
<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8">
        <title>Повторяй за мной</title>
        <link href="" rel="stylesheet"> <!-- Не забудь подключить стили -->
    </head>
    <body>
        <h1>Языки для сайтов</h1>

        <h2>PHP и JavaScript</h2>
        <p>
	        Языки программирования <b>PHP</b> и <b>JavaScript</b> позволяют
	        сделать сайт динамичным, то есть реагирующим на действия пользователя.
	        Например, можно сделать красивую выпадающую менюшку или слайдер.
        </p>

        <h2>Виды скриптов</h2>
        <p>
	        Для этого пишутся скрипты (англ. <i>script</i> - "сценарий") -
	        программы, позволяющие реагировать на действия пользователя.
	        Скрипты бывают двух видов:
        </p>
        <ul>
	        <li>
		        те, которые выполняются на сервере,
		        а результат их выполнения приходит в браузер к
		        пользователю уже в готовом виде. Это скрипты,
		        написанные на языке <b>PHP</b>. На нем пишуться
		        <b>CMS-ки</b> – системы управления контентом.
	        </li>
	        <li>
		        те, которые выполняются прямо в браузере пользователя.
		        Это скрипты, написанные на языке <b>JavaScript</b>.
		        Они чаще всего используются для, того чтобы сделать страницу
		        более удобной и красивой.
	        </li>
        </ul>
    </body>
</html>
Предыдущее занятие | Следующее занятие