CSS значения и единицы

• <custom-ident>
• Заранее определённые ключевые слова как <ident>
• <string>
• <url>

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

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

В спецификациях CSS значения, которые могут быть определены веб-разработчиком, такие как анимации ключевых кадров, имена шрифтов или области сетки, перечислены как <custom-ident>, <string> или оба.

Когда разрешены как цитированные, так и нецитированные пользовательские значения текста, в спецификации будет указано <custom-ident> | <string>, что кавычки необязательны, как в случае с именами анимации:

@keyframe validIdent {
  /* keyframes go here */
}
@keyframe 'validString' {
  /* keyframes go here */
}

Некоторые текстовые значения недействительны, если заключены в кавычки. Например, значение grid-area может быть <custom-ident>, поэтому если у нас есть область сетки с именем content мы будем использовать её без кавычек:

.item {
  grid-area: content;
}

В сравнении, тип данных, являющийся <string>, например, строковое значение свойства content, должен быть заключен в кавычки:

.item::after {
  content: "This is my content.";
}

Хотя вы можете, в целом, создавать любые имена, включая использование эмодзи, идентификатор не может быть none, unset, initial, или inherit, начинаться с цифры или двух дефисов, и, как правило, не должен совпадать с любым другим заранее определённым ключевым словом CSS. Более подробную информацию см. на страницах справочников <custom-ident> и <string>.

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

При просмотре синтаксиса значений свойств CSS в спецификации CSS или на странице свойства MDN допустимые ключевые слова будут перечислены в следующем формате. Следующие значения являются заранее определёнными ключевыми словами, разрешёнными для float.

left | right | none | inline-start | inline-end

Эти значения используются без кавычек:

.box {
  float: left;
}

Помимо заранее определённых ключевых слов, являющихся частью спецификации для свойства, все свойства CSS принимают значения CSS initial, inherit, unset, revert и revert-layer, которые явно задают поведение по умолчанию.

initial

Представляет значение, указанное как начальное значение свойства.

inherit

Представляет вычисленное значение свойства на родительском элементе, при условии, что оно наследуется.

unset

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

revert

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

revert-layer

Отменяет значение свойства в слое каскада до значения свойства в правиле CSS, соответствующем элементу в предыдущем слое каскада. Значение свойства с этим ключевым словом пересчитывается так, как будто никакие правила не были указаны для целевого элемента в текущем слое каскада.

Тип <url> использует функциональную запись, которая принимает <string> — URL. Это может быть абсолютный URL или относительный URL. Например, если вы хотите включить изображение фона, вы можете использовать любое из следующих.

.box {
  background-image: url("images/my-background.png");
}

.box {
  background-image: url("https://www.exammple.com/images/my-background.png");
}

Параметр для url() может быть заключён в кавычки или без них. Если без кавычек, он анализируется как <url-token>, который имеет дополнительные требования, включая экранирование определённых символов. См. <url> для получения дополнительной информации.

• <integer>
• <number>
• <dimension>
• <percentage>

Целое число состоит из одной или нескольких десятичных цифр, 0 через 9, таких как 1024 или -55. Целое число может быть предварено символом + или - без пробела между символом и целым числом.

Число <number> представляет собой вещественное число, которое может или не может иметь десятичную точку с дробной частью, например, 0.255, 128 или -1.2. Числа также могут быть предварены символами + или -.

Некоторые свойства принимают размер, который может быть либо одним из двух типов, например, <length> или <percentage>. В этом случае допустимое значение детализировано в спецификации в виде комбинированной единицы, например, <length-percentage>. Другие возможные комбинации:

• <frequency-percentage>
• <angle-percentage>
• <time-percentage>

• <color>
• <image>
• <position>

Цвет

Значение <color> задаёт цвет элемента (например, цвет фона), и определено в CSS Color Module.

Изображение

Значение <image> определяет все типы изображений, которые могут быть использованы в CSS, и определено в CSS Image Values and Replaced Content Module.

Позиция

Тип <position> определяет 2D позиционирование объекта внутри области позиционирования, например, изображение фона внутри контейнера. Этот тип интерпретируется как background-position и, следовательно, задаётся в спецификации CSS Backgrounds and Borders.

• calc()
• min()
• max()
• minmax()
• clamp()
• toggle()
• attr()

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

Разрешается использовать пробелы, но они необязательны внутри скобок. (Но см. заметки о пробелах на страницах для min(), max(), minmax(), и clamp() функций.)

Некоторые устаревшие функциональные нотации, такие как устаревший синтаксис для rgb(), rgba(), hsl(), и hsla(), использовали запятые, но запятые обычно используются только для разделения элементов в списке. Если запятая используется для разделения аргументов, пробелы перед и после запятой необязательны.

• Основные типы данных CSS
• Введение в CSS: Значения и единицы
• Тригонометрические функции в CSS