Правила и селекторы CSS

CSS (Cascading Style Sheets, «каскадные таблицы стилей») описывает внешний вид HTML-страницы: цвет, размер текста, рамки, отступы и расположение элементов. Браузер находит элементы по селекторам и применяет к ним CSS-правила.

Из чего состоит правило

p {
  color: #243447;
  font-size: 18px;
}

• p - селектор, который выбирает элементы.
• color и font-size - свойства.
• #243447 и 18px - значения свойств.
• Строки внутри { } - объявления. В курсе завершаем каждое точкой с запятой, хотя у последнего объявления она необязательна.

Одно правило может задавать несколько объявлений. Пока записывайте каждое свойство отдельно: так проще понять, что именно меняет оформление.

Как подключить стили

Отдельный файл - основной способ

Создайте styles.css рядом с index.html и подключите его в <head>:

<head>
  <link rel="stylesheet" href="styles.css" />
</head>

body {
  font-family: Arial, sans-serif;
}
 
h1 {
  color: #174ea6;
}

rel="stylesheet" сообщает браузеру, что подключён файл стилей, а href задаёт путь к нему. Если файл лежит в папке css, путь будет css/styles.css. Внешний файл удобно переиспользовать на нескольких страницах и редактировать отдельно от разметки.

Блок <style> внутри HTML

Для небольшого примера правило можно написать в <style> внутри <head>:

<head>
  <style>
    h1 {
      color: #174ea6;
    }
  </style>
</head>

Атрибут style у элемента

Такой способ задаёт стиль прямо элементу:

<p style="color: #174ea6;">Синий текст</p>

Синтаксис позволяет задать стиль так, но оформление сложнее переиспользовать, искать и менять. Для страницы выносите правила в отдельный CSS-файл.

Селекторы

Селектор описывает, какие элементы получат правило.

Класс записывают в HTML как class="notice", а в CSS перед его именем ставят точку: .notice. Один класс можно назначить многим элементам, а элемент может иметь несколько классов:

<p class="notice">Первое сообщение</p>
<p class="notice warning">Важное сообщение</p>

Для повторяющихся компонентов обычно используйте классы. id предназначен для конкретного уникального элемента на странице; в CSS перед ним ставят #.

Состояния и части элемента

Псевдокласс выбирает элемент в определённом состоянии или по его месту среди соседей. Например, :hover срабатывает при наведении, а :first-child выбирает первый дочерний элемент:

.menu-link:hover {
  color: #174ea6;
}
 
.menu-link:focus-visible {
  outline: 2px solid #174ea6;
  outline-offset: 3px;
}
 
li:first-child {
  font-weight: bold;
}

:hover описывает состояние при наведении указателя. :focus-visible показывает заметный фокус, обычно когда пользователь перешёл к элементу клавишей Tab. Поэтому интерактивная ссылка должна быть заметна не только при наведении мыши.

Псевдоэлемент выбирает условную часть элемента. Например, ::before добавляет оформляемое содержимое перед текстом. Для видимого содержимого свойству content нужно задать значение:

.required::before {
  content: "НОВОЕ";
  margin-right: 8px;
}
 
.required::after {
  content: " *";
  color: #c5221f;
}

Не используйте псевдоэлементы для важной информации или управления: такое содержимое лучше добавить в HTML.

Классы, каскад и наследование

Одному элементу можно назначить несколько классов через пробел. Правило .notice.warning сработает только на элементе, у которого есть оба класса:

<p class="notice">Обычное сообщение</p>
<p class="notice warning">Важное сообщение</p>

.notice {
  color: #1769aa;
  border-left: 4px solid currentColor;
}
 
.notice.warning {
  color: #a33b20;
}

Оба абзаца получают рамку из .notice. У второго текста другой цвет: более точное правило .notice.warning переопределило color, но не удалило рамку. Вложенный текст обычно наследует цвет родителя:

Попробуйте примеры: наведите указатель на ссылку, перейдите к ней клавишей Tab и сравните два сообщения.

Наследуются только некоторые свойства, например color и font-family. Рамка, фон, ширина и отступы не наследуются автоматически. Поэтому отдельно различайте два механизма: каскад выбирает правило для самого элемента, а наследование передаёт ему отдельные свойства от предка, когда своего значения нет.

Если несколько правил подходят

К одному элементу часто подходят сразу несколько правил. Каскад CSS выбирает итоговое значение с учётом важности и источника правила, специфичности селектора и порядка объявлений. Для первых примеров достаточно таких ориентиров:

• если правила пришли из одного источника и имеют одинаковую важность, более точный селектор выигрывает: #page-title точнее, чем .title, а .title точнее, чем h1;
• если у правил одинаковая специфичность, обычно применяется то, которое записано позже;
• !important меняет обычный порядок каскада, поэтому не используйте его как универсальное средство исправления стилей.

p {
  color: #333;
}
 
.notice {
  color: #174ea6;
}

Абзац с class="notice" будет синим: селектор класса точнее селектора типа.

Часто используемые свойства

Свойство отвечает за одну сторону оформления. Ниже собраны те, которые чаще всего встретятся в первых макетах:

Посмотрите, как эти свойства работают вместе на одной карточке:

.card {
  color: #202124;
  background-color: white;
  border: 1px solid #dadce0;
  border-radius: 12px;
  padding: 16px;
  margin: 8px 0;
}

Подробно устройство padding, border и margin разобрано в статье «Блочная модель».