Типы данных CSS

Типы данных CSS определяют типичные значения (включая ключевые слова и единицы измерения), принимаемые свойствами и функциями CSS. Это особый вид типа компонентного значения.

Наиболее часто используемые типы определены в модуле «Значения и единицы CSS». Этот модуль также определяет функциональные записи, которые позволяют задавать более сложные типы или обработку. Другие типы определены в спецификациях, к которым они относятся.

Ниже приведена справочная информация о типах, с которыми вы, скорее всего, столкнётесь; однако это не исчерпывающий перечень всех типов, определённых во всех спецификациях CSS.

Синтаксис

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

Текстовые типы данных

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

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

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

Глобальные ключевые слова CSS

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

initial

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

inherit

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

revert

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

revert-layer

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

revert-rule

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

unset

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

<custom-ident>

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

<dashed-ident>

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

<string>

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

<url>

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

Числовые типы данных

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

<integer>

Одна или несколько десятичных цифр от 0 до 9, перед которыми может стоять - или +.

<number>

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

<dimension>

Число с присоединённой единицей измерения, например 90deg, 50ms или 15em. Этот тип включает расстояния (<length>), длительности (<time>), частоты (<frequency>), разрешения (<resolution>) и другие величины.

<percentage>

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

<ratio>

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

flex

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

Величины

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

<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 могут принимать значение типа <dimension> или <percentage>. В этом случае процентное значение преобразуется в величину, соответствующую допустимому типу размера. Для свойств, которые могут принимать процентное значение наряду с размером, используется один из перечисленных ниже типов.

<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» определяют следующие типы данных для фигур:

<basic-shape>

Описывает функции фигур, используемые в свойствах clip-path, shape-outside и offset-path.

<corner-shape-value>

Описывает форму угла контейнера. Используется сокращённым свойством corner-shape и его составляющими свойствами для задания формы соответствующих углов контейнера.

Алфавитный указатель типов данных

• <absolute-size>
• <alpha-value>
• <angle>
• <angle-percentage>
• <axis>
• <baseline-position>
• <basic-shape>
• <blend-mode>
• <box-edge>
• <calc-keyword>
• <calc-sum>
• <color>
• <color-interpolation-method>
• <content-distribution>
• <content-position>
• <corner-shape-value> Экспериментальная
• <custom-ident>
• <dashed-function> Экспериментальная
• <dashed-ident>
• <dimension>
• <display-box>
• <display-inside>
• <display-internal>
• <display-legacy>
• <display-listitem>
• <display-outside>
• <easing-function>
• <filter-function>
• <flex>
• <frequency>
• <frequency-percentage>
• <generic-family>
• <gradient>
• <hex-color>
• <hue>
• <hue-interpolation-method>
• <ident>
• <image>
• <integer>
• <length>
• <length-percentage>
• <line-style>
• <line-width>
• <named-color>
• <number>
• <overflow>
• <overflow-position>
• <percentage>
• <position>
• <position-area>
• <ratio>
• <relative-size>
• <resolution>
• <self-position>
• <shape> Устарело
• <string>
• <system-color>
• <text-edge>
• <time>
• <timeline-range-name>
• <time-percentage>
• <transform-function>
• <url>

Спецификации

См. также

• Модуль «Значения и единицы CSS»
• Учебник: значения и единицы
• Функциональная запись CSS