Синтаксис правила: селектор, свойство, значение

Разбираем анатомию правила CSS до последней скобки, чтобы дальше читать любой стиль без запинки.

Правило CSS — это селектор и идущий за ним блок объявлений в фигурных скобках, где каждое объявление — пара «свойство: значение».

Анатомия правила

Любое правило CSS устроено одинаково. Посмотрим на пример и разберём его по частям:

h1 {
  color: navy;
  font-size: 28px;
}

• h1 — селектор: указывает, к каким элементам применить стиль (здесь — ко всем заголовкам первого уровня).
• Фигурные скобки { } ограничивают блок объявлений.
• color и font-size — свойства: что именно мы меняем.
• navy и 28px — значения этих свойств.
• Между свойством и значением ставится двоеточие, в конце каждого объявления — точка с запятой.

Читается это так: «для всех h1 задать цвет navy и размер шрифта 28 пикселей».

Объявление — это пара «свойство: значение»

Каждая строка внутри скобок — отдельное объявление. Свойство выбирают из словаря CSS (их сотни: color, margin, background, display...), а значение зависит от свойства. У color это цвет, у font-size — размер с единицей измерения.

p {
  color: #333333;
  line-height: 1.6;
  margin-bottom: 16px;
}

Здесь у абзацев тёмно-серый текст, увеличенный межстрочный интервал и отступ снизу. Три объявления — три отдельных изменения.

Точка с запятой и пробелы

Точка с запятой разделяет объявления. После самого последнего её можно опустить, но привычка ставить её всегда спасает от ошибок, когда вы дописываете новую строку. Пробелы и переносы строк CSS игнорирует — они нужны только людям. Эти два правила работают одинаково:

a { color: blue; text-decoration: none; }

a {
  color: blue;
  text-decoration: none;
}

Второй вариант с переносами читается легче, поэтому так и пишут в реальных проектах.

Комментарии

Заметки для себя и коллег оставляют в комментариях между /* и */. Браузер их игнорирует.

/* Основной цвет бренда */
button {
  background: #ff5722; /* оранжевый */
}

Комментарии помогают объяснить, зачем нужно правило, и временно «выключить» кусок стилей, не удаляя его.

Частые ошибки новичков

• Забыли двоеточие: color blue вместо color: blue — правило не сработает.
• Поставили запятую вместо точки с запятой между объявлениями — браузер запутается.
• Не закрыли фигурную скобку — «сломаются» все правила ниже.

Если стиль не применился, первым делом проверьте именно эти три мелочи.

Итог

• Правило = селектор + блок объявлений в { }.
• Объявление = свойство: значение; (двоеточие внутри, точка с запятой в конце).
• Комментарии пишут между /* и */; пробелы и переносы — для читаемости.