Типы данных CSS

selector {
  property: <unit-data-type>;
}

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

Эти типы включают ключевые слова и идентификаторы, а также строки и URL-адреса.

Предопределенные ключевые слова

Ключевые слова с предопределенным значением, например, значение collapse для свойства border-collapse.

Ключевые слова CSS

Все свойства, включая пользовательские свойства, принимают ключевые слова CSS:

initial

Значение, заданное в качестве начального значения свойства.

inherit

Вычисленное значение свойства для родительского элемента.

revert

Возвращает каскад к значению более раннего источника.

unset

Действует как inherit или initial в зависимости от того, наследуется ли свойство.

<custom-ident>

Определяемый пользователем идентификатор, например, имя, присвоенное с помощью свойства grid-area.

<dashed-ident>

Идентификатор <custom-ident> с дополнительным ограничением, что он должен начинаться с двух дефисов, например, с Пользовательскими свойствами CSS.

<string>

Строка в кавычках, например, используемая в качестве значения свойства content.

<url>

Ссылка на ресурс, например, как значение свойства background-image.

Эти типы данных используются для указания количеств, индексов и позиций. Большая часть из них определена в спецификации Значения и Единицы, однако дополнительные типы описаны в других спецификациях, где они специфичны для этой спецификации — например, единица fr в CSS сетке.

<integer>

Одна или несколько десятичных цифр от 0 до 9.

<number>

Действительные числа, которые также могут иметь дробную часть, например 1 или 1,34.

<dimension>

Число с присоединенной к нему единицей измерения, например 23px или 15em.

<percentage>

Число со знаком процента, например 10%.

<ratio>

Отношение, записанное с синтаксисом <number> / <number>.

<flex>

Гибкая длина, введенная для CSS сетки, записанная как <number> с присоединенной единицей fr и используемая для определения размеров дорожек сетки.

Эти типы используются для указания расстояний и других величин.

<length>

Длины представляют собой <dimension> и относятся к расстояниям.

<angle>

Углы используются в таких свойствах, как linear-gradient(), и являются <dimension> с одной из единиц deg, grad, rad, или turn.

<time>

Единицы длительности — <dimension> с единицей s или ms.

<frequency>

Частоты — <dimension> с единицей Hz или kHz.

<resolution>

Это <dimension> с идентификатором единицы dpi, dpcm, dppx, или x.

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

<length-percentage>

Тип, который может принимать значение размера или процент.

<frequency-percentage>

Тип, который может принимать значение частоты или процент.

<angle-percentage>

Тип, который может принимать значение угла или процент.

<time-percentage>

Тип, который может принимать значение времени или процент.

Спецификация CSS Цвет определяет тип данных <color> и другие типы, связанные с цветом в CSS.

<color>

Задается как ключевое слово или числовое значение цвета.

<alpha-value>

Указывает прозрачность цвета. Может быть <number>, в этом случае 0 — полностью прозрачно, а 1 — полностью непрозрачно, или <percentage>, в этом случае 0% — полностью прозрачно, а 100% — полностью непрозрачно.

<hue>

Указывает <angle>, с идентификатором единицы deg, grad, rad, или turn, или безыменная единица <number> интерпретируется как deg, цветового круга, специфичного для <absolute-color-functions> которого он является компонентом.

Спецификация CSS Изображения определяет типы данных, имеющие дело с изображениями, включая градиенты.

<image>

Ссылка URL на изображение или градиент цвета.

<color-stop-list>

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

<linear-color-stop>

<color> и <length-percentage> для указания точки остановки цвета для этой части градиента.

<linear-color-hint>

<length-percentage> для указания того, как интерполируется цвет.

<ending-shape>

Используется для радиальных градиентов; может иметь ключевое значение circle или ellipse.

<size>

Определяет размер фигуры окончания радиального градиента. Принимает значение ключевого слова или <length>, но не процент.

Тип данных <position> интерпретируется так, как определено для свойства <background-position>.

<position>

Определяет положение области объекта. Принимает ключевое слово, такое как top или left, или <length-percentage>.

Эти типы данных используются в вычислениях функций математики CSS.

<calc-sum>

Вычисление, представляющее собой последовательность значений вычислений, чередующихся с операторами сложения (+) и вычитания (-). Для этого типа данных оба значения должны иметь единицы измерения.

<calc-product>

Вычисление, представляющее собой последовательность значений вычислений, чередующихся с операторами умножения (*) и деления (/). При умножении одно значение должно быть без единиц измерения. При делении второе значение должно быть без единиц измерения.

<calc-value>

Определяет допустимые значения для вычислений, такие как <number>, <dimension>, <percentage>, <calc-keyword> или вложенные вычисления <calc-sum>.

<calc-keyword>

Определяет ряд ключевых слов CSS, представляющих числовые константы, такие как e и π, которые могут быть использованы в функциях математики CSS.

• Единицы и значения CSS
• Введение в CSS: Значения и единицы
• Функциональная нотация CSS