Синтаксис определения значений

Общие ключевые слова

Ключевое слово с предопределенным значением появляется буквально, без кавычек. Например: auto, smaller, или ease-in.

Частный случай inherit, initial и unset

Все свойства CSS принимают ключевые слова inherit, initial, и unset. Они не показаны в определении значения и неявно определены.

В CSS несколько символов могут появляться самостоятельно, например, косая черта (/) или запятая (,), и используются в определении свойства для разделения его частей. Запятая часто используется для разделения значений в перечислениях или параметров в функциях, похожих на математические; косая черта часто разделяет части значения, которые семантически различны, но имеют общий синтаксис. Обычно косая черта используется в сокращенных свойствах для разделения компонентов одного типа, но принадлежащих различным свойствам.

Оба символа отображаются буквально в определении значения.

Базовые типы данных

Некоторые типы данных используются во всем CSS и определяются один раз для всех значений в спецификации. Называемые базовыми типами данных, они представлены своим именем, окружённым символами < и >: <angle>, <string>, …

Нетерминальные типы данных

Менее распространенные типы данных, называемые нетерминальными типами данных, также окружены < и >.

Нетерминальные типы данных бывают двух видов:

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

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

bold [ thin && <length> ]

Этот пример соответствует следующим значениям:

• bold thin 2vh
• bold 0 thin
• bold thin 3.5em

Но не:

• thin bold 3em, так как bold сопоставлен с компонентом, определённым в скобках, он должен стоять перед ним.

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

bold <length>, thin

Этот пример соответствует следующим значениям:

• bold 1em, thin
• bold 0, thin
• bold 2.5cm, thin
• bold 3vh, thin

Но не:

• thin 1em, bold, так как сущности должны быть в выраженном порядке
• bold 1em thin, так как сущности обязательны; запятая, литерал, должна быть присутствовать
• bold 0.5ms, thin, так как значения ms не являются <length>

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

bold && <length>

Этот пример соответствует следующим значениям:

• bold 1em
• bold 0
• 2.5cm bold
• 3vh bold

Но не:

• bold, так как оба компонента должны появиться в значении.
• bold 1em bold, так как оба компонента должны появиться только один раз.

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

<'border-width'> || <'border-style'> || <'border-color'>

Этот пример соответствует следующим значениям:

• 1em solid blue
• blue 1em
• solid 1px yellow

Но не:

• blue yellow, так как компонент должен появиться не более одного раза.
• bold, так как это не ключевое слово, разрешенное как значение любой из сущностей.

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

<percentage> | <length> | left | center | right | top | bottom

Этот пример соответствует следующим значениям:

• 3%
• 0
• 3.5em
• left
• center
• right
• top
• bottom

Но не:

• center 3%, так как только один из компонентов должен быть присутствовать.
• 3em 4.5em, так как компонент должен быть присутствовать не более одного раза.

Множитель — это знак, который указывает, сколько раз предыдущая сущность может повторяться. Без множителя сущность должна появиться ровно один раз.

Множители не могут быть добавлены и имеют приоритет над всеми комбинаторами.

Множитель звездочка указывает, что сущность может появиться ноль, один или несколько раз.

bold smaller*

Этот пример соответствует следующим значениям:

• bold
• bold smaller
• bold smaller smaller
• bold smaller smaller smaller, и так далее.

Но не:

• smaller, так как bold сопоставлена, и она должна появиться перед любым ключевым словом smaller.

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

bold smaller+

Этот пример соответствует следующим значениям:

• bold smaller
• bold smaller smaller
• bold smaller smaller smaller, и так далее.

Но не:

• bold, так как smaller должна появиться по крайней мере один раз.
• smaller, так как bold сопоставлена и должна появиться перед любым ключевым словом smaller.

Множитель вопросительный знак указывает, что сущность является необязательной и должна появиться ноль или один раз.

bold smaller?

Этот пример соответствует следующим значениям:

• bold
• bold smaller

Но не:

• bold smaller smaller, так как smaller должна появиться не более одного раза.
• smaller, так как bold сопоставлена и должна появиться перед любым ключевым словом smaller.

Множитель фигурных скобок, заключающий в себе два целых числа, разделенных запятой, A и B, указывает, что сущность должна появляться как минимум A раз и как максимум B раз.

bold smaller{1,3}

Этот пример соответствует следующим значениям:

• bold smaller
• bold smaller smaller
• bold smaller smaller smaller

Но не соответствует:

• bold, так как smaller должно появляться как минимум один раз.
• bold smaller smaller smaller smaller, так как smaller должно появляться не более трех раз.
• smaller, так как bold расположено рядом и должно появиться перед любым ключевым словом smaller

Множитель знака решетки указывает, что сущность может повторяться один или более раз (например, множитель плюс), но каждое вхождение отделяется запятой (',').

bold smaller#

Этот пример соответствует следующим значениям:

• bold smaller
• bold smaller, smaller
• bold smaller, smaller, smaller, и так далее.

Но не соответствует:

• bold, так как smaller должно появляться как минимум один раз.
• bold smaller smaller smaller, так как разные вхождения smaller должны быть разделены запятыми.
• smaller, так как bold расположено рядом и должно появиться перед любым ключевым словом smaller.

Знак решетки может быть необязательно последован фигурными скобками, чтобы указать, сколько раз повторяется сущность.

bold smaller#{1,3}

Этот пример соответствует следующим значениям:

• bold smaller
• bold smaller, smaller
• bold smaller, smaller, smaller

Но не соответствует:

• bold smaller, smaller, smaller, smaller, так как smaller должно появляться не более трех раз.

bold smaller#{2}

Этот пример соответствует следующему значению:

• bold smaller, smaller

Но не соответствует:

• bold smaller, так как smaller должно появляться ровно два раза.

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

[ bold? smaller? ]!

Этот пример соответствует следующим значениям:

• bold
• smaller
• bold smaller

Но не соответствует:

• ни bold ни smaller, так как одно из них должно появиться.
• smaller bold, так как bold расположено рядом и должно появиться перед ключевым словом smaller.
• bold smaller bold, так как bold и smaller могут появиться только один раз.

Некоторые типы могут принимать числовые значения в определённом диапазоне. Например, свойство column-count может принимать целое число от положительной единицы до бесконечности включительно. Соответствующий синтаксис выглядит так:

<integer [1,∞]>

Любое значение вне этого указанного диапазона делает всё объявление недействительным, поэтому браузер его проигнорирует.

Обозначение диапазона в квадратных скобках [min, max] указывает на включительный диапазон между min и max значениями. Это обозначение используется в числовых типах обозначений и может включать единицы, например <angle [0,180deg]>. Положительная и отрицательная бесконечность (-∞ и ∞) не должны иметь указанных единиц. Типы, заданные в единицах, могут иметь нулевые значения с или без единиц, например <time [0s,10s]> или <time [0,10s]>.

Вот ещё несколько примеров:

• <integer [-∞,∞]>: Любое целое число от отрицательной бесконечности до положительной бесконечности.
• <integer [0,∞]>: Любое целое число от 0 до положительной бесконечности включительно является допустимым. Отрицательные целые числа недопустимы.
• <time [0s,10s]> или <time [0,10s]>: Любая длительность от 0 до 10 секунд является допустимой.
• <integer [-∞,-1]> | <integer [1,∞]>: Любое целое число, кроме нуля, является допустимым.

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