Поиск

Значения

Целые и вещественные числа

Некоторые типы значений могут быть выражены в целых (обозначаются как <целое>) или вещественных числах (обозначаются как <число>). Вещественные и целые числа представляются только в десятичной системе счисления. Значения типа <целое> состоят из одной или нескольких цифр от 0 до 9. Значения типа <число> могут совпадать с типом <целое> или состоять из группы цифр и следующих за нею точки и другой группы цифр. Вещественным и целым числам могут предшествовать символы "-" или "+" для обозначения знака.

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

Единицы измерения длины

Единицы измерения длины используются при определении горизонтальных и вертикальных размеров.

Значения поперечных размеров (в данной спецификации обозначенные как <длина>) задаются в соответствии со следующим форматом: знак ('+' или '-', по умолчанию используется знак '+'), непосредственно за которым следует <число> (с десятичной точкой или без нее), непосредственно за которым следует единица измерения длины (например, пикселы, градусы и т.д.). После нулевого значения длины единицу измерения можно опускать.

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

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

К относительным единицам измерения относятся:

  • em: свойство 'font-size' соответствующего шрифта
  • ex: свойство 'x-height' соответствующего шрифта
  • px: пиксели, относительно устройства просмотра
H1 { margin: 0.5em } /* em */
H1 { margin: 1ex } /* ex */
P { font-size: 12px } /* px */

Единица измерения 'em' равна вычисленному значению свойства 'font-size' элемента, с которым она используется. Исключение составляет тот случай, когда 'em' используется непосредственно со значением самого свойства 'font-size' при указании размера шрифта родительского элемента. Она может использоваться для измерения вертикальных и горизонтальных размеров. (В типографической лексике данная единица измерения иногда называется учетверенной шириной.)

Единица измерения 'ex' определяется свойством шрифта 'x-height'. Термин "x-высота" принят из-за того, что он определял размеры, равные высоте строчной буквы "x". Данная единица измерения может использоваться и для тех шрифтов, не включающих букву "x".

Правило
H1 { line-height: 1.2em }

говорит о том, что высота строки элементов H1 будет на 20% больше размера шрифта элементов H1. С другой стороны, правило

H1 { font-size: 1.2em }

говорит о том, что размер шрифта элементов H1 будет на 20% больше размера шрифта, наследуемого элементами H1.

Если единицы измерения 'em' и 'ex' используются для корневого элемента дерева документа (например, для элемента "HTML" в HTML-документе), то их масштаб определяется относительно начального значения свойства.

Единица измерения 'пиксел' используется для определения разрешающей способности устройств вывода, чаще всего, компьютерных мониторов. Если плотность расположения пикселей некоторого устройства вывода заметно отличается от разрешения типичного дисплея, то агент пользователя должен изменить масштаб одного пиксела. Рекомендуется в качестве эталонного пиксела рассматривать угловой размер одного пиксела в устройстве, обладающем разрешением в 90 точек на дюйм и удаленном от наблюдателя на расстояние вытянутой руки. Для типичной длины руки, равной 28 дюймам, этот угловой размер составляет примерно 0.0227 градусов.

При чтении на расстоянии вытянутой руки 1px равен примерно 0.28 мм (1/90 дюйма). При печати на лазерном принтере, т.е. при чтении на расстоянии меньшем, чем длина руки (примерно, 55 см, 21 дюйм), 1px равен примерно 0.21 мм. Для принтера с разрешением в 300 точек на дюйм значение пиксела может быть округлено до 3 точек (0.25 мм); для принтера с разрешением в 600 точек на дюйм - до 5 точек.

Следующие два рисунка демонстрируют влияние расстояния, на котором осуществляется их просмотр, на размер пиксела и разрешение устройства вывода. На первом рисунке при чтении на расстоянии 71 см (28 дюймов) размер пиксела равен 0.28 мм, а при чтении на расстоянии 3.5 м (12 футов) - 1.4 мм.

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

Дочерние элементы не наследуют относительные значения, указанные для их родительских элементов, обычно они наследуют вычисляемые значения.

Согласно следующим правилам вычисляемое значение свойства 'text-indent' элементов H1 будет равно 36pt, а не 45pt, как это было бы, если бы H1 являлся дочерним элементом элемента BODY.

BODY {
font-size: 12pt;
text-indent: 3em; /* т.е. 36pt */
}
H1 { font-size: 15pt }

Абсолютные единицы измерения полезны только в том случае, когда известны физические параметры устройства вывода. К ним относятся:

  • in: дюйм - 1 дюйм равен 2.54 сантиметрам.
  • cm: сантиметр
  • mm: миллиметр
  • pt: точка - 1 точка, используемая в CSS2, равна 1/72 дюйма.
  • pc: пика - 1 пика равна 12 точкам.
H1 { margin: 0.5in } /* дюймы */
H2 { line-height: 3cm } /* сантиметры */
H3 { word-spacing: 4mm } /* миллиметры */
H4 { font-size: 12pt } /* точки */
H4 { font-size: 1pc } /* пики */

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

Процентные соотношения

Процентное соотношение (обозначаемое в данной спецификации как <проценты>) записывается в соответствии со следующим форматом: знак числа ('+' или '-', по умолчанию используется знак '+'), непосредственно за которым следует <число>, непосредственно за которым следует символ '%'.

Любое значение, задаваемое в процентах, всегда определяется относительно некоторого другого значения, например, значения длины. У каждого свойства, поддерживающего процентное задание значений, определено и то значение, относительно которого определяется процентное соотношение. В таком качестве может выступать значение другого свойства того же элемента, или свойства предка, или форматирующего контекста (например, значение ширины контейнера). Если значение процентного соотношения присваивается свойству корневого элемента, и оно соотносится с наследуемым значением другого свойства, то конечным значением будет соответствующая процентная доля, взятая от начального значения этого свойства.

Т.к. дочерние элементы, как правило, наследуют вычисляемое значение от родительских элементов, то в следующем примере дочерний элемент элемента P унаследует значение свойства 'line-height', равное 12pt, а не процентное значение (120%):

P { font-size: 10pt }
P { line-height: 120% } /* 120% от 'font-size' */
URL + URN = URI

URL (универсальный адрес ресурса - Uniform Resource Locator, см. [RFC1738] и [RFC1808]) описывает адрес ресурса в Web. Идентификация ресурсов осуществляется с помощью URN (универсального имени ресурса - Uniform Resource Name). В совокупности они образуют URI (универсальный идентификатор ресурсов - Uniform Resource Identifier, см. [URI]). В данной спецификации используется понятие URI.

Значения URI обозначаются как <uri>. Для указания URI в значениях свойств используется структура "url()". Например:

BODY { background: url("http://www.bg.com/pinkish.gif") }

Значение URI задается в следующем формате: строка 'url(', затем, возможно, пробел, затем, возможно, одинарная или двойная кавычка, затем сам URI, затем одинарная или двойная кавычка, затем пробел, затем скобка ')'. Кавычки в обоих случаях должны быть одинаковыми.

Пример без использования кавычек:

LI { list-style: url(http://www.redballs.com/redball.png) disc }

Скобки, запятые, пробелы, одинарные и двойные кавычки, находящиеся непосредственно в самом URI, должны кодироваться с использованием обратного слэша:

'\(', '\)', '\,' и т.д.

В зависимости от типа используемого URI вышеупомянутые символы можно задавать с помощью процедур, предусмотренных в URI (где "(" = %28, ")" = %29, и т.д.) [URI].

Для создания модульных таблиц стилей, не зависящих от абсолютного адреса ресурса, разработчики могут использовать относительные URI. Они (в соответствии с [RFC1808]) разрешаются в полные URI с использованием базового URI. Алгоритм этой процедуры описан в разделе 3 стандарта RFC 1808. Для таблиц стилей CSS базовым является URI таблиц стилей, а не исходного документа.

Например, предположим, что следующее правило:

BODY { background: url("yellow") }

помещено в таблицу стилей, ссылка на которую определяется следующим URI:

http://www.myorg.org/style/basic.css

В качестве фона элемента BODY исходного документа будет использоваться изображение, описанное в ресурсе, заданном следующим URI:

http://www.myorg.org/style/yellow

Агенты пользователей могут по-разному обрабатывать URI, ссылающиеся на несуществующие или неисполнимые ресурсы.

Счетчики

Счетчики обозначаются идентификаторами (см. свойства 'counter-increment' и 'counter-reset'). Для обращения к значению счетчика, используется запись 'counter(<идентификатор>)' или 'counter(<идентификатор>, <тип-стиля-списка>)'. По умолчанию используется стиль 'decimal'.

Чтобы обратиться к последовательности вложенных счетчиков, обозначенных одним именем, используется запись вида 'counters(<идентификатор>, <строка>)' или 'counters(<идентификатор>, <строка>, <тип-стиля-списка>)'. См. раздел "Вложенные счетчики и диапазон" в главе о генерируемом содержимом.

В CSS2 доступ к значениям счетчиков можно получить только с помощью свойства 'content'. Следует помнить, что в качестве <типа-стиля-списка> может выступать 'none'. Так 'counter(x, none)' приводит к выводу пустой строки.

Ниже представлена таблица стилей, которая позволяет осуществить нумерацию абзацев (P) в каждой главе (H1). Нумерация производится с использованием римских цифр, после которых стоит точка и пробел:

P {counter-increment: par-num}
H1 {counter-reset: par-num}
P:before {content: counter(par-num, upper-roman) ". "}

Предполагается, что счетчики, не попадающие в область действия правила 'counter-reset', обнуляются этим правилом в корневом элементе.

Цвета

<Цвет> является либо ключевым словом, либо численным значением в RGB.

Список ключевых слов, используемых для названия цветов: aqua (цвет морской волны), black (черный), blue (синий), fuchsia (фуксия), gray (серый), green (зеленый), lime (желто-зеленый), maroon (темно-бордовый), navy (темно-синий), olive (оливковый), purple (пурпурный), red (красный), silver (серебряный), teal (темно-бирюзовый), white (белый) и yellow (желтый). Эти 16 цветов определены в HTML 4.0 ([HTML40]). В дополнение к этим ключевым словам пользователи могут создавать собственные для обозначения цветов, используемых определенными объектами в пользовательской среде. Дополнительную информацию можно получить в разделе о системных цветах.

BODY {color: black; background: white }
H1 { color: maroon }
H2 { color: olive }

Цветовая модель RGB используется при числовом описании цветов. Во всех следующих примерах указывается один и тот же цвет:

EM { color: #f00 } /* #rgb */
EM { color: #ff0000 } /* #rrggbb */
EM { color: rgb(255,0,0) } /* целое в диапазоне 0 - 255 */
EM { color: rgb(100%, 0%, 0%) } /* число с плавающей точкой 0.0% - 100.0% */

В шестнадцатеричном представлении запись значения RGB имеет следующий формат: символ '#', непосредственно за которым следует три или шесть шестнадцатеричных символов. Значение RGB из трех цифр (#rgb) преобразуется в последовательность из шести цифр (#rrggbb) путем дублирования цифр, а не добавления нулей. Например, #fb0 расширяется до #ffbb00. Поэтому белый цвет (#ffffff) можно указать в более короткой форме (#fff). Более того, при этом исчезает зависимость от цветопередачи дисплея.

В функциональном представлении формат записи значения RGB имеет следующий вид: строка 'rgb(', непосредственно за которой следует список из трех разделенных запятыми вещественных (или целочисленных, или процентных) значений, непосредственно за которыми следует скобка ')'. Целочисленное значение 255 эквивалентно процентному значению 100% и шестнадцатеричным значениям F или FF, так что rgb(255,255,255) = rgb(100%,100%,100%) = #FFF. Допускаются пробелы вокруг числовых значений.

Все цвета, используемые в модели RGB, принадлежат цветовому пространству sRGB (см. [SRGB]). Агенты пользователей могут представлять цвета с разной точностью, но использование sRGB дает возможность однозначного определения цвета, соотносимого с международным стандартом (см. [COLORIMETRY]).

Конформные пользовательские агенты в возможностях отображения цветов могут ограничиваться только гамма-коррекцией. Пространство sRGB в заданных условиях просмотра определяет цветовую гамму дисплея 2.2. Агенты пользователей должны корректировать заданные в CSS цвета таким образом, чтобы в комбинации с "натуральной" гаммой цветов выходных устройств получалась эффективная цветовая гамма 2.2. Более подробную информацию можно получить в разделе о гамма-коррекции. Помните, что это повлияет только на цвета, определенные в CSS; считается, что каждое изображение само по себе несет информацию о цвете.

Значения, находящиеся за пределами возможностей цветопередачи какого-либо устройства, должны быть удалены: значения красного, зеленого и синего цветов должны быть откорректированы так, чтобы они попадали в диапазон цветопередачи устройства. У обычных мониторов, использующих электронно-лучевую трубку, цветовой диапазон совпадает с sRGB. Поэтому для них три нижеприведенных правила эквивалентны:

EM { color: rgb(255,0,0) } /* целое в диапазоне 0 - 255 */
EM { color: rgb(300,0,0) } /* обрезается до rgb(255,0,0) */
EM { color: rgb(255,-10,0) } /* обрезается до rgb(255,0,0) */
EM { color: rgb(110%, 0%, 0%) } /* обрезается до rgb(100%,0%,0%) */

У других устройств, например, у принтеров, цветовой диапазон отличается от sRGB. Поэтому некоторые цвета, находящиеся за пределами пространства sRGB, т.е. не попадающие в диапазон от 0 до 255, несмотря на это, будут отображаться (в рамках цветового диапазона устройства), в то время как другие цвета из диапазона 0..255, лежащие за пределами цветовой гаммы устройства, будут усечены.

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

Углы

Значения углов (в тексте обозначаемые как <угол>) используются в звуковых таблицах стилей.

Значения углов задаются в соответствии со следующим форматом: произвольный символ знака ('+' или '-', знак '+' используется по умолчанию), непосредственно за которым следует <число>, непосредственно за которым следует идентификатор единицы измерения углов.

К идентификаторам единиц измерения углов относятся:

  • deg: градусы
  • grad: грады
  • rad: радианы

Значения углов могут быть отрицательными. Произвольное значение должно преобразовываться агентами пользователей в диапазон от 0 до 360 градусов. Например, значения -10deg и 350deg задают один и тот же угол.

Например, правый угол равен '90deg', или '100grad', или '1.570796326794897rad'.

Время

Временные значения (в тексте обозначаемые как <время>) используются в звуковых таблицах стилей.

Значения времени задаются в соответствии со следующим форматом: <число>, непосредственно за которым следует идентификатор единицы измерения времени.

К идентификаторам единиц измерения времени относятся:

  • ms: миллисекунда
  • s: секунда

Значения времени не могут быть отрицательными.

Частота

Значения частоты (в тексте обозначаемые как <частота>) используются в звуковых таблицах стилей.

Значения частоты задаются в соответствии со следующим форматом: <число>, непосредственно за которым следует идентификатор единицы измерения частоты.

К идентификаторам единиц измерения частоты относятся:

  • Hz: герцы
  • kHz: килогерцы

Значения частот не могут быть отрицательными.

Например, частота 200Гц (или 200гц) - это низкий звук, а 6кГц (или 6кгц) - высокий.

Строки

Строки заключаются в двойные или одинарные кавычки. Двойные кавычки не могут быть вложенными друг в друга за исключением тех случаев, когда одни из них кодируются с использованием обратного слэша (например, '\"' или ''). Аналогичное имеет место и для одинарных кавычек ("\'" или "").

"это 'строка'"
"это \"строка\""
'это "строка"'
'это \'строка\''

Символ новой строки не может содержаться непосредственно в самой строке. Чтобы его включить, необходимо использовать комбинацию с обратным слэшем "\A" (шестнадцатеричное число A является кодом символа перевода строки в Unicode и "символа новой строки" в CSS). За примером можно обратиться к свойству 'content'.

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

A[TITLE="не слишком длин\
ный заголовок"] {/*...*/}
A[TITLE="не слишком длинный заголовок"] {/*...*/}