Синтаксис

Установление свойств CSS с конкретными значениями — это основная функция языка CSS. Пара свойство-значение называется объявлением, и любой движок CSS вычисляет, какие объявления применяются к каждому элементу страницы для правильного его отображения и стилизации.

Как свойства, так и значения по умолчанию в CSS нечувствительны к регистру. Пара разделяется двоеточием, : (U+003A ДВОЕТОЧИЕ), а пробелы до, между и после свойств и значений игнорируются, но не обязательно внутри.

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

Объявления группируются в блоки, то есть в структуру, ограниченную открывающей фигурной скобкой, { (U+007B ЛЕВАЯ ФИГУРНАЯ СКОБКА), и закрывающей, } (U+007D ПРАВАЯ ФИГУРНАЯ СКОБКА). Блоки иногда могут быть вложенными, поэтому открывающие и закрывающие фигурные скобки должны соответствовать.

Такие блоки естественно называются блоками объявлений, а объявления внутри них разделяются точкой с запятой, ; (U+003B ТОЧКА С ЗАПЯТОЙ). Блок объявлений может быть пустым, то есть содержать пустое объявление. Пробелы вокруг объявлений игнорируются. Последнее объявление блока не обязательно должно завершаться точкой с запятой, хотя часто это считается хорошим стилем, поскольку это предотвращает забывание добавления точки с запятой при расширении блока другим объявлением.

Блок объявления CSS визуализирован на диаграмме ниже.

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

CSS позволяет это, связывая условия с блоками объявлений. Каждый (допустимый) блок объявлений предшествует одному или нескольким разделённым запятыми селекторам, которые являются условиями выбора некоторых элементов страницы. Список селекторов и связанный с ним блок объявлений вместе называются набором правил или часто правилом.

Набор правил CSS (или правило) визуализирован на диаграмме ниже.

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

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

Утверждение — это строительный блок, который начинается с любых символов, не являющихся пробелами, и заканчивается первой закрывающей фигурной скобкой или точкой с запятой (вне строки, без экранирования и не включённой в другую пару {}, () или []).

Существует два типа утверждений:

• Наборы правил (или правила), которые, как видно, связывают коллекцию объявлений CSS с условием, описанным селектором.
• Ат-правила, начинающиеся со знака коммерческого «@» @ (U+0040 КОММЕРЧЕСКИЙ «@»), за которым следует идентификатор, а затем продолжающиеся до конца утверждения, то есть до следующей точки с запятой (;) за пределами блока или до конца следующего блока. Каждый тип ат-правил, определённый идентификатором, может иметь собственный внутренний синтаксис и семантику, конечно. Они используются для передачи метаданных (например, @layer или @import), условной информации (например, @media или @document) или описательной информации (например, @font-face).

Любое утверждение, которое не является набором правил или ат-правилом, недействительно и игнорируется.

Существует ещё одна группа утверждений — вложенные утверждения. Это утверждения, которые могут использоваться в определённом подмножестве ат-правил — условных правилах групп. Эти утверждения применяются только в том случае, если соответствует определённому условию: содержимое ат-правила @media применяется только если устройство, на котором работает браузер, соответствует выраженному условию; содержимое ат-правила @document применяется только если текущая страница соответствует некоторым условиям и так далее. В CSS1 и CSS2.1 внутри условных правил групп могли использоваться только наборы правил. Это было очень ограничительно, и это ограничение было снято в CSS Условные правила Уровень 3. Сейчас, хотя всё ещё экспериментально и не поддерживается всеми браузерами, условные правила групп могут содержать более широкий спектр содержимого: наборы правил, но также и некоторые, но не все, ат-правила.

• Ключевые концепции CSS:
  • Синтаксис CSS
  • Комментарии
  • Уникальность
  • Наследование
  • Модель блоков
  • Режимы макета
  • Модели визуального форматирования
  • Коллапс отступов
  • Значения
    • Начальные значения
    • Вычисленные значения
    • Используемые значения
    • Фактические значения
  • Синтаксис определения значений
  • Сокращённые свойства
  • Замещаемые элементы