Синтаксис CSS

Вы уже знаете, что CSS отвечает за оформление HTML. На этом занятии мы разберём грамматику правила, чтобы вы читали и писали стили уверенно и не гадали, где ставить фигурные скобки, двоеточия и точки с запятой.

Что такое синтаксис CSS?

Синтаксис CSS — это устойчивый шаблон, по которому записывается правило стиля. Почти любое повседневное правило устроено одинаково: вы выбираете, что нужно оформить (селектор), открываете блок объявлений символом {, перечисляете одно или несколько объявлений и закрываете блок символом }. Каждое объявление связывает свойство со значением.

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

Разберите правило на части с названиями. Когда вы умеете назвать каждую часть, опечатки находить гораздо проще.

Правило с подписанными частями

Вот минимальное правило, в котором видны все основные части. Селекторы мы разберём подробнее на следующих занятиях, а сейчас важно усвоить правильную структуру.

Читаем слева направо

• p — селектор (все абзацы)
• { … } — блок объявлений
• color — свойство
• : — отделяет свойство от значения
• teal — значение
• ; — завершает объявление
  Пробелы и переносы строк можно расставлять как угодно. Правило p{color:teal;} можно записать в одну строку — браузер поймёт его точно так же. Но для учёбы и командной работы лучше писать читаемо, в несколько строк.

Несколько объявлений в одном блоке

Одно правило может задавать много свойств для одного и того же селектора. Пишите каждое объявление с новой строки и завершайте его точкой с запятой.

Почему это работает

• .note — селектор класса (классы мы ещё потренируем)
• Четыре объявления находятся в одном блоке объявлений
• Браузер применяет их все к элементам с class="note"
• Если между двумя объявлениями пропустить точку с запятой, следующее свойство может не сработать

Группировка селекторов

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

Когда стоит группировать

Группировка избавляет от копирования кода, когда заголовки (или другие элементы) должны выглядеть одинаково. Если позже одному из селекторов понадобится особый стиль, напишите для него отдельное правило, а не перегружайте группу.

Памятка по знакам препинания

Держите этот короткий список в голове, пока пишете:

• Фигурные скобки охватывают блок объявлений
• Двоеточие стоит между свойством и значением
• Точка с запятой завершает каждое объявление (перед следующим она обязательна; после последнего её тоже лучше ставить — это хорошая привычка)
• Запятые разделяют сгруппированные селекторы, а не свойства
• Названия свойств и большинство значений-ключевых слов не зависят от регистра, но по соглашению их пишут строчными буквами

Попробуйте сами

1. Создайте файл syntax.html с абзацем <p class="note">Syntax practice</p> и блоком <style> в head.
2. Добавьте правило .note с несколькими объявлениями из этого занятия.
3. Измените background-color на #fef3c7, сохраните файл и обновите страницу.
4. Добавьте пятое объявление font-size: 1.125rem; в тот же блок, сохраните и снова обновите страницу.
5. Убедитесь, что изменились и фон, и размер шрифта. Если нет — проверьте скобки и точки с запятой.

Частые ошибки

• Запись color teal без двоеточия — браузер не может разобрать объявление
• Забытая { или }: объявления оказываются вне блока, и их игнорируют
• Пропущенная точка с запятой между двумя объявлениями — второе свойство не применяется
• Запятая вместо двоеточия между свойством и значением (color, teal)
• Свойство, записанное само по себе, без селектора и скобок, — это не законченное правило

Итоги

• Синтаксис CSS = селектор + блок объявлений { } с объявлениями внутри
• Объявление записывается как property: value;
• В одном блоке может быть много объявлений для одного селектора
• Запятые объединяют селекторы с одинаковыми стилями
• Внимательность к скобкам, двоеточиям и точкам с запятой помогает избежать «тихих» ошибок
• Практикуйтесь: меняйте значения, добавляйте объявления и обновляйте страницу