Содержание
В этом разделе описана грамматика (и модернизируемый набор правил синтаксического анализа ), используемые во всех версиях CSS, включая CSS2. Будущие версии CSS не будут противоречить синтаксису этого ядра, хотя вполне возможно, что они будут содержать дополнительные синтаксические конструкции.
Данные описания являются нормативными и идут в дополнении к грамматическим правилам, изложенным в Приложении Г .
Язык CSS любого уровня, включая первый, второй и последующие уровни, возможные в будущем, использует общее ядро синтаксических правил. Это позволяет агентам пользователей выполнять синтаксический анализ (хотя они могут и не понимать некоторые выражения) таблиц стилей, написанных с использованием того уровня CSS, который не существовал на момент создания агента пользователя. Дизайнеры могут использовать это свойство для создания таблиц стилей, которые будут работать с более старыми версиями агентов пользователей, а также реализовывать возможности самых новых уровней CSS.
На лексическом уровне таблицы стилей CSS состоят из последовательности меток. Список меток, используемых в CSS2, приведен ниже. В их определениях используются регулярные выражения в стиле Lex. Использование восьмеричных кодов осуществляется в соответствии со стандартом ISO 10646 ( [ISO10646] ). Как и в Lex, в случае множественных совпадений метку определяет самое длинное совпадение.
Метка | Определение |
---|---|
IDENT | {ident} |
ATKEYWORD | @ {ident} |
STRING | {string} |
HASH | # {name} |
NUMBER | {num} |
PERCENTAGE | {num} % |
DIMENSION | {num}{ident} |
URI | url\( {w}{string}{w} \) |
UNICODE-RANGE | U\+[0-9A-F?]{1,6}(-[0-9A-F]{1,6})? |
CDO | <!-- |
CDC | --> |
; | ; |
{ | \{ |
} | \} |
( | \( |
) | \) |
[ | \[ |
] | \] |
S | [ \t\r\n\f]+ |
COMMENT | \/\*[^*]*\*+([^/][^*]*\*+)*\/ |
FUNCTION | {ident} \( |
INCLUDES | ~= |
DASHMATCH | |= |
DELIM | символ, не подпадающий ни под одно из вышеприведенных правил |
Макросы, фигурирующие в предыдущей таблице и заключенные в фигурные скобки "{}", определяются следующим образом:
Макрос | Определение |
---|---|
ident | {nmstart}{nmchar}* |
name | {nmchar}+ |
nmstart | [a-zA-Z]| {nonascii} | {escape} |
nonascii | [^\0-\177] |
unicode | \\[0-9a-f]{1,6}[ \n\r\t\f]? |
escape | {unicode} |\\[ -~\200-\4177777] |
nmchar | [a-z0-9-]| {nonascii} | {escape} |
num | [0-9]+|[0-9]*\.[0-9]+ |
string | {string1} | {string2} |
string1 | \"([\t !#$%&(-~]|\\{nl}|\'| {nonascii} | {escape} )*\" |
string2 | \'([\t !#$%&(-~]|\\{nl}|\"| {nonascii} | {escape} )*\' |
nl | \n|\r\n|\r|\f |
w | [ \t\r\n\f]* |
Ниже приведено ядро синтаксических правил CSS. В последующих разделах будут изложены инструкции по их использованию. В Приложении Г описана более строгая грамматика, более свойственная языку CSS второго уровня.
stylesheet : [ CDO | CDC | S | statement ]*; statement : ruleset | at-rule; at-rule : ATKEYWORD S* any* [ block | ';' S* ]; block : '{' S* [ any | block | ATKEYWORD S* | ';' ]* '}' S*; ruleset : selector? '{' S* declaration? [ ';' S* declaration? ]* '}' S*; selector : any+; declaration : property ':' S* value; property : IDENT S*; value : [ any | block | ATKEYWORD S* ]+; any : [ IDENT | NUMBER | PERCENTAGE | DIMENSION | STRING | DELIM | URI | HASH | UNICODE-RANGE | INCLUDES | FUNCTION | DASHMATCH | '(' any* ')' | '[' any* ']' ] S*;
Из соображений удобочитаемости непосредственно в самом грамматическом описании метки comment не используются, хотя они может присутствовать произвольное число раз между другими метками.
Метка S используется для обозначения свободного места . В качестве последнего могут выступать символы "пробел" (код в unicode: 32), "отступ" (9), "перевод строки" (10), "возврат каретки" (13) и "подача бумаги" (12). Другие символы, обозначающие пробелы, например, "em-пробел" (8195) и "идеографический пробел" (12288) не могут быть частью свободного места.
Ключевые слова имеют форму идентификаторов. Они не должны заключаться в кавычки ("..." или '...'). Таким образом,
red
это ключевое слово, а
"red"не является таковым. (Это строка .) Можно привести другие примеры недопустимого написания:
width: "auto"; border: "none"; font-family: "serif"; background: "red";
Здесь действуют следующие правила:
Следует заметить, что кодировка unicode эквивалентна кодировке ISO-10646 (см. [UNICODE] и [ISO10646] ).
Если обратный слэш и следующий за ним символ новой строки находятся внутри строки , то они игнорируются (т.е. считается, что строка не будет содержать ни обратного слэша, ни перехода на новую строку).
Наличие обратного слэша отменяет действие специальных символов языка CSS. Специальное значение любого символа (за исключением шестнадцатеричного числа) можно "нейтрализовать" с помощью обратного слэша. Например, "\"" представляет собой строку, содержащую только одну пару кавычек. Препроцессоры таблиц стилей не должны удалять обратные слэши, т.к. это повлечет за собой изменение смысла таблицы стилей.
Использование обратного слэша позволяет разработчикам оперировать с символами, которые нельзя просто поместить в документ. В данном случае после обратного слэша должно находиться не более шести шестнадцатеричных цифр (0,...,9,A,...,F), выступающих в качестве кодов этих символов в системе ISO-10646 ( [ISO10646] ). Если за шестнадцатеричным числом следует цифра или буква, то следует четко обозначить конец данного числа. Это можно сделать с помощью:
На практике можно комбинировать эти два способа. Следует только помнить, что следующий после шестнадцатеричного числа пробел игнорируется тоже. Поэтому "реальный" пробел после "нейтрализуемой" последовательности должен дублироваться, либо нейтрализоваться вместе с ней.
Таблица стилей, написанная с использованием CSS любого уровня, представляет собой список выражений (см. выше описание грамматики). Все выражения делятся на два класса: правила at и наборы правил . С обоих сторон вокруг выражений может находиться пустое пространство .
Такие выражения, как "непосредственно перед" или "непосредственно после" в данной спецификации означают отсутствие промежуточных пробелов или комментариев.
Правила at начинаются с ключевого слова at , т.е. с символа '@', непосредственно за которым следует идентификатор (например, '@import', '@page').
Правило at включает все, что находится до первой находящейся после него точки с запятой ";" или до первого следующего за ним структурного блока включительно. Агент пользователя с поддержкой CSS, если он встретит нераспознаваемое правило at, должен игнорировать все это правило целиком и продолжить синтаксический анализ далее.
Агенты пользователей с поддержкой CSS2 должны игнорировать все правила '@import' , которые находятся внутри блока , либо не предшествует ни одному набору правил.
Предположим, что синтаксический анализатор CSS2 встретил следующую таблицу стилей:
@import "subs.css"; H1 { color: blue } @import "list.css";
Второе правило '@import' в соответствии со спецификацией CSS2 недопустимо. Синтаксический анализатор CSS2 полностью проигнорирует все правило at целиком, сокращая размер таблицы стиля до:
@import "subs.css"; H1 { color: blue }
В следующем примере второе правило '@import' недопустимо, т.к. оно находится в пределах блока '@media'.
@import "subs.css"; @media print { @import "print-main.css"; BODY { font-size: 10pt } } H1 {color: blue }
Блок начинается с левой фигурной скобки "{" и заканчивается соответствующей ей правой фигурной скобкой "}". В промежутке между ними могут находиться любые символы с тем лишь исключением, что круглые "( )", квадратные "[ ]" и фигурные "{ }" скобки всегда должны присутствовать парами и при этом могут быть вложенными. Одинарные и двойные кавычки также должны присутствовать только парами, тогда расположенный между ними текст будет рассматриваться как строка . Определение строки можно найти в разделе "Маркирование" .
Приведем пример структурного блока. Обратите внимание на то, что правая скобка, заключенная в двойные кавычки, не является закрывающей скобкой блока и что второй одинарной кавычке предшествует обратный слеш , вследствие чего она не образует пары с первой одинарной кавычкой:
{ causta: "}" + ({7} * '\'') }
И хотя данное правило не является допустимым правилом CSS2, оно, согласно определению, все же является структурным блоком.
Набор правил (также называемый правилом) состоит из селектора и следующего за ним блока объявлений.
Блок объявлений (обозначаемый далее как {}-блок) начинается с левой фигурной скобки "{" и заканчивается соответствующей ей правой фигурной скобкой "}". Между ними должен находиться, список объявлений (он может быть пустым), отделенных друг от друга точкой с запятой (";").
Селектор (см. раздел о селекторах ) включает все, что находится до первой следующей за ним левой фигурной скобки "{", не включая ее. Он всегда находится рядом с {}-блоком. Если агент пользователя не может выполнить синтаксический анализ селектора (т.е. селектор не является допустимым селектором CSS2), то он также должен проигнорировать и {}-блок.
Согласно спецификации CSS2 запятая (",") в селекторах имеет определенное значение. Пока еще не известно, примет ли запятая в будущих версиях CSS другие значения. Тем не менее, если в селекторе имеется ошибка, то, несмотря на корректность остальной его части, все объявление должно игнорироваться целиком.
В приведенном ниже примере символ "&" в теле селектора CSS2 недопустим, поэтому агент пользователя должен полностью игнорировать вторую строку и не устанавливать красный цвет для отображения элемента H3:
H1, H2 {color: green } H3, H4 & H5 {color: red } H6 {color: black }
Ниже приведен более сложный пример. Первые две пары фигурных скобок находятся внутри строки, и не обозначают конца селектора. Это пример корректного объявления CSS2.
P[example="public class foo\ {\ private int x;\ \ foo(int x) {\ this.x = x;\ }\ \ }"] { color: red }
Объявление может быть пустым или включать свойство и следующие за ним двоеточие (":") и значение этого свойства. Вокруг каждого из этих трех элементов может находиться произвольное количество пробелов .
В соответствии с принципами работы селекторов несколько объявлений для одного селектора могут быть объединены в группы, в которых они отделяются друг от друга точкой с запятой (";").
Таким образом, приведенные ниже правила:
H1 { font-weight: bold } H1 { font-size: 12pt } H1 { line-height: 14pt } H1 { font-family: Helvetica } H1 { font-variant: normal } H1 { font-style: normal }
эквиваленты следующим правилам:
H1 { font-weight: bold; font-size: 12pt; line-height: 14pt; font-family: Helvetica; font-variant: normal; font-style: normal }
Свойство является идентификатором . Поэтому в его значении могут присутствовать произвольные символы с тем лишь исключением, что круглые "( )", квадратные "[ ]" и фигурные "{ }" скобки, а также одинарные и двойные кавычки должны появляться парами, а точка с запятой, если она не принадлежит строке, должна кодироваться с помощью обратного слэша . Круглые, квадратные и фигурные скобки могут быть вложенными. Символы внутри кавычек интерпретируются как строка.
Синтаксис значений определяется для каждого свойства отдельно, но в любом случае значения формируются из идентификаторов, строк, чисел, длин, процентных соотношений, URI, цветов, углов, временных значений и частот.
Агент пользователя должен игнорировать объявление с некорректным именем свойства или с некорректным его значением. У каждого свойства в CSS2 имеются собственные синтаксические и семантические ограничения на принимаемые им значения.
Например, предположим, что синтаксический анализатор CSS2 анализирует следующую таблицу стилей:
H1 { color: red; font-style: 12pt } /* Некорректное значение 12pt */ P { color: blue; font-vendor: any; /* Некорректное свойство font-vendor */ font-variant: small-caps } EM EM { font-style: normal }
Второе объявление в первой строке имеет некорректное значение '12pt'. Второе объявление во второй строке содержит неопределенное свойство 'font-vendor'. Таким образом, синтаксический анализатор CSS2 проигнорирует эти объявления, заметно уменьшив при этом таблицу стиля до следующего вида:
H1 { color: red; } P { color: blue; font-variant: small-caps } EM EM { font-style: normal }
Комментарии начинаются с символов "/*" и заканчиваются символами "*/". Они могут находиться в любом месте между метками, и их содержимое не влияет на работу таблицы. Комментарии могут и не включаться в таблицу.
В CSS допускается использование ограничителей комментариев ("<!--" и "-->"), принятых в SGML. Но они не ограничивают комментарии CSS. Их использование уместно тогда, когда от пользовательского агента, написанного для HTML-приложений версии 3.2 и ниже, необходимо скрыть стилистические правила, описанные в элементе STYLE исходного HTML-документа. Подробную информацию можно получить в спецификации HTML 4.0 ( [HTML40] ).
В некоторых случаях агенты пользователей должны игнорировать часть некорректной таблицы стилей. В данной спецификации термин игнорировать означает следующее. Агент пользователя осуществляет синтаксический анализ некорректной части таблицы для того, чтобы определить ее начало и конец, а затем действует так, как если бы этой части не существовало в таблице.
Для обеспечения возможности добавления новых свойств и новых значений для уже существующих свойств агенты пользователей в перечисленных ниже ситуациях должны выполнять следующие правила:
H1 { color: red; rotation: 70minutes }
агент пользователя должен обрабатывать, как если бы она выглядела так:
H1 { color: red }
IMG { float: left } /* корректное объявление */ IMG { float: left here } /* "here" не является значением */ /* свойства 'float' */ IMG { background: "red" } /* ключевое слово заключено в кавычки */ IMG { border-width: 3 } /* не определена единица измерения */ /* для значения длины */Анализатор CSS2 должен применить первое правило и проигнорировать остальные:
IMG { float: left } IMG { } IMG { } IMG { }
Возможно, что агент пользователя, соответствующий спецификации CSS более высокого уровня, сможет обрабатывать большее количество правил.
@three-dee { @background-lighting { azimuth: 30deg; elevation: 190deg; } H1 { color: red } } H1 { color: blue }
Правило at '@three-dee' не принадлежит языку CSS2. Поэтому все правило до третьей правой фигурной скобки включительно игнорируется . Агент пользователя с поддержкой CSS2 проигнорирует его, сократив таблицу стилей до следующего вида:
H1 { color: blue }
Некоторые типы значений могут быть выражены в целых (обозначаются как <целое> ) или вещественных числах (обозначаются как <число> ). Вещественные и целые числа представляются только в десятичной системе счисления. Значения типа <целое> состоят из одной или нескольких цифр от 0 до 9. Значения типа <число> могут совпадать с типом <целое> или состоять из группы цифр и следующих за нею точки и другой группы цифр. Вещественным и целым числам могут предшествовать символы "-" или "+" для обозначения знака.
Следует помнить, что многие свойства, имеющие вещественные или целочисленные значения, как правило, ограничиваются диапазоном неотрицательных чисел.
Единицы измерения длины используются при определении горизонтальных и вертикальных размеров.
Значения поперечных размеров (в данной спецификации обозначенные как <длина> ) задаются в соответствии со следующим форматом: знак ('+' или '-', по умолчанию используется знак '+'), непосредственно за которым следует <число> (с десятичной точкой или без нее), непосредственно за которым следует единица измерения длины (например, пикселы, градусы и т.д.). После нулевого значения длины единицу измерения можно опускать.
Некоторые свойства допускают использование отрицательных значений длины, но это может усложнить модель форматирования. Кроме того, на отрицательные значения длин могут накладываться ограничения в зависимости от конкретной реализации. Если отрицательные значения длин не поддерживаются, то его необходимо преобразовать в ближайшее поддерживаемое значение.
Существует два типа единиц измерения длины: относительные и абсолютные. Относительные единицы измерения указывают значение длины относительно других единиц измерения. Таблицы стилей, которые используют такой тип единиц, намного легче перенастраиваются с одного типа устройств на другой (например, с экрана компьютера на лазерный принтер).
К относительным единицам измерения относятся:
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 }
Абсолютные единицы измерения полезны только в том случае, когда известны физические параметры устройства вывода. К ним относятся:
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 (универсальный адрес ресурса - 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', обнуляются этим правилом в корневом элементе.
Список ключевых слов, используемых для названия цветов: 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, лежащие за пределами цветовой гаммы устройства, будут усечены.
Примечание. Несмотря на то, что цвета могут привносить дополнительную информацию в документ и делать его более удобным для чтения, следует помнить, что определенные цветовые комбинации могут вызвать проблемы у пользователей, страдающих глазными заболеваниями. Если Вы используете изображение в фоновом режиме или настраиваете цвет фона, то следует корректно настроить цвета переднего плана.
Значения углов (в тексте обозначаемые как <угол> ) используются в звуковых таблицах стилей .
Значения углов задаются в соответствии со следующим форматом: произвольный символ знака ('+' или '-', знак '+' используется по умолчанию), непосредственно за которым следует <число> , непосредственно за которым следует идентификатор единицы измерения углов.
К идентификаторам единиц измерения углов относятся:
Значения углов могут быть отрицательными. Произвольное значение должно преобразовываться агентами пользователей в диапазон от 0 до 360 градусов. Например, значения -10deg и 350deg задают один и тот же угол.
Например, правый угол равен '90deg', или '100grad', или '1.570796326794897rad'.
Временные значения (в тексте обозначаемые как <время> ) используются в звуковых таблицах стилей .
Значения времени задаются в соответствии со следующим форматом: <число> , непосредственно за которым следует идентификатор единицы измерения времени.
К идентификаторам единиц измерения времени относятся:
Значения времени не могут быть отрицательными.
Значения частоты (в тексте обозначаемые как <частота> ) используются в звуковых таблицах стилей .
Значения частоты задаются в соответствии со следующим форматом: <число> , непосредственно за которым следует идентификатор единицы измерения частоты.
К идентификаторам единиц измерения частоты относятся:
Значения частот не могут быть отрицательными.
Например, частота 200Гц (или 200гц) - это низкий звук, а 6кГц (или 6кгц) - высокий.
Строки заключаются в двойные или одинарные кавычки. Двойные кавычки не могут быть вложенными друг в друга за исключением тех случаев, когда одни из них кодируются с использованием обратного слэша (например, '\"' или '\22'). Аналогичное имеет место и для одинарных кавычек ("\'" или "\27").
"это 'строка'" "это \"строка\"" 'это "строка"' 'это \'строка\''
Символ новой строки не может содержаться непосредственно в самой строке. Чтобы его включить, необходимо использовать комбинацию с обратным слэшем "\A" (шестнадцатеричное число A является кодом символа перевода строки в Unicode и "символа новой строки" в CSS). За примером можно обратиться к свойству 'content' .
Из эстетических и прочих соображений строки могут разбиваться принудительно. В этом случае символ новой строки должен кодироваться с помощью обратного слэша "\". Например, следующие два селектора совершенно идентичны:
A[TITLE="не слишком длин\ ный заголовок"] {/*...*/} A[TITLE="не слишком длинный заголовок"] {/*...*/}
Таблица стилей CSS представляет собой последовательность символов универсального набора (см. [ISO10646] ). Для передачи и хранения эти символы должны кодироваться в соответствии с той системой кодировки, которая поддерживает набор символов US-ASCII (например, ISO 8859-x, SHIFT JIS и т.д.). Информацию о наборах символов и кодировании символов можно найти в спецификации HTML 4.0 ( [HTML40] , глава 5), а также в спецификации XML 1.0 ( [XML10] , разделы 2.2 и 4.3.3) и Приложении Е.
Если таблица стилей импортируется в другой документ, например, в элемент STYLE или атрибут "style" HTML-документа, то она использует систему кодировки, принятую в документе.
Если таблица стилей находится в отдельном файле, агенты пользователей при определении кодировки символов документа должны учитывать следующие приоритеты (по степени убывания приоритета):
Во внешней таблице стилей может быть не больше одного правила @charset. Его не должно быть во внедренной таблице стилей, и оно должно Располагаться в самом начале документа, чтобы перед ним не было ни одного символа. После слова "@charset" нужно указать название системы кодировки символов. Название должно представлять собой название набора символов в соответствии с реестром IANA (см. [IANA] . Полный список наборов символов можно найти в [CHARSETS] ). Например:
@charset "ISO-8859-1";
Данная спецификация не указывает, какие кодировки символов должен поддерживать агент пользователя.
Следует помнить, что использование конструкции @charset теоретически может вызвать проблемы, связанные с тем, что заранее неизвестно, какая кодировка используется используется в самой этой конструкции. Однако на практике Интернет чаще всего используются кодировки на базе ASCII, UTF-16, UCS-4 или (редко) на EBCDIC. Это означает, что в общем случае начальные байты документа позволяют агентам пользователей достоверно определять тип кодировки, что предоставляет достаточный объем информации для декодирования правила @charset, который в свою очередь точно указывает тип кодировки.
В таблице стилей может понадобиться обращение к символам, которые не могут быть представлены в текущей кодировке. Эти символы должны представляться в виде ссылок на символы кодировки ISO 10646 с использованием обратного слэша . Это делается с той же целью, что и кодирование цифровых ссылок в документах HTML или XML (см. [HTML40] , главы 5 и 25).
Механизм кодирования символов с использованием обратного слэша рекомендуется использовать только для небольшого количества символов. Если необходимость в его использовании возникает часто, следует использовать наиболее приемлемую систему кодировки (например, если документ содержит много греческих символов, то рекомендуется использовать "ISO-8859-7" или "UTF-8").
Промежуточные процессоры, использующие другую кодировку символов, могут переводить последовательности символов с обратным слэшем в последовательности байтов этой кодировки. С другой стороны, промежуточные процессоры не должны вносить в такие последовательности символов изменения, которые могли бы изменить специальные значения символов ASCII-кода.
Конформные агенты пользователей должны осуществлять корректное преобразование всех символов любой распознаваемой системы кодировки в Unicode (или должны вести себя так, как если бы они сделали это).
Например, документ, переданный как документ в кодировке ISO-8859-1 (Latin-1), не может содержать греческие символы: "κουρος" (греческий: "kouros"). Эта последовательность должна быть представлена в виде: "3BA\3BF\3C5\3C1\3BF\3C2".
Примечание. В HTML 4.0 числовые ссылки на символы интерпретируются в значениях атрибута "style", но не в содержимом элемента STYLE. Вследствие подобной асимметрии для атрибута "style" и элемента STYLE разработчикам рекомендуется использовать механизм в CSS обратные слэши, а не числовую кодировку. Например,
<SPAN style="voice-family: D\FC rst">...</SPAN>
рекомендуется использовать вместо
<SPAN style="voice-family: Dürst">...</SPAN>