Евгений Резниченко - Спецификация CSS2

• Название: Спецификация CSS2
• Автор: Евгений Резниченко
• Жанр: Прочая околокомпьтерная литература

Курс построен по спецификации, которая определяет язык каскадных таблиц стилей CSS2.

Данная спецификация поддерживает позиционирование содержимого, загружаемые шрифты, отображение таблиц, возможности интернационализации, автоматические счётчики и нумерацию и некоторые свойства, относящиеся к пользовательскому интерфейсу.

---

3

Escape-последовательности с обратным слэшем позволяют авторам обращаться к символам, которые не могут быть напрямую помещены в документ. В таких случаях используется обратный слэш, после которого идут не более шести 16-ричных цифр (0..9A..F), что соответствует символам ISO 10646 ( [ISO10646] ) с этим числом. Если после 16-ричного числа идёт цифра или буква, то конец числа должен быть очищен. Есть два способа сделать это:

1пробел (или иной символ пробела): "\26 B" ("&B")

2предоставление точного 16-ричного числа из шести цифр: "\000026B" ("&B")

Фактически эти два метода можно комбинировать. Только один символ пробела игнорируется после 16-ричной escape-последовательности. Заметьте, что это означает, что "реальный" пробел после escape-последовательности обязан или сам быть выражен с использованием escape-последовательности, или удвоен.

[x]. Escape-последовательности с обратным слэшем всегда рассматриваются как часть идентификатора или строки (т.е. "\7B" это не пунктуация, а "{" - она, и "\32" допускается в начале имени класса, а "2" - нет).

Таблица стилей любой версии 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 }

Блок начинается с левой фигурной скобки ({) и заканчивается парной правой скобкой (}). Между ними могут находиться любые символы, кроме скобок (( )), квадратных скобок ([ ]) и фигурных скобок ({ }), которые обязаны всегда использоваться в паре и могут вкладываться. Одиночные (') и двойные (") кавычки также обязаны использоваться парами, а символы между ними разбираются как строка\string. См. выше определение строки в Лексическом разборе.

Это пример блока. Обратите внимание, что правая скобка между двойными кавычками не образует пары с открывающей скобкой блока, а вторая одиночная кавычка - это escape-символ, не образующий пары с первой одиночной кавычкой:

{ causta: "}" + ({7} * '\'') }

Заметьте, что это неверное правило CSS2, образующее, тем не менее, блок, как указано выше.

Набор правил (называемый также "правило") состоит из cелектора с последующим блоком объявлений.

Блок объявлений (называемый также в последующем тексте {}-блоком) начинается с левой фигурной скобки ({) и заканчивается парной правой скобкой (}). Между ними может находиться список из 0 или более разделённых точкой с запятой (;) объявлений.

Cелектор (см. также раздел Селекторы) состоит из чего-либо, предшествующего первой скобке (но не включая) ({). Cелектор всегда идёт вместе с {}-блоком. Если ПА не может разобрать cелектор (т.е. если он неверен в CSS2), он обязан также игнорировать и {}-блок.

В CSS2 запятая (,) имеет специальное значение в cелекторах. Однако, поскольку не известно, примет ли запятая иные значения в последующих версиях CSS, весь оператор должен быть проигнорирован, если где-либо в селекторе имеется ошибка, даже если остальная часть cелектора выглядит как соответствующая CSS2.

Например, поскольку "&" это неверная лексема в селекторе CSS2, ПА CSS2 обязан игнорировать всю вторую строку и не устанавливать красный цвет в H3:

H1, H2 {color: green } H3, H4 & H5 {color: red } H6 {color: black } Это более сложный пример. Первые две пары фигурных скобок находятся внутри строки и не обозначают конец cелектора. Это - верный оператор CSS2. P[example="public class foo\ {\ private int x;\ \ foo(int x) {\ this.x = x;\ }\ \ }"] { color: red }

Объявление может быть пустым или состоять из свойства с последующими двоеточием (:) и значением. Вокруг каждого из них могут быть пробелы.

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

Таким образом, следующие правила: 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 }

Cвойства это идентификаторы. Между ними могут находиться любые символы, кроме скобок (( )), квадратных скобок ([ ]) и фигурных скобок ({ }), которые обязаны всегда использоваться в паре, а точка с запятой вне строки обязана вводиться с использованием escape-последовательности. Угловые, квадратные и круглые скобки могут вкладываться. Внутри кавычек символы разбираются как строка.

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

ПА обязан игнорировать объявление с неверным названием cвойства или неверным значением. Каждое свойство 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 (в элементе STYLE), чтобы спрятать эти правила от до-HTML 3.2 ПАгентов. См. спецификацию HTML 4.0 ( [HTML40] ).

В некоторых случаях ПА обязан игнорировать часть неверной таблицы стилей. В этой спецификации игнорирует означает, что ПА разбирает неверную часть (чтобы определить её начало и конец), но действует так, как будто её нет.

Для гарантий того, что новые cвойства и новые значения для существующих свойств смогут быть добавлены в будущем, от ПА требуется соблюдение следующих правил при обработке следующих сценариев:

[x]. Неизвестные cвойства. ПА обязан игнорировать объявление с неизвестным свойством. Например, если в таблице стилей указано:

H1 { color: red; rotation: 70minutes }

ПА будет рассматривать это, как если бы в таблице было:

H1 { color: red }

[x]. Неверные значения. ПА обязан игнорировать объявление с неверным значением. Например:

" IMG { float: left } /* корректно в CSS2 */ " IMG { float: left here } /* "here" это неверное значение для 'float' */ " IMG { background: "red" } /* ключевые слова CSS2 не могут вводиться в кавычках */ " IMG { border-width: 3 } /* для размеров должны быть указаны единицы измерения */

Разборщик CSS2 примет первое правило и проигнорирует остальные, как если бы таблица была такой:

IMG { float: left } IMG { } IMG { } IMG { }

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