CSS – учебник, спецификация (стр. 8 )

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

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

Поддерживаются следующие относительные единицы:

H1 { margin: 0.5em } /* ems, высота шрифта элемента */

H1 { margin: 1ex } /* x-height, ~ по высоте буквы 'x' */

P { font-size: 12px } /* pixels, в пикселах относительно холста */

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

Пиксели, указанные в последнем примере, определяются относительно разрешения холста, чаще всего - экранного разрешения. Если разрешающая способность устройства вывода отличается от характерной для экрана, UA должен масштабировать значение в пикселях. Замещающий пиксель соответствует углу зрения, под которым виден один пиксель на устройстве с разрешающей способностью 90 точек на дюйм на расстоянии, оптимальном для зрения. При величине последнего 28 дюймов угол зрения приблизительно равен 0,0227 градуса.

Дочерние элементы наследуют вычисленное значение, а не относительное:

BODY {

font-size: 12pt;

text-indent: 3em; /* i. e. 36pt */

}

H1 { font-size: 15pt }

В приведенном примере значение абзацного отступа ('text-indent') элемента H1 будет равно 36 пунктов, а не 45.

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

H1 { margin: 0.5in } /* inches, 1in = 2.54cm */

H2 { line-height: 3cm } /* centimeters */

H3 { word-spacing: 4mm } /* millimeters */

H4 { font-size: 12pt } /* points, 1pt = 1/72 in */

H5 { font-size: 1pc } /* picas, 1pc = 12pt */

В случаях, когда заданная длина не может быть отработана, UA должны аппроксимировать ее. Дальнейший пересчет и наследование для всех свойств CSS1 должен уже основываться на результатах аппроксимации.

6.2 Процентное выражение

Формат процентного выражения состоит из необязательного знака ("+" или "-", по умолчанию "+"), обязательного числа (с десятичной частью, отделяемой десятичной точкой, или без), и обязательного знака "%", указываемых в последовательности перечисления в настоящем абзаце.

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

P { line-height: 120% } /* 120% размера шрифта элемента */

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

6.3 Обозначение цвета

Цвет обозначатся либо зарезервированным словом, либо численно по спецификации RGB.

Допустимы следующие зарезервированные слова для указания цвета: aqua (светло-голубой), black (черный), blue (синий), fuchsia (светло-фиолетовый), gray (серый), green (зеленый), lime (светло-зеленый), maroon (коричневый), navy (темно-синий), olive (оливковый), purple (фиолетовый), red (красный), silver (светло-серый), teal (сине-зеленый), white (белый), и yellow (желтый). Эти 16 цветов взяты из палитры VGA для Windows, и их значения RGB не определены в данной спецификации.

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) } /* integer range */

EM { color: rgb(100%, 0%, 0%) } /* float range 0.0% - 100.0% */

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

Формат значения RGB в функциональной записи следующий: 'rgb(' далее разделенный точками список из трех численных значений (либо три целочисленных значения в интервале 0-255б либо три процентных значения в диапазоне от 0.0% до 100.0%), далее ')'.

Значения за пределами числовых интервалов должны отсекаться. Ниже приводятся три эквивалентных примера:

EM { color: rgb(255,0,0) } /* значения в диапазоне */

EM { color: rgb(300,0,0) } /* замена на 255 */

EM { color: rgb(110%, 0%, 0%) } /* замена на 100% */

Цвета RGB определяются для цветового поля sRGB [9]. UA может варьировать результаты обработки в пределах точности, с которой они могут отображать цвета, однако применение sRGB обеспечивает однозначное и объективно измеримое определение цвета в соответствии с международными стандартами[10].

UA может накладывать ограничения на указанные условия для отображаемых цветов, производя коррекцию их гаммы. В определенных условиях просмотра sRGB определяет гамму регулирует заданные CSS цвета таким образом, чтобы применительно к устройству вывода получить "естественную" гамму цветов, гамму 2.2. В приложении D это рассматривается более подробно. Обратите внимание, что речь идет только о цветах, определенных через CSS, а, к примеру, для графических изображений будет использоваться их собственная цветовая информация.

6.4 URL

Универсальный локатор ресурса (URL) определяется в функциональной записи:

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

Формат значения URL представляет собой 'url(', далее необязательный пробел, далее необязательная одинарная (') или двойная кавычка ("), далее сам URL (как определено в [11]), далее необязательная одинарная (') или двойная кавычка ("), далее необязательный пробел, далее ')'. Знаки кавычек, если они не являются частью URL, должны быть парными.

Круглые скобки, запятые, пробелы, одинарные и двойные кавычки, присутствующие в URL, должны отделяться обратным слешем: '\(', '\)', '\,'.

Неполные URL отрабатываются относительно исходника таблицы стилей, а не относительно самого документа:

BODY { background: url(yellow) }

7 Совместимость с CSS1

UA, поддерживающий СSS, обрабатывает документы в соответствии со стандартом CSS1 в следующей последовательности:

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

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

UA не отрабатывает все функции CSS1: он может лишь согласовать результаты отработки с CSS1, реализуя функциональное ядро (сore functionality) последнего. В функциональное ядро входит вся спецификация CSS за исключением частей, изъятых явным образом. В тексте, помеченном как "ядро CSS1" следует разъяснение функций, находящихся за пределами ядра. Установки свойств, исключенные из функционального ядра, называются "расширенные свойства CSS1".

Данный раздел определяет только согласование CSS1. В будущем появятся другие уровни CSS, которые могут потребовать UA для реализации различных установок свойств в порядке согласования.

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

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

Обратите внимание, что CSS1 не определяет всех аспектов форматирования. Например, UA вправе произвольно выбирать алгоритм определения межсимвольного расстояния.

Данная спецификация рекомендует (но не предписывает), чтобы UA:

допускал определение пользовательской таблицы стилей читателем; допускал возможность включения и выключения индивидуальной таблицы стилей.

Оба правила согласования описывают лишь функциональный, но не пользовательский интерфейс.

7.1 Последовательно-совместимый синтаксический анализ

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

установка неизвестного свойства игнорируется. К примеру, таблицу стилей

· H1 { color: red; rotation: 70deg }

UA будет обрабатывать, как если бы она имела вид

H1 { color: red; }

недопустимые значения, либо значения с недопустимыми частями, обрабатываются, как если бы определение отсутствовало:

· IMG { float: left } /* верно для CSS1 */

· IMG { float: left top } /* "top" недопустимое значение для 'float' */

· IMG { background: "red" } /* в CSS1 ключевые слова не закавычиваются */

· IMG { border-width: 3 } /* должна быть указана размерность числа, */

· /* выражающего значение длины */

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

IMG { float: left }

IMG { }

IMG { }

IMG { }

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

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

· @three-dee {

· @background-lighting {

· azimuth: 30deg;

· elevation: 190deg;

· }

· H1 { color: red }

· }

· H1 {color: blue}

где '@three-dee' - недопустимое выражение для CSS1. Следовательно, вся строка с "собачкой" (вплоть до третьих правых фигурных скобок включительно) игнорируется.

UA с поддержкой CSS1 пропускает изъятое выражение, фактически сокращая таблицу стилей до:

H1 {color: blue}

Более подробно:

Таблица стилей CSS, для любой версии CSS, состоит из перечня директив (statements). Есть два вида директив: предустановки и установки. Возле директив допускаются промежутки (пробелы, табуляция, новые строки).

Таблица стилей CSS часто вставляется в документы HTML, и для сокрытия таблицы стилей от более ранних UA, желательно вставлять ее внутри комментариев HTML. Знаки комментариев HTML "" могут быть расположены перед, после и охватывая утверждения. Они могут отделяться интервалами.

Предустановки начинаются с зарезервированных слов с приставкой в виде знака "собачки" '@' (к примеру: @import', '@page') и идентификатора. Идентификатор может состоять из букв, цифр, черточек и спецсимволов (определение ниже).

Предустановка состоит из всего, что находится до следующей точки с запятой (;) включительно. UA для CSS, встречая предустановку, начинающуюся со слова с приставкой, иной чем слово '@import', игнорируют всю предустановку и продолжают отработку после ее окончания. Также игнорируется любая предустановка, начинающаяся с '@import', если она не располагается вверху таблицы стилей, скажем, после какого-либо правила (даже игнорируемого). Рассмотрим пример.

Пусть анализатор CSS1 обрабатывает следующую таблицу стилей:

@import "subs. css";

H1 { color: blue }

@import "list. css";

Вторая предустановка '@import' для CSS недопустима. Анализатор CSS1 пропускает всю предустановку, преобразуя таблицу стилей к следующему виду:

@import "subs. css";

H1 {color: blue}

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

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

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

К примеру, обработчик CSS1 встречает следующую таблицу стилей:

H1 { color: blue }

P[align], UL { color: red; font-size: large }

P EM { font-weight: bold }

Вторая строка примера содержит селектор-строку, недопустимую для для CSS1 должен пропустить эту установку и привести таблицу стилей к следующему виду:

H1 { color: blue }

P EM { font-weight: bold }

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

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

Чтобы гарантировать возможность в будущем вводить новые свойства и новые значения для существующих свойств, UA должно опускать определение с некорректным названием свойства или некорректным значением свойства. Каждое из свойств CSS1 имеет собственные синтаксические и семантические ограничения значений, которое оно может принимать.

Например, допустим, что обработчик CSS1 встретил следующую таблицу стилей:

H1 { color: red; font-style: 12pt }

P { color: blue; font-vendor: any; font-variant: small-caps }

EM EM { font-style: normal }

Второе определение в первой линии имеет недопустимое значение '12pt'. Второе определение во второй линии содержит неопределенное свойство 'font-vendor'. Обработчик CSS1 пропустит эти определения, сокращая таблицу стилей до:

H1 { color: red; }

P { color: blue; font-variant: small-caps }

EM EM { font-style: normal }

Комментарии (см. секцию 1.7) могут быть вставлены везде, где допускается простановка пробелов. CSS1 определяет допустимые места вставки пробелов (напр. внутри значений), и там же могут быть вставлены комментарии.

Всегда соблюдаются следующие правила:

все таблицы стилей CSS независимы от регистра, исключая части, не находящиеся под контролем CSS. Например, в CSS1 названия семейства шрифта и URL могут зависеть от внешних обстоятельств. Также зависимые от внешних обстоятельств атрибуты для CLASS и ID находятся под контролем HTML [2]. для CSS1 селекторы (имена, классы и ID элемента) могут включать только символы A-Z, 0-9 и символы Unicode 161-255, плюс черточку (-); они не могут начинаться с черточки или цифры; они могут также включать непечатаемые и символы Unicode в виде цифрового кода (см. ниже). обратный слеш, после которого идут не более четырех шестнадцатеричных цифр (0..9A..F), представляет собой символ Unicode с указанным числом. любой символ за исключением шестнадцатеричной цифры, может быть пропущен для игнорирования его специального значения, путем установки перед ним обратного слеша. Например: "\"" - строка, состоящая из одной двойной кавычки. два предшествующих пункта определяют переходы по обратному слешу. Такие переходы всегда считаются частью идентификатора, за исключением случаев, когда они находятся внутри строки (т. е. "\7B" - это не пунктуация, даже если присутствует "{", а "\32" допускается в начале имени класса, даже если "2" - нет).

Примечание: атрибут HTML CLASS допускает больше символов в названии класса, чем установлено для вышеназванных селекторов. В CSS1 эти символы будут пропущены или транслитерированы в числа Unicode: "B&W?" может быть написано в виде "B\&W\?", или "B\26W\3F", "??????" (Greek: "kouros") может быть написано как "\3BA\3BF\3C5\3C1\3BF\3C2". Ожидается, что в последующих версиях CSS непосредственно можно будет вводить больше символов.

В приложении В дана грамматика CSS1.

8 Литература

[1] W3C resource page on web style sheets (http://www. w3.org/pub/WWW/Style)

[2] Sometime in 1997 we expect there to be a single HTML specification that has support for Style Sheets and Internationalization. Among the works in progess in this area is "HTML3 and Style Sheets" (http://www. w3.org/pub/WWW/TR/WD-style) and the "Cougar DTD" (http://www. w3.org/pub/WWW/MarkUp/Cougar/HTML. dtd).

[3] T Berners-Lee, D Connolly: "Hypertext Markup Language - 2.0", RFC 1866, MIT/W3C, November 1995. The specification is also available in hypertext form (http://www. w3.org/pub/WWW/MarkUp/html-spec/html-spec_toc. htm)