Список ошибок и опечаток, найденных в этой спецификации (в английской версии), находится в http://www.w3.org/Style/css2-updates/REC-CSS2-19980512-errata.html

Об ошибках, замеченных Вами в этом документе, сообщайте, пожалуйста, по адресам: css2-editors@w3.org и a_pyramidin@yahoo.com (переводчик русской версии).

[x]. В CSS имена свойств, дескрипторов и псевдоклассов ограничиваются одиночными кавычками.

[x]. Значения в CSS ограничиваются одиночными кавычками.

[x]. Элементы языка документа записываются буквами в верхнем регистре.

[x]. Имена атрибутов языка документа записываются в нижнем регистре и ограничиваются двойными кавычками.

Каждое определение свойства CSS начинается общей ключевой информацией:

'property-name'

Значение: действительные значения & синтаксис

Начальное: начальное значение

Применяется: к соответствующим элементам

Наследуется: если свойство наследуется

Процентное: интерпретация процентных значений

Носитель: к каким группам носителей применяется свойство

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

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

[x]. Элементам дерева документа и определённым их взаимоотношениям (см. раздел селекторы).

[x]. Атрибутам элементов дерева документа и значениям этих атрибутов (см. раздел селекторы атрибутов).

[x]. Некоторым частям содержимого элемента (см. псевдоэлементы :first-line и :first-letter.

[x]. Элементам дерева документа, находящимся в определённом состоянии (см. раздел псевдоклассы).

[x]. Некоторым аспектам канвы при выводе документа.

[x]. Некоторой системной информации (см. раздел интерфейс пользователя).

Все уровни CSS - уровень 1, уровень 2 и любые будущие уровни - используют одно ядро синтаксиса. Это позволяет пользовательским агентам (ПА) разбирать (хотя и не полностью понимать) таблицы стилей, написанные в уровнях CSS, ещё не существовавших в момент создания ПА. Дизайнеры могут использовать это свойство для создания таблиц стилей, работающих со старыми ПА, применяя также возможности позднейших уровней CSS.

На лексическом уровне таблицы стилей CSS состоят из последовательности лексем (грамматических единиц). Список лексем CSS2 приведён ниже. Определения используют общепринятые выражения в стиле Lex. Восьмеричные коды относятся к ISO 10646 ([ISO10646]). Как и в Lex, в случае нескольких одновременных совпадений, самое длинное совпадение определяет лексему.

Вышеприведённые макросы в фигурных скобках ({}) определены так:

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

Ключевые слова имеют форму идентификаторов. Ключевые слова обязаны не размещаться между кавычками ("..." или '...'). Таким образом,

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

[x]. Все таблицы стилей CSS нечувствительны к регистру, за исключением тех частей, которые не контролируются CSS. Например, чувствительность к регистру значений атрибутов "id" и "class", имён шрифтов и URI в HTML находится вне пределов действия этой спецификации. Особо отметьте, что имена элементов нечувствительны к регистру в HTML, но чувствительны в XML.

[x].

В CSS2 идентификаторы (включая имена элементов, классы и ID в селекторах) могут содержать только символы [A-Za-z0-9] и символы ISO 10646 от 161 и выше и дефис (-); они не могут начинаться с дефиса или цифры. Они могут также содержать escape-последовательности и любые символы и цифровые коды ISO 10646 (см. далее). Например, идентификатор "B&W?" можно записать как "B\&W\?" или "B\26 W\3F".

Заметьте, что Unicode это покодовый эквивалент ISO 10646 (см. [UNICODE] и [ISO10646]).

[x].

В CSS2 символ обратного слэша (\) обозначает три типа символов - escape-последовательностей.

1В строке обратный слэш, после которого идёт новая строка, игнорируется (т.е. считается, что строка не содержит ни обратных слэшей, ни переводов строки).

2Отменяет значение специальных символов CSS. Любой символ (исключая 16-ричные числа) может войти в escape-последовательность с помощью обратного слэша для отмены своего специального значения. Например, "\"" это строка. состоящая из одной двойной кавычки. Препроцессоры таблиц стилей обязаны не удалять эти слэши из таблиц стилей до тех пор, пока они не изменят значения таблицы стилей.

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 обрабатывает такую таблицу стилей:

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

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

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

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

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

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

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

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

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

Комментарии начинаются символом "/*" и заканчиваются символом "*/". Они могут появляться в любом месте между лексемами, и их содержимое не влияет на представление документа. Комментарии не могут вкладываться.

CSS допускает также SGML-ограничители комментариев ("<!--" и "-->") в определённых местах, но это не комментарии CSS. Они разрешены для ввода правил стиля в документе-источнике HTML (в элементе STYLE), чтобы спрятать эти правила от до-HTML 3.2 ПАгентов. См. спецификацию HTML 4.0 ( [HTML40] ).

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

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

Размеры имеют отношение к горизонтальным и вертикальным измерениям.

Формат значения размера (обозначаемого в этой спецификации <length>) - это необязательный символ знака ('+' или '-', с '+' по умолчанию), после которого сразу идёт <number> (с или без десятичной точки), после которого сразу идёт идентификатор единиц измерения (например, px, deg и т.п.). После размера '0' единицы измерения не обязательны.

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

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

Относительные единицы измерения являются:

[x]. em: 'font-size' соответствующего шрифта;

[x]. ex: 'x-height' соответствующего шрифта;

[x]. px: пикселы, относительно устройства просмотра.

H1 { margin: 0.5em } /* em */ H1 { margin: 1ex } /* ex */ P { font-size: 12px } /* px */

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

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

Правило: H1 { line-height: 1.2em } означает, что высота строки элементов H1 будет на 20% больше, чем размер шрифта элементов H1. С другой стороны: H1 { font-size: 1.2em } означает, что размер шрифта элементов H1 будет на 20% больше, чем размер шрифта, наследуемый из элементов H1.

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

Пикселы относительны к разрешению устройства просмотра, т.е. чаще всего - дисплея компьютера. Если плотность пикселов выводного устройства сильно отличается от плотности типичного компьютерного дисплея, ПА должен перемасштабировать пикселные значения. Рекомендуется, чтобы пиксел в качестве точки отсчёта был визуальным углом одного пиксела на устройстве с плотностью пикселов 90dpi на расстоянии вытянутой руки от читателя. При нормальной длине руки 28 дюймов визуальный угол будет примерно 0.0227 градусов.

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

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

[D]

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

[D]

Дочерние элементы не наследуют относительные значения, специфицированные для их родителя; они (обычно) наследуют вычисленные значения.

В следующих правилах вычисленное значение 'text-indent' элементов H1 будет 36pt, а не 45pt, если H1 является дочерним относительно элемента BODY: BODY { font-size: 12pt; text-indent: 3em; /* т.е. 36pt */ } H1 { font-size: 15pt }

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

Абсолютными значениями являются:

[x]. in: inches/дюймы -- 1 дюйм равен 2.54 сантиметра.

[x]. cm: сантиметры

[x]. mm: миллиметры

[x]. pt: points/пункты - пункт, используемый в CSS2, равен 1/72 дюйма.

[x]. pc: picas/пики -- 1 пика равна 12 пунктам.

H1 { margin: 0.5in } /* дюймы */ H2 { line-height: 3cm } /* сантиметры */ H3 { word-spacing: 4mm } /* миллиметры */ H4 { font-size: 12pt } /* пункты */ H4 { font-size: 1pc } /* пики */

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

Формат процентного значения (обозначаемого в этой спецификации <percentage>) - это необязательный знак ('+' или '-', с '+' по умолчанию), сразу за которым следует <number>, за которым сразу следует '%'.

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

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

Значения URI в этой спецификации обозначаются <uri>. Функциональное обозначение URI в значениях свойств - "url()", как здесь:

Счётчики обозначаются идентификаторами (см. свойства 'counter-increment' и 'counter-reset'). Чтобы обратиться к значению счётчика, используется обозначение 'counter(<identifier>)' или 'counter(<identifier>, <list-style-type>)'. Стиль по умолчанию - 'decimal'.

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

В CSS2 к значениям счётчиков можно обратиться только из свойства 'content'. Заметьте, что 'none', это возможный <list-style-type>: 'counter(x, none)' рассматривается как пустая строка.

<color> это или предопределённое слово, или числовая спецификация RGB.

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

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

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

Единицами измерения углов являются:

[x]. deg: градусы

[x]. grad: грады

[x]. rad: радианы

Угловые значения могут быть негативными. Они должны быть нормализованы ПАгентом до диапазона 0-360deg. Например, -10deg и 350deg эквивалентны.

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

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

Их формат: <number>, сразу за которым идёт идентификатор единиц измерения времени.

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

[x]. ms: миллисекунды

[x]. s: секунды

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

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

Их формат: <number>, сразу за которым идёт идентификатор единиц измерения частоты.

Идентификаторами единиц измерения частоты являются:

[x]. Hz: герцы

[x]. kHz: килогерцы

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

Например, 200Hz (или 200hz) - это басовый звук, а 6kHz (или 6khz) - средний регистр.

Строки могут записываться в двойных или одинарных кавычках. Двойные кавычки не могут появляться внутри двойных кавычек, если только они не вводятся с помощью escape-последовательности ( '\"' или '\22'). Аналогично для одинарной кавычки ("\'" или "\27").

Если несколько селекторов используют общие объявления, то они могут быть сгруппированы в список с разделением запятыми.

Здесь три правила с идентичными объявлениями собраны в одно. Таким образом,

Селекторы атрибутов могут совпадать четырьмя способами:

[att]

Если элемент устанавливает атрибут "att" с каким-либо значением атрибута.

[att=val]

Если значение атрибута "att" элемента - точно "val".

[att~=val]

Если значение атрибута "att" элемента - список разделённых пробелами "слов", одно из которых - "val". Если используется данный селектор, то слова в значении обязаны не содержать пробелов (поскольку они сами разделяются пробелами).

[att|=val]

Если значения атрибута "att" элемента - список разделённых дефисами "слов", начинающийся с "val". Совпадение всегда стартует от начала значения атрибута. Это принимается во внимание прежде всего для того, чтобы позволить совпасть субкоду языка (например, атрибут "lang" в HTML), как описано в RFC 1766 ([RFC1766]).

Значением атрибута обязана быть строка или идентификатор. Чувствительность к регистру имён атрибутов и значений в селекторах зависит от языка документа.

Следующий селектор атрибута совпадает со всеми элементами H1, которые специфицировали атрибут "title" с любым значением:

Совпадение происходит в значениях атрибутов в дереве документа. Для языков документа, отличных от HTML, значения по умолчанию для атрибутов могут определяться в ОТД или где-либо ещё. Таблицы стилей должны создаваться так, чтобы они работали даже тогда, когда значения по умолчанию не включены в дерево документа.

Рассмотрим элемент EXAMPLE с атрибутом "notation", имеющим значение по умолчанию "decimal".

Фрагмент ОТД может быть таким:

В таблицах стилей, используемых в HTML, авторы могут употреблять точку (.) как альтернативу "~=" при совпадении с атрибутом "class". Таким образом, в HTML "DIV.value" и "DIV[class~=value]" имеют одно значение. Значение атрибута обязано следовать сразу за ".".

Мы можем назначить стилевую информацию всем элементам class~="pastoral" следующим образом:

Псевдокласс :first-child совпадает с элементом, являющимся первым дочерним элементом какого-либо другого элемента.

Здесь селектор совпадает с любым элементом P, являющимся первым дочерним элементом элемента DIV. Правило подавляет отступ для первого параграфа DIV:

ПА обычно отображают непосещённые гиперссылки иначе, чем посещённые. CSS псевдоклассы ':link' и ':visited' для этих случаев:

[x]. Псевдокласс :link применяется к ссылкам, которые ещё не посещены.

[x]. Псевдокласс :visited применяется после того, как пользователь посетил ссылку.

Примечание. По истечении некоторого времени ПА могут вернуть посещённую гиперссылку к первоначальному состоянию (непосещённому) ':link'.

Эти два состояния взаимоисключающи.

Язык документа определяет, какие элементы являются якорями ссылки на ресурс. Например, в HTML 4.0 псевдоклассы гиперссылки применяются к элементам A с атрибутом "href". Таким образом, следующие два объявления CSS2 имеют один эффект:

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

[x]. Псевдокласс :hover применяется, если указал на элемент (каким-либо указательным устройством), но не активировал его. Например, визуальный ПА может применить этот псевдокласс, когда курсор (указатель мыши) проходит над боксом, сгенерированным элементом. ПА, не поддерживающие интерактивные носители, не должны поддерживать этот псевдокласс. Некоторые соответствующие ПА, поддерживающие интерактивные носители, могут оказаться неспособными поддерживать этот псевдокласс (например, устройство "карандаш").

[x]. Псевдокласс :active применяется, если элемент активирован пользователем. Например, между нажатием и отпусканием пользователем клавиши мыши.

[x]. Псевдокласс :focus применяется, если элемент имеет фокус (принял событие от клавиатуры или другие формы ввода текста).

Эти псевдоклассы не являются взаимоисключающими. Элемент может совпадать с несколькими из них одновременно.

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

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

Если язык документа специфицирует, как определяется человеческий язык, то становится возможным записывать селекторы CSS, которые совпадают с элементом, на базе его языка. Например, в HTML [HTML40] язык определяется комбинацией атрибута "lang", элемента META и, возможно, информацией из протокола (такой как в "шапках" HTTP). XML использует атрибут, называемый XML:LANG, и могут быть также и другие методы определения языка, зависящие от языковой специфики.

Псевдокласс :lang(C)' совпадает, если документ написан на языке C. Здесь C - это код языка, как специфицировано в HTML 4.0 [HTML40] и RFC 1766 [RFC1766] . Он совпадает тем же способом, что и для оператора '|='.

Следующие правила устанавливают знаки кавычек для документа HTML на французском или немецком языке:

Псевдоэлемент :first-line применяет специальный стиль к первой форматированной строке параграфа. К примеру:

Псевдоэлемент :first-letter можно использовать для "начальных заглавных" и "зависающих заглавных", которые являются распространёнными типографскими эффектами. Этот тип начальных букв похож на инлайн-элемент, если его свойство 'float' - 'none', иначе он похож на всплывающий элемент.

Вот свойства, применимые к псевдоэлементу :first-letter: свойства шрифта, свойства цвета, свойства фона, 'text-decoration', 'vertical-align' (только если 'float' установлен в 'none'), 'text-transform', 'line-height', свойства полей, свойства заполнения, свойства рамок, 'float', 'text-shadow' и 'clear'.

Следующий CSS2 сделает начальную заглавную зависающую букву, захватывающую две строки:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Drop cap initial letter</TITLE> <STYLE type="text/css"> P { font-size: 12pt; line-height: 12pt } P:first-letter { font-size: 200%; font-style: italic; font-weight: bold; float: left } SPAN { text-transform: uppercase } </STYLE> </HEAD> <BODY> <P><SPAN>The first</SPAN> few words of an article in The Economist.</P> </BODY> </HTML>

Этот пример может быть сформатирован так:

[D]

Последовательность фиктивных тэгов такова:

<P> <SPAN> <P:first-letter> T </P:first-letter>he first </SPAN> few words of an article in the Economist. </P>

Обратите внимание, что тэги псевдоэлемента :first-letter примыкают к содержимому (т.е. к начальному символу), поскольку начальный тэг псевдоэлемента :first-line вставлен справа после начального тэга элемента, к которому он присоединён.

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

Пунктуация (т.е. символы, определённые в Unicode [UNICODE] в классах пунктуации "open" (Ps), "close" (Pe) и "other" (Po)), которая предшествует первой букве, должна включаться, как в этом примере:

[D]

Псевдоэлемент :first-letter совпадает только с частью элементов уровня блока.

В некоторых языках могут быть специфические правила рассмотрения определённых сочетаний букв. В датском языке, например, если комбинация "ij" появляется в начале слова, обе буквы должны рассматриваться псевдоэлементом :first-letter.

Следующий пример иллюстрирует, как может действовать перекрывание псевдоэлементов. Первые буквы каждого элемента P будут зелёными и размером '24pt'. Остаток первой форматированной строки будет 'blue', а остаток параграфа - 'red'.

P { color: red; font-size: 12pt } P:first-letter { color: green; font-size: 200% } P:first-line { color: blue } <P>Какой-нибудь текст не менее двух строк.</P>

Если предположить, что разрыв строки появится перед словом "не", последовательность фиктивных тэгов для этого фрагмента может быть такой:

<P> <P:first-line> <P:first-letter> К </P:first-letter>акой-нибудь текст </P:first-line> не менее двух строк. </P>

Заметьте, что элемент :first-letter находится внутри элемента :first-line. Свойства, установленные в :first-line, наследуются в :first-letter, но переопределяются, если то же самое свойство установлено в :first-letter.

Псевдоэлементы ':before' и ':after' можно использовать для вставки генерируемого содержимого до или после содержимого элемента. Они разъясняются в разделе генерируемый текст.

ПА обязаны сначала назначить свойству специфицированное значение на основе следующих механизмов (по приоритету):

1Если каскад даёт значение, использовать его.

2Иначе, если свойство унаследовано, использовать значение элемента-предка, обычно - вычисленное значение.

3Иначе, использовать начальное значение свойства. Начальное значение каждого свойства указано в определении свойства.

Не имея предков, корневой элемент дерева документа не может использовать значения, унаследованные от элемента-предка; в этом случае используется, если необходимо, начальное значение.

Специфицированные значения могут быть абсолютными (т.е. не специфицированными относительно других значений: 'red' или '2mm') или относительными (т.е. специфицированными относительно других значений: 'auto', '2em', '12%'). Для абсолютных значений не требуется никаких вычислений, чтобы найти вычисленное значение.

Относительные значения, с другой стороны, обязаны быть трансформированы в вычисленные значения: процентные рассчитываются относительно данного значения-ссылки (каждое свойство определяет соответствующее значение), значения с указанием единиц измерения (em, ex, px) должны быть сделаны абсолютными путём применения подходящих по размеру шрифтов или в пикселах, значения 'auto' должны высчитываться по формулам, данным для каждого свойства, ключевые слова ('smaller', 'bolder', 'inherit') должны быть замещены в соответствии со своими определениями.

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

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

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

1Найти все объявления, применяемые в запросе к элементу и свойству, для целевого типа носителя. Объявления применяются, если ассоциированный селектор подбирает элемент в запросе.

2Сначала объявления сортируются по весу и источнику: для нормальных объявлений - авторские таблицы стилей переопределяют пользовательские, которые, в свою очередь, переопределяют таблицу стилей по умолчанию. Для объявлений "!important" - пользовательские таблицы стилей переопределяют авторские таблицы, которые, в свою очередь, переопределяют таблицу стилей по умолчанию. Объявления "!important" переопределяют нормальные объявления. Импортированная таблица стилей имеет тот же источник, что и таблица стилей, импортировавшая её.

3Вторая сортировка производится по специфике селектора: более специфические селекторы переопределяют более общие. Псевдоэлементы и псевдоклассы обсчитываются как нормальные элементы и классы соответственно.

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

Независимо от установок "!important" индивидуальных объявлений, эта стратегия даёт авторским таблицам стилей больший вес, чем таблицам читателя. Это тем более важно, поскольку ПА предоставляют пользователю возможность отключить влияние определённых таблиц стилей, например, в выпадающих меню.

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

Однако, для баланса, объявление "!important" (ключевое слово "!" и "important" следуют за объявлением) имеет преимущество перед нормальной декларацией. И авторские, и пользовательские таблицы стилей могут содержать объявление "!important", и пользовательские правила "!important" переопределяют авторские "!important". Это свойство CSS улучшает доступность документов путём предоставления пользователям со специфическими требованиями (крупные шрифты, комбинации цветов и т.п.) контроля над представлением.

Примечание. Это семантическое изменение в сравнении с CSS1. В CSS1 авторские правила "!important" имели приоритет перед пользовательскими правилами "!important".

Объявление сокращённого свойства (например, 'background') как "!important" эквивалентно объявлению всех его подсвойств как "!important".

Первое правило пользовательской таблицы стилей в данном примере содержит объявление "!important", которое переопределяет соответствующее объявление в авторской таблице стилей. Второе объявление также будет иметь приоритет как помеченное "!important".

Однако третье правило пользовательской таблицы стилей - не "!important" - и поэтому будет отброшено в пользу второго правила авторской таблицы стилей (которое устанавливает стиль сокращённого свойства). Таким образом, третье авторское правило будет отброшено в пользу второго авторского правила, поскольку второе правило - "!important". Это показывает, что объявления "!important" имеют действие также и внутри авторских таблиц стилей.

Специфика селектора высчитывается так:

[x]. вычисляется количество атрибутов ID в селекторе (= a)

[x]. вычисляется количество других атрибутов и псевдоклассов в селекторе (= b)

[x]. вычисляется количество имён элементов в селекторе (= c)

[x]. игнорируются псевдоэлементы.

Конкатенация трёх чисел a-b-c (в числовой системе с большой базой) дают специфику.

ПА могут предпочесть подсказки (hints) из других источников, а не из таблиц стилей, например, элемент FONT или атрибут "align" в HTML. Если это так, не-CSS подсказки обязаны быть переведены в соответствующие правила CSS со спецификой=0. Принимается, что правила находятся в начале авторской таблицы стилей и могут быть переопределены последующими правилами таблиц стилей.

Примечание. В фазе переноса эта политика облегчит сосуществование стилистических атрибутов с таблицами стилей.

Примечание. В CSS1 не-CSS подсказки получали специфику=1, а не 0. Это изменение сделано из-за введения универсального селектора, имеющего специфику 0.

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

CSS2 определяет следующие группы носителей:

[x]. непрерывные или страничные. "Оба" означает, что свойство применяется к обеим группам носителей.

[x]. визуальные, звуковые или осязательные.

[x]. решётка (для устройств с решётками символов) или растровые. "Оба" означает, что свойство применяется к обеим группам носителей.

[x]. интерактивные (для устройств, взаимодействующих с пользователем или статичные (для не взаимодействующих). "Оба" означает, что свойство применяется к носителям обеих групп.

[x]. все (включает все типы носителей).

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

Свойства ширины рамки специфицируют ширину области рамки. Свойства, определённые в этом разделе, относятся к типу значений <border-width>, который может устанавливаться в:

thin

Тонкая рамка.

medium

Средняя рамка.

thick

Толстая рамка.

<length>

Толщина рамки имеет точное значение. Это значение не может быть негативным.

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

'thin' <='medium' <= 'thick'.

К тому же эти значения ширины обязаны быть константными в пределах документа.

'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width'

Значение: <border-width> | inherit

Начальное: medium

Применяется: ко всем элементам

Наследуется: нет

Процентное: N/A

Носитель: визуальный

Эти свойства устанавливают верхнюю, правую, нижнюю и левую линии рамки для бокса.

'border-width'

Значение: <border-width>{1,4} | inherit

Начальное: см. индивидуальные свойства

Применяется: ко всем элементам

Наследуется: нет

Процентное: N/A

Носитель: визуальный

Это сокращённое свойство для установки 'border-top-width', 'border-right-width', 'border-bottom-width' и 'border-left-width' в одном месте в таблице стилей.

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

Комментарии в данном примере поясняют результаты установки ширины верхней, правой, нижней и левой линий рамки:

Эти свойства специфицируют цвет рамки бокса.

'border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color'

Значение: <color> | inherit

Начальное: значение свойства 'color'

Применяется: ко всем элементам

Наследуется: нет

Процентное: N/A

Носитель: визуальный

'border-color'

Значение: <color>{1,4} | transparent | inherit

Начальное: см. индивидуальные свойства

Применяется: ко всем элементам

Наследуется: нет

Процентное: N/A

Носитель: визуальный

Свойство 'border-color' устанавливает цвет рамки с четырёх сторон. Значения имеют следующий смысл:

<color>

Специфицирует значение цвета.

transparent

Рамка прозрачна (хотя и может иметь ширину).

Свойство 'border-color' может иметь от одного до четырёх значений, и эти значения устанавливаются для четырёх сторон так же, как и в 'border-width'.

Если цвет рамки элемента не специфицирован в свойстве рамки, ПА обязаны использовать значение свойства 'color' элемента как вычисленное значение цвета рамки.

В этом примере рамка будет сплошной и чёрной:

Свойства стиля рамки специфицируют стиль линии рамки бокса (solid, double, dashed и т.д.). Свойства, определённые в этом разделе, относятся к типу значений <border-style>, который может устанавливаться в:

none

Нет рамки. Форсирует вычисленное значение 'border-width' в '0'.

hidden

То же, что и 'none', за исключением разрешения конфликтов рамок для элементов таблицы.

dotted

Рамка из точек.

dashed

Рамка из пунктирных линий.

solid

Рамка из сплошной линии.

double

Двойная сплошная линия. Сумма двух линий и пространства между ними равна значению 'border-width'.

groove

Рамка выглядит как вырезанная в канве.

ridge

Противоположно 'groove': рамка выглядит как выступающая над канвой.

inset

Весь бокс выглядит вдавленным в канву.

outset

Противоположно 'inset': выпуклый бокс.

Все рамки прорисовываются на поверхности фона бокса. Цвет рамок со значениями 'groove', 'ridge', 'inset' и 'outset' зависит от свойства 'color' элемента.

Соответствующие пользовательские агенты (ПА) HTML могут интерпретировать 'dotted', 'dashed', 'double', 'groove', 'ridge', 'inset' и 'outset' как 'solid'.

'border-top-style', 'border-right-style', 'border-bottom-style', 'border-left-style'

Значение: <border-style> | inherit

Начальное: none

Применяется: ко всем элементам

Наследуется: нет

Процентное: N/A

Носитель: визуальный

'border-style'

Значение: <border-style>{1,4} | inherit

Начальное: см. индивидуальные свойства

Применяется: ко всем элементам

Наследуется: нет

Процентное: N/A

Носитель: визуальный

Свойство 'border-style' устанавливает стиль для четырёх сторон рамки. Может иметь от одного до четырёх значений, и значения устанавливаются для разных сторон, как для 'border-width' выше.

'border-top', 'border-right', 'border-bottom', 'border-left'

Значение: [ <'border-top-width'> || <'border-style'> || <color> ] | inherit

Начальное: см. индивидуальные свойства

Применяется: ко всем элементам

Наследуется: нет

Процентное: N/A

Носитель: визуальный

Это сокращённое свойство для установки ширины, стиля и цвета верхней, правой, нижней и левой сторон рамки.

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

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

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

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

Ширина начального содержащего блока может быть специфицирована свойством 'width' корневого элемента. Если это свойство имеет значение 'auto', ПА предоставляет начальное значение ширины (например, ПА использует текущую ширину порта просмотра).

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

Начальный содержащий блок не может быть позиционирован или всплывать (т.е. ПА игнорируют свойства 'position' и 'float корневого элемента).

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

Элементы уровня блока это элементы документа-источника, визуально отформатированные как блоки (например, параграфы). Различные значения свойства 'display' создают элемент уровня блока: 'block', 'list-item', 'compact', 'run-in' (не всегда; см. компактные и втягивающиеся боксы) и 'table'.

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

Некоторые элементы уровня блока генерируют дополнительные боксы за пределами основного бокса: элементы 'list-item' и элементы с маркёрами. Эти дополнительные боксы размещаются относительно основного бокса.

В этом документе:

<DIV> Some text <P>More text</P> </DIV>

(и приняв, что и DIV, и P оба имеют 'display: block'), DIV имеет содержимое и инлайн-уровня, и уровня блока. Чтобы легче было определить форматирование, мы примем, что вокруг "Some text" имеется анонимный бокс блока.

На диаграмме изображены три бокса, один из которых анонимный, в примере - верхний.

[D]

Другими словами: если бокс блока (такой как сгенерированный в DIV выше) имеет внутри себя другой бокс блока (как P), тогда мы заставляем его иметь боксы блока только внутри себя, перенеся любые инлайн-боксы в анонимный бокс блока.

Эта модель будет применена в следующем примере, если данные правила:

/* Примечание: ПАгенты HTML могут не рассматривать эти правила */ BODY { display: inline } P { display: block }

будут использованы в данном документе HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HEAD> <TITLE>Анонимный текст, прерываемый блоком. </TITLE> </HEAD> <BODY> Анонимный текст до P. <P>Содержимое элемента P. </P> Анонимный текст после P. </BODY>

Элемент BODY содержит отрывок (C1) анонимного текста, после которого идут элемент уровня блока и второй отрывок анонимного текста (C2). В результате получим анонимный бокс блока> для BODY, содержащий анонимный бокс блока вокруг C1, бокс блока P и второй анонимный бокс блока вокруг C2.

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

Инлайн-элементы это те элементы документа-источника, которые не образуют новых блоков содержимого; содержимое определяется в строке (на месте) (например, выделенные участки текста внутри параграфа, инлайн-изображения и т.п.). Различные значения свойства 'display' делают элемент инлайн: 'inline', 'inline-table', 'compact' и 'run-in' (не всегда; см. компактные и втягивающиеся боксы). Элементы инлайн-уровня (встроенные) генерируют инлайн-боксы.

Инлайн-боксы могут принимать участие в различных контекстах форматирования:

[x]. Внутри бокса блока инлайн-бокс участвует в инлайн-контексте форматирования.

[x]. Инлайн-бокс compact расположен в поле бокса блока.

[x]. Боксы-маркёры имеют позицию также вне бокса блока.

Бокс compact ведёт себя так:

[x]. Если бокс блока (не поплавок и не позиционированный абсолютно) следует после бокса compact, то compact-бокс форматируется как однострочный инлайн-бокс. Ширина результирующего бокса сравнивается с одним из полей бокса блока. Выбор левого или правого поля определяется в 'direction', специфицируемом для элемента, производящего содержащий блок для compact-бокса и следующего бокса. Если ширина инлайн-бокса меньше, чем/равна ширине поля, то инлайн-бокс позиционируется в поле, как описано далее.

[x]. В ином случае compact-бокс становится боксом блока.

Compact-бокс позиционируется в поле следующим образом: он находится вне (слева или справа от) первого cтрочного бокса блока, но влияет на расчёт высоты cтрочного бокса. Свойство 'vertical-align' compact-бокса определяет вертикальную позицию compact-бокса относительно cтрочного бокса. Позиция compact-бокса по горизонтали - всегда в поле бокса блока.

Элемент, который не может быть отформатирован в пределах одной строчки, не может размещаться в поле последующего блока. Например, элемент 'compact' в HTML, который содержит элемент BR, всегда будет форматироваться как бокс блока (принимая для BR стиль по умолчанию, когда вставляется новая строка). Для размещения многострочного текста в поле часто больше подойдёт свойство 'float.

Следующий пример иллюстрирует compact-бокс:

Бокс run-in ведёт себя так:

[x]. Если бокс блока (не поплавок и не позиционированный абсолютно) следует за боксом run-in, то бокс run-in становится первым инлайн-боксом в боксе блока.

[x]. Иначе бокс run-in становится боксом блока.

Бокс 'run-in' используется для run-in-заголовков, как в этом примере:

'display'

Значение: inline | block | list-item | run-in | compact | marker | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit

Начальное: inline

Применяется: все элементы

Наследуется: нет

Процентное: N/A

Носитель: все

Значения этого свойства имеют следующий смысл:

block

Элемент генерирует основной бокс блока.

inline

Элемент генерирует один или более инлайн-боксов.

list-item

Элемент (например, LI в HTML) генерирует основной бокс блока и инлайн-бокс элемента списка. О списках и примерах форматирования списков см. раздел списки.

marker

Объявляет генерируемое содержимое до или после бокса-маркёра. Это значение должно использоваться только вместе с псевдоэлементами :before и :after, присоединёнными к элементам уровня блока. В других случаях это значение интерпретируется как 'inline'. См. также раздел Маркёры.

none

Элемент не генерирует боксы в структуре форматирования (т.е. элемент не влияет на вид документа). Элементы-потомки не генерируют никаких боксов; это поведение не может быть переопределено установкой у потомков свойства 'display'.

Обратите внимание, что отображение 'none' не создаёт невидимый бокс; боксы вообще не создаются. CSS содержит механизмы, делающие возможным генерацию элементом бокса в структуре форматирования, который влияет на структуру форматирования, но невидим. См. детали в разделе Видимость.

run-in и compact

Эти значения создают боксы блока и инлайн, в зависимости от контекста. Свойства, применяемые к боксам run-in и compact, базируются на окончательном статусе боксов (уровень инлайн или блока). Например, свойство 'white-space' применяется только тогда, когда бокс получает уровень блока.

table, inline-table, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell и table-caption

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

Заметьте, что, хотя начальное значение 'display' - 'inline', правила в таблицах по умолчанию в ПА могут переопределить это значение. См. пример таблицы стилей для HTML 4.0 в приложении.

Несколько примеров свойства 'display':

Свойства 'position' и 'float' определяют, какой из алгоритмов позиционирования CSS2 используется для расчёта позиции бокса.

'position'

Значение: static | relative | absolute | fixed | inherit

Начальное: static

Применяется: ко всем элементам, но не к генерируемому содержимому

Наследуется: нет

Процентное: N/A

Носитель: визуальный

Значения имеют следующий смысл:

static

Бокс является нормальным боксом, расположенным в соответствии с нормальным расположением. Свойства 'left' и 'top' не применяются.

relative

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

absolute

Позиция бокса (и возможные размеры) определяется свойствами 'left', 'right', 'top' и 'bottom'. Эти свойства устанавливают смещение относительно бокса содержащего блока. Абсолютно позиционированные боксы изымаются из нормального обтекания. Это значит, что они не влияют на вывод последующих родственных элементов. Также, хотя абсолютно позиционированные боксы имеют поля, они не соединяются с другими полями.

fixed

Позиция бокса вычисляется в соответствии с моделью 'absolute', но, в дополнение к этому, бокс фиксируется в соответствии с некоторой ссылкой. В случае с непрерывными носителями, бокс фиксируется относительно порта просмотра (и не перемещается при прокрутке). В случае со страничными носителям, бокс фиксируется относительно страницы, даже если страница просматривается через порт просмотра (в случае просмотра перед печатью, например). Авторам может понадобиться специфицировать 'fixed' способом, не зависящим от носителя. Например, автор может захотеть, чтобы бокс оставался в верхней части порта просмотра экрана, но не вверху каждой печатаемой страницы. Две такие спецификации можно разделить, используя правило @media, как здесь:

Элемент называется позиционированным, если его свойство 'position' имеет значение, отличное от 'static'. Позиционированные элементы генерируют позиционированные боксы, располагающиеся в соответствии с четырьмя свойствами:

'top'

Значение: <length> | <percentage> | auto | inherit

Начальное: auto

Применяется: к позиционируемым элементам

Наследуется: нет

Процентное: относительно высоты содержащего блока

Носитель: визуальный

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

'right'

Значение: <length> | <percentage> | auto | inherit

Начальное: auto

Применяется: к позиционируемым элементам

Наследуется: нет

Процентное: относительно ширины содержащего блока

Носитель: визуальный

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

'bottom'

Значение: <length> | <percentage> | auto | inherit

Начальное: auto

Применяется: к позиционируемым элементам

Наследуется: нет

Процентное: относительно высоты содержащего блока

Носитель: визуальный

Это свойство специфицирует, насколько смещён вверх нижний край содержимого бокса относительно низа содержащего блока.

'left'

Значение: <length> | <percentage> | auto | inherit

Начальное: auto

Применяется: к позиционируемым элементам

Наследуется: нет

Процентное: относительно ширины содержащего блока

Носитель: визуальный

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

Значения для этих четырёх свойств имеют следующий смысл:

<length>

Смещением является расстояние от соответствующего края.

<percentage>

Смещением является процент ширины содержащего блока (для 'left' или 'right') или высоты содержащего блока (для 'top' и 'bottom'). Для 'top' и 'bottom', если высота содержащего блока не специфицирована явно (т.е. зависит от высоты содержимого), процентное значение интерпретируется так же, как 'auto'.

auto

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

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

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

В контексте форматирования блока левый внешний край бокса касается левого края содержащего блока (для форматирования справа-налево - касается правый край). Это верно даже в случае с поплавками (хотя область содержимого может усекаться из-за поплавков).

Информацию о разрывах страниц в страничных носителях см. в разделе допустимые разрывы страниц.

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

Ширина cтрочного бокса определяется содержащим блоком. Высота cтрочного бокса определяется правилами из раздела вычисление высоты строки. Строчный бокс всегда имеет высоту, достаточную для содержащихся в нём боксов. В то же время, он может быть выше, чем самый высокий из содержащихся в нём боксов (если, например, боксы выровнены так, что базовые линии выстроены). Если высота бокса В меньше, чем высота cтрочного бокса, содержащего его, то вертикальное выравнивание В внутри cтрочного бокса определяется свойством 'vertical-align'.

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

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

Если суммарная ширина инлайн-боксов в строке меньше, чем ширина cтрочного бокса, содержащего их, то их распределение по горизонтали внутри cтрочного бокса определяется свойством 'text-align'. Если это свойство имеет значение 'justify', ПА может уплотнить инлайн-боксы.

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

Инлайн-боксы могут также быть разделены на несколько боксов внутри одного cтрочного бокса из-за двунаправленной обработки текста.

Вот пример конструкции инлайн-боксов. Следующий параграф (созданный элементом Р уровня блока в HTML) содержит анонимный текст, распределённый между элементами EM и STRONG:

<P>Several <EM>emphasized words</EM> appear <STRONG>in this</STRONG> sentence, dear.</P>

Элемент P генерирует бокс блока, содержащий пять инлайн-боксов, три из которых - анонимные:

[x]. Anonymous: "Several"

[x]. EM: "emphasized words"

[x]. Anonymous: "appear"

[x]. STRONG: "in this"

[x]. Anonymous: "sentence, dear."

Чтобы сформатировать параграф, ПА вставляет пять боксов в cтрочный бокс. В этом примере бокс, генерируемый для элемента P, устанавливает содержащий блок для строчных боксов. Если содержащий блок достаточно широк, все инлайн-боксы войдут в один cтрочный бокс:

Several emphasized words appear in this sentence, dear.

если нет, инлайн-боксы будут разделены и распределены по нескольким строчным боксам. Предыдущий параграф может быть разделён так:

Several emphasized words appear in this sentence, dear.

или так:

Several emphasized words appear in this sentence, dear.

В предыдущем примере бокс EM был разделён на два бокса EM (назовём их "split1" и "split2"). Поля, рамки, заполнение или текстовый орнамент не имеют видимого эффекта после split1 или до split2.

Рассмотри следующий пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Example of inline flow on several lines</TITLE> <STYLE type="text/css"> EM { padding: 2px; margin: 1em; border-width: medium; border-style: dashed; line-height: 2.4em; } </STYLE> </HEAD> <BODY> <P>Several <EM>emphasized words</EM> appear here.</P> </BODY> </HTML>

В зависимости от ширины P, боксы могут распределиться так:

[D]

[x]. Поле вставлено до "emphasized" и после "words".

[x]. Заполнение вставлено до, сверху и снизу от "emphasized" и после, сверху и снизу от "words". Пунктирная рамка отображается с трёх сторон в каждом случае.

После того, как бокс расположен в соответствии с нормальным расположением, он может быть сдвинут относительно этой позиции. Это называется относительным позиционированием. Смещение бокса (B1) таким способом не окажет воздействия на бокс (B2), следующий за ним: B2 получит такую позицию, как будто B1 не смещён и B2 не перемещается после применения смещения B1. Это предполагает, что относительное позиционирование может вызывать взаимное перекрытие боксов.

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

Относительно позиционированный бокс генерируется, когда свойство 'position' элемента имеет значение 'relative'. Смещение специфицируется свойствами 'top', 'bottom', 'left' и 'right'.

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

Примеры относительного позиционирования есть в разделе Сравнение нормального позиционирования, поплавков и абсолютного позиционирования.

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

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

[D]

Этого можно добиться с помощью такого документа HTML и таблицы стилей:

'z-index'

Значение: auto | <integer> | inherit

Начальное: auto

Применяется: к позиционированным элементам

Наследуется: нет

Процентное: N/A

Носитель: визуальный

Для позиционированных боксов свойство 'z-index' специфицирует:

1Уровень стэка бокса в текущем контексте стэка.

2Устанавливает ли бокс локальный контекст стэка.

Значения имеют следующий смысл:

<integer>

Это целое число - уровень стэка сгенерированного бокса в текущем контексте стэка. Бокс также устанавливает локальный контекст стэка со своим уровнем в стэке '0'.

auto

Уровень стэка сгенерированного бокса в текущем контексте стэка тот же, что и у бокса-родителя. Бокс не устанавливает новый локальный контекст стэка.

В следующем примере уровни стэка боксов (именованных своими атрибутами "id"): "text2"=0, "image"=1, "text3"=2 и "text1"=3. Уровень стэка для "text2" наследуется от корневого бокса. Остальные - специфицируются свойством 'z-index'.

Свойство 'width' не применяется. Специфицированное значение 'auto' для 'left', 'right', 'margin-left' или 'margin-right' становится вычисленным значением '0'.

Специфицированное значение 'auto' для 'left', 'right', 'margin-left' или 'margin-right' становится вычисленным значением '0'. Специфицированное значение 'auto' для 'width' даёт внутреннюю ширину элемента как вычисленное значение.

Если 'left' или 'right' заданы как 'auto', их вычисленное значение - '0'. Следующее условие обязано соблюдаться между свойствами:

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = ширина содержащего блока

(Если стиль рамки - 'none', используйте '0' как ширину рамки.) Если все вышеуказанные имеют специфицированные значения, отличные от 'auto', то говорят, что значения "переограниченны", и одно из вычисленных значений должно будет получить значение, отличное от своего специфицированного. Если свойство 'direction' имеет значение 'ltr', специфицированное значение 'margin-right' игнорируется и новое значение вычисляется так, чтобы сделать равенство верным. Если значение 'direction' - 'rtl', то же самое выполняется для 'margin-left'.

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

Если 'width' установлено в 'auto', любые другие значения 'auto' становятся '0', и 'width' является результатом уравнения.

Если и 'margin-left', и 'margin-right' - 'auto', их вычисленные значения равны.

Если 'left' или 'right' - 'auto', их вычисленное значение - '0'. Если 'width' специфицировано как 'auto', его значением является внутренняя ширина элемента. Если одно из полей - 'auto', его вычисленное значение задаётся вышеприведённым уравнением. Кроме того, если оба поля - 'auto', их вычисленные значения равны.

Если 'left', 'right', 'width', 'margin-left' или 'margin-right' специфицированы как 'auto', их вычисленное значение - '0'.

Если 'left', 'right', 'margin-left' или 'margin-right' специфицированы как 'auto', их вычисленное значение - '0'. Если 'width' - 'auto', его значением является внутренняя ширина элемента.

Условие, определяющее вычисленные значения для этих элементов:

'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = ширина содержащего блока

(Если стиль рамки - 'none', используется '0' как значение ширины рамки.) Решение данного условия достигается серией замен в следующем порядке:

1Если 'left' имеет значение 'auto' при 'direction' - 'ltr', 'auto' заменяется расстоянием от левого края содержащего блока до края левого поля гипотетического бокса, который мог бы быть первым боксом элемента, если его свойство 'position' было бы 'static'. (Но вместо того, чтобы действительно рассчитать этот бокс, ПА свободны предполагать о его возможной позиции.) Значение является отрицательным, если гипотетический бокс находится слева от содержащего блока.

2Если 'right' имеет значение 'auto' при 'direction' - 'rtl', 'auto' заменяется расстоянием от правого края содержащего блока до края правого поля того же гипотетического бокса, что и выше. Значение является положительным, если гипотетический бокс находится слева от края содержащего блока.

3Если 'width' - 'auto', любые оставшиеся 'auto' для 'left' или 'right' заменяются на '0'.

4Если 'left', 'right' или 'width' - (ещё) 'auto', 'auto' в 'margin-left' или 'margin-right' заменяются на '0'.

5Если в данной точке 'margin-left' и 'margin-right' всё ещё 'auto', уравнение решается с дополнительным условием: что эти два поля обязаны получить одинаковые значения.

6Если в данной точке осталось только одно 'auto', уравнение решается с этим значением.

7Если в данной точке значения переограниченны, игнорируется значение 'left' (если 'direction' - 'rtl') или 'right' (если 'direction' - 'ltr') и уравнение решается с этим значением.

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

1Если 'width' - 'auto', оно замещается внутренней шириной элемента.

2Если 'left' имеет значение 'auto' при 'direction' - 'ltr', 'auto' замещается расстоянием от левого края содержащего блока до края левого поля гипотетического бокса, который мог бы быть первым боксом элемента, если его свойство 'position' было бы 'static'. (Но вместо того, чтобы действительно рассчитать этот бокс, ПА свободны предполагать о его возможной позиции.) Значение является отрицательным, если гипотетический бокс находится слева от содержащего блока.

3Если 'right' имеет значение 'auto' при 'direction' - 'rtl', 'auto' заменяется расстоянием от правого края содержащего блока до края правого поля того же гипотетического бокса, что и выше. Значение является положительным, если гипотетический бокс находится слева от края содержащего блока.

4Если 'left' или 'right' - 'auto', любое 'auto' для 'margin-left' или 'margin-right' замещается на '0'.

5Если в данной точке 'margin-left' и 'margin-right' всё ещё 'auto', уравнение решается с дополнительным условием: что эти два поля обязаны получить одинаковые значения.

6Если в данной точке осталось только одно 'auto', уравнение решается с этим значением.

7Если в данной точке значения переограниченны, игнорируется значение 'left' (если 'direction' - 'rtl') или 'right' (если 'direction' - 'ltr') и уравнение решается с этим значением.

Если 'top', 'bottom', 'margin-top' или 'margin-bottom' установлены в 'auto', их вычисленное значение будет '0'. Свойство 'height' не применяется, но высота бокса задаётся свойством 'line-height'.

Если 'top', 'bottom', 'margin-top' или 'margin-bottom' установлены в 'auto', их вычисленное значение будет '0'. Если 'height' - 'auto', вычисленное значение будет внутренней высотой.

Если 'top', 'bottom', 'margin-top' или 'margin-bottom' - 'auto', их вычисленное значение - '0'. Если 'height' - 'auto', высота зависит от того, имеет ли элемент дочерние элементы уровня блока. Если он имеет дочерние элементы только инлайн-уровня, высота будет от верха самого верхнего строчного бокса до низа самого нижнего строчного бокса. Если он имеет дочерние элементы уровня блока, это будет расстояние от верхнего края рамки самого верхнего дочернего бокса уровня блока до нижнего края рамки самого нижнего дочернего бокса уровня блока. В расчёт берутся только потомки при нормальном всплывании (т.е. боксы-поплавки и абсолютно позиционированные боксы игнорируются, а относительно позиционированные боксы рассматриваются без своих смещений). Обратите внимание, что дочерний бокс может быть анонимным боксом.

Для абсолютно позиционированных элементов вертикальные размеры должны удовлетворять следующему условию:

'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = высота содержащего блока

(Если стиль рамки - 'none', '0' используется как значение ширины рамки.) Решение данного уравнения достигается путём проведения ряда замен в следующем порядке:

1Если 'top' имеет значение 'auto', оно заменяется расстоянием от верхнего края содержащего блока до края верхнего поля гипотетического бокса, который мог бы быть первым боксом элемента, если его свойство 'position' было бы 'static'. (Но вместо того, чтобы действительно рассчитать этот бокс, ПА свободны предполагать о его возможной позиции.) Значение является отрицательным, если гипотетический бокс находится сверху от содержащего блока.

2Если и 'height' и 'bottom' - 'auto', 'bottom' заменяется на '0'.

3Если 'bottom' или 'height' (ещё) имеют значение 'auto', любое 'auto' в 'margin-top' или 'margin-bottom' заменяется на '0'.

4Если в данной точке и 'margin-top', и 'margin-bottom' - всё ещё 'auto', уравнение решается с помощью дополнительного условия: что эти два поля обязаны получить одинаковые значения.

5Если в данной точке имеется только одно значение 'auto', уравнение решается с этим значением.

6Если в данной точке значения переограничены, игнорируется значение 'bottom', и уравнение решается с этим значением.

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

1Если 'height' - 'auto', оно заменяется внутренней высотой элемента.

2Если 'top' имеет значение 'auto', оно заменяется расстоянием от верхнего края содержащего блока до края верхнего поля гипотетического бокса, который мог бы быть первым боксом элемента, если его свойство 'position' было бы 'static'. (Но вместо того, чтобы действительно рассчитать этот бокс, ПА свободны предполагать о его возможной позиции.) Значение является отрицательным, если гипотетический бокс находится сверху от содержащего блока.

3Если 'bottom' - 'auto', 'auto' в 'margin-top' или 'margin-bottom' заменяется на '0'.

4Если в данной точке и 'margin-top', и 'margin-bottom' - всё ещё 'auto', уравнение решается с помощью дополнительного условия: что эти два поля обязаны получить одинаковые значения.

5Если в данной точке имеется только одно значение 'auto', уравнение решается с этим значением.

6Если в данной точке значения переограничены, игнорируется значение 'bottom', и уравнение решается с этим значением.

Поскольку высота инлайн-бокса может отличаться от размера шрифта текста бокса (например, 'line-height' > 1em), может иметься некоторое пространство сверху и снизу от выводимых глифов. Разница между размером шрифта и вычисленным значением 'line-height' называется leading\габарит. Половина габарита называется полугабарит.

ПА центрирует глифы по вертикали в инлайн-боксе, добавляя полугабарит сверху и снизу. Например, если блок текста имеет высоту '12pt' и значение 'line-height' - '14pt', должно быть добавлено 2pts дополнительного пространства: 1pt сверху и 1pt снизу от букв. (Это применимо также и к пустым боксам, как если бы пустой бокс содержал бесконечно узкую букву.)

Если значение 'line-height' меньше размера шрифта, окончательная высота инлайн-бокса будет меньше, чем размер шрифта, и выводимые глифы будут "просачиваться" за пределы бокса. Если такой бокс касается края строчного бокса, выводимые глифы будут также "просачиваться" в смежный строчный бокс.

Хотя поля, рамки и заполнение незамещаемых элементов не учитываются при подсчёте высоты инлайн-бокса (и, следовательно, высоты строчного бокса), они всё же отображаются вокруг инлайн-боксов. Это значит, что если высота строчного бокса короче внешних краёв содержащихся в нём боксов, то фон и цвета заполнения и рамок могут "просачиваться" в смежные строчные боксы. Однако в этом случае некоторые ПА могут использовать строчный бокс для "обрезки" областей заполнения и рамок (т.е. - не выводить их).

'line-height'

Значение: normal | <number> | <length> | <percentage> | inherit

Начальное: normal

Применяется: ко всем элементам

Наследуется: да

Процентное: относительно размера шрифта самого элемента

Носитель: визуальный

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

Если это свойство установлено в элементе инлайн-уровня, оно специфицирует точную высоту каждого бокса, генерируемого элементом (за исключением замещаемых инлайн-элементов, когда высота бокса задаётся свойством 'height').

Значения этого свойства имеют следующий смысл:

normal

Сообщает в ПА, что нужно установить вычисленное значение в "приемлемое" значение на базе размера шрифта элемента. Значение имеет тот же смысл, что и <number>. Для 'normal' мы рекомендуем значения в пределах от 1.0 до 1.2.

<length>

Высота бокса устанавливается в эту величину. Отрицательные значения недопустимы.

<number>

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

<percentage>

Вычисленное значение свойства является процентами от вычисленного размера шрифта элемента. Отрицательные значения недопустимы.

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

'overflow'

Значение: visible | hidden | scroll | auto | inherit

Начальное: visible

Применяется: к элементам уровня блока и к замещаемым элементам

Наследуется: нет

Процентное: N/A

Носитель: визуальный

Это свойство специфицирует, сжимается ли содержимое элемента уровня блока, если оно переполняет бокс элемента (который действует как содержащий блок для содержимого).

Значения имеют следующий смысл:

visible

Указывает, что содержимое не сжимается, т.е. может отображаться за пределами бокса блока.

hidden

Указывает, что содержимое сжимается и что механизм прокрутки не должен предоставляться для просмотра содержимого вне сжимаемой области; пользователь не получит доступа к сжатому содержимому. Размер и форма сжимаемой области специфицируются свойством 'clip'.

scroll

Означает, что содержимое сжимается и что если ПА использует механизм прокрутки, видимый на экране (такой как полоса прокрутки или паннер), этот механизм должен отображаться для бокса, независимо от того, сжимается его содержимое или нет. Это устраняет возможные проблемы с появлением и скрытием полосы прокрутки в динамическом окружении. Если это значение специфицировано и целевой носитель - 'print' или 'projection', переполняющее содержимое должно быть напечатано.

auto

Поведение значения 'auto' зависит от ПА, но должно вызывать предоставление механизма прокрутки для переполняемых боксов.

Даже если 'overflow' установлено в 'visible', содержимое может быть обрезано до размеров окна документа ПА средой окружения.

Рассмотрим следующий пример блока кавычек (BLOCKQUOTE), который слишком велик для своего содержащего блока (установленного DIV). Вот документ-источник:

<DIV> <BLOCKQUOTE> <P>I didn't like the play, but then I saw it under adverse conditions - the curtain was up. <DIV class="attributed-to">- Groucho Marx</DIV> </BLOCKQUOTE> </DIV>

Это таблица стилей, управляющая размерами и стилем генерируемых боксов:

DIV { width : 100px; height: 100px; border: thin solid red; } BLOCKQUOTE { width : 125px; height : 100px; margin-top: 50px; margin-left: 50px; border: thin dashed black } DIV.attributed-to { text-align : right; }

Начальное значение 'overflow' - 'visible', поэтому BLOCKQUOTE может быть сформатирован без сжатия примерно так:

[D]

Установка 'overflow' в 'hidden' для элемента DIV, с другой стороны, вызывает усечение BLOCKQUOTE содержащим блоком:

[D]

Значение 'scroll' сообщит ПАгенту, что поддерживается визуальный механизм прокрутки, чтобы вывести его для обеспечения доступа пользователя к усечённому содержимому.

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

'clip'

Значение: <shape> | auto | inherit

Начальное: auto

Применяется: к элементам уровня блока и к замещаемым элементам

Наследуется: нет

Процентное: N/A

Носитель: визуальный

Свойство 'clip' применяется к элементам, имеющим свойство 'overflow' со значением, отличным от 'visible'.

Значения имеют следующий смысл:

auto

Cжимаемая область имеет тот же размер и размещение, что и бокс(ы) элемента.

<shape>

В CSS2 верными значениями для <shape> являются: rect (<top> <right> <bottom> <left>) где <top>, <bottom> <right> и <left> специфицируют смещение относительно соответствующих сторон бокса.

<top>, <right>, <bottom> и <left> могут иметь или значение <length>, или 'auto'. Отрицательные значения разрешены. Значение 'auto' указывает, что данный край сжимаемой области будет тем же, что и край генерируемого бокса элемента (т.е. 'auto' означает то же, что '0'.)

Если координаты округляются до пикселных значений, необходимо следить, чтобы не осталось видимых пикселов, когда <left> + <right> равно ширине элемента (или <top> + <bottom> равно высоте элемента), и наоборот, чтобы не оставалось невидимых пикселов, когда эти значения равны 0.

Предки элемента могут также иметь сжатые области (в тех случаях, когда их свойство 'overflow' - 'visible'); то, что отображается, находится на пересечении различных сжатых областей.

Если сжатая область выходит за пределы окна документа ПА, содержимое может быть сжато до размеров окна среды окружения.

Эти два правила:

P { clip: rect(5px, 10px, 10px, 5px); } P { clip: rect(5px, -5px, 10px, 5px); }

создадут прямоугольную сжимаемую область, ограниченную пунктирной линией:

[D]

Примечание. В CSS2 все сжимаемые области прямоугольны. Мы предполагаем в будущем расширение, разрешающее непрямоугольное сжатие

'quotes'

Значение: [<string> <string>]+ | none | inherit

Начальное: зависит от ПА

Применяется: ко всем элементам

Наследуется: да

Процентное: N/A

Носитель: визуальный

Это свойство специфицирует знаки кавычек для любого количества внедрённых закавычиваний. Значения имеют следующий смысл:

none

Значения 'open-quote' и 'close-quote' свойства 'content' не производят знаков кавычек.

[<string> <string>]+

Значения для 'open-quote' и 'close-quote' свойства 'content' берутся из данного списка пар знаков кавычек (закрывающих и открывающих). Первая (самая левая) пара представляет самый внешний уровень закавычивания, вторая пара - первый уровень внедрения и т.д. ПА обязан применять подходящие пары знаков кавычек в соответствии с уровнем внедрения.

Применение следующей таблицы стилей:

Знаки кавычек вставляются в соответствующих местах документа значениями 'open-quote' и 'close-quote' свойства 'content'. Каждое вхождение 'open-quote' или 'close-quote' замещается одной их строк значения 'quotes', базируясь на глубине вложения.

'Open-quote' относится к первой кавычке из пары, 'close-quote' относится ко второй. То, какая пара кавычек используется, зависит от уровня вложения кавычек: число вхождений 'open-quote' во всём сгенерированном тексте перед текущим вхождением минус число вхождений 'close-quote'. Если глубина - 0, используется первая пара, если глубина - 1, вторая пара и т.д. Если глубина вложения больше, чем число пар, повторяется последняя пара.

Обратите внимание, что глубина вложения кавычек не зависит от вложения документа-источника или структуры форматирования.

Некоторые стили печати требуют, чтобы знак открывающей кавычки повторялся перед каждым параграфом блока кавычек, охватывающего несколько параграфов, но только последний параграф оканчивался знаком закрывающей кавычки. В CSS этого можно добиться вставкой "фантома" закрывающих кавычек. Ключевое слово 'no-close-quote' уменьшает уровень кавычек, но не вставляет знак кавычки.

Следующая таблица стилей помещает знаки открывающей кавычки в каждом параграфе в BLOCKQUOTE и вставляет одиночную закрывающую кавычку в конце:

'page-break-before'

Значение: auto | always | avoid | left | right | inherit

Начальное: auto

Применяется: к элементам уровня блока

Наследуется: нет

Процентное: N/A

Носитель: визуальный, страничный

'page-break-after'

Значение: auto | always | avoid | left | right | inherit

Начальное: auto

Применяется: к элементам уровня блока

Наследуется: нет

Процентное: N/A

Media: визуальный, страничный

'page-break-inside'

Значение: avoid | auto | inherit

Начальное: auto

Применяется: к элементам уровня блока

Наследуется: да

Процентное: N/A

Media: визуальный, страничный

Значения этих свойств имеют следующий смысл:

auto

Ни форсирует, ни запрещает разрыв страницы перед (после, внутри) генерируемого бокса.

always

Всегда форсирует разрыв страницы перед (после, внутри) генерируемого бокса.

avoid

Исключает разрыв страницы перед (после, внутри) генерируемого бокса.

left

Форсирует один или два разрыва страницы перед (после, внутри) генерируемого бокса, так что следующая страница форматируется как левая страница.

right

Форсирует один или два разрыва страницы перед (после, внутри) генерируемого бокса, так что следующая страница форматируется как правая страница.

Потенциально размещение разрыва страницы находится под влиянием свойства 'page-break-inside' родительского элемента, свойства 'page-break-after' предыдущего элемента и свойства 'page-break-before' последующего элемента. Если эти свойства имеют значения, отличные от 'auto', то значения 'always', 'left' и 'right' получают преимущество перед 'avoid'.

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

'page'

Значение: <identifier> | auto

Начальное: auto

Применяется: к элементам уровня блока

Наследуется: да

Процентное: N/A

Носитель: визуальный, страничный

Свойство 'page' можно использовать для спецификации определённого типа страницы, на которой элемент должен быть выведен.

Все таблицы будут размещены на правой стороне страницы с ориентацией landscape:

'orphans'

Значение: <integer> | inherit

Начальное: 2

Применяется: к элементам уровня блока

Наследуется: да

Процентное: N/A

Носитель: визуальный, страничный

'widows'

Значение: <integer> | inherit

Начальное: 2

Применяется: к элементам уровня блока

Наследуется: да

Процентное: N/A

Носитель: визуальный, страничный

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

Информацию о форматировании параграфов см. в разделе Строчные боксы.

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

1На вертикальном поле между боксами блока. Если разрыв страницы появляется здесь, вычисленные значения соответствующих свойств 'margin-top' и 'margin-bottom' установлены в '0'.

2Между строчными боксами внутри бокса блока.

Эти разрывы являются субъектами для следующих правил:

[x]. Правило A: Разрывы из пункта (1) допускаются, только если свойства 'page-break-after' и 'page-break-before' всех элементов, генерирующих боксы у данного поля, разрешают это, что имеет место, когда по меньшей мере одно из них (свойств) имеет значение 'always', 'left' или 'right', или когда все они - 'auto'.

[x]. Правило B: В то же время, если все они - 'auto' и ближайший общий предок всех элементов имеет значение свойства 'page-break-inside' - 'avoid', тогда разрыв здесь не разрешается.

[x]. Правило C: Разрывы из пункта (2) допускаются, только если количество строчных боксов между разрывом и началом закрывающего бокса блока имеет значение 'orphans' или более, а количество строчных боксов между разрывом и концом бокса имеет значение 'widows' или более.

[x]. Правило D: В дополнение, разрывы (2) допускаются, только если свойство 'page-break-inside' - 'auto'.

Если вышесказанное не обеспечивает достаточное количество точек разрывов для предотвращения выхода содержимого за пределы страничного бокса, тогда правила B и D исключаются для того, чтобы найти дополнительные точки разрывов.

Если это всё ещё не даёт достаточного количества точек разрывов, то правила A и C также исключаются, чтобы найти дополнительные точки разрывов.

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

Разрыв страницы обязан возникнуть в (1), если среди свойств 'page-break-after' и 'page-break-before' всех элементов, генерирующих боксы у данного поля, имеется по меньшей мере одно со значением 'always', 'left' или 'right'.

Разрыв страницы обязан появиться в (1), если последний строчный бокс выше этого поля и первый бокс - ниже него не имеют одинакового значения для 'page'.

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

[x]. Делать разрывы как можно реже.

[x]. Делать все страницы, не оканчивающиеся форсированным разрывом, одинаковой высоты.

[x]. Исключить разрывы внутри блока, имеющего рамку.

[x]. Исключить разрывы внутри таблицы.

[x]. Исключить разрывы внутри всплывающего элемента.

Предположим, например, что таблица стилей содержит 'orphans : 4', 'widows : 2', и имеется 20 свободных строк (строчных боксов) внизу текущей страницы:

[x]. Если параграф в конце текущей страницы содержит 20 строк или менее, он должен быть размещён на текущей странице.

[x]. Если параграф содержит 21 или 22 строк, вторая часть параграфа обязана не нарушать работы 'widows', и, следовательно, вторая часть обязана содержать точно две строки.

[x]. Если параграф содержит 23 строки или более, первая часть должна содержать 20 строк, а вторая часть - остальные строки.

Теперь предположим, что 'orphans' - '10', 'widows' - '20', и имеется 8 свободных строк внизу текущей страницы:

[x]. Если параграф в конце текущей страницы содержит 8 строк или менее, он должен быть размещён на текущей странице.

[x]. Если параграф содержит 9 строки или более, он не может быть разделён (что могло бы нарушить работу orphans), следовательно, он должен быть перемещён как блок на следующую страницу.

CSS2 специфицирует шрифты в соответствии со следующими характеристиками:

Семейство шрифта/Font Family

Свойство Семейство шрифта специфицирует, какое семейство шрифтов используется для вывода текста. Семейство это группа шрифтов, созданных с использованием сходных принципов дизайна и внешнего вида. Один член семейства может быть italic, другой bold, третий - сжатый или использующий малые заглавные. Имена семейств включают "Helvetica", "New Century Schoolbook", и "Kyokasho ICA L". Имена семейств не ограничены латиницей. Имена семейств могут быть сгруппированы по различным категориям: без или с засечками, с непропорциональными символами, симулирующие письмо от руки, фантазийные шрифты и т.д.

Стиль шрифта/Font style

Специфицирует, отображается ли текст нормальным, italic или наклонным. Italic - это более курсивный шрифт, чем normal, но не такой курсивный, чтобы отображать письмо от руки. Oblique - это наклонная форма шрифта normal, и обычно используется вместе со шрифтами sans-serif. Такое определение устраняет путаницу, когда слегка наклонённые шрифты normal обозначают как oblique, а normal Greek - как italic.

Вариант шрифта/Font variant

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

Вес шрифта/Font weight

Вес шрифта имеет отношение к толщине глифов, используемых для вывода текста, относительно других шрифтов того же семейства.

Сжатие/Font stretch

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

Размер/Font size

Относится к размеру шрифта от базовой линии, когда установлен в solid (в терминах CSS это тогда, когда свойства 'font-size' и 'line-height' имеют одно значение).

Для всех свойств, за исключением 'font-size', значения размеров 'em' и 'ex' относятся к размеру шрифта текущего элемента. Для 'font-size' эти единицы измерения ссылаются на размер шрифта-предка. См. также раздел единицы измерения.

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

О классификации шрифтов см. раздел дескрипторы шрифта.

'font-family'

Значение: [[ <family-name> | <generic-family> ],]* [<family-name> | <generic-family>] | inherit

Начальное: зависит от ПА

Применяется: ко всем элементам

Наследуется: да

Процентное: N/A

Носитель: визуальный

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

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

'font-style'

Значение: normal | italic | oblique | inherit

Начальное: normal

Применяется: ко всем элементам

Наследуется: да

Процентное: N/A (не установлено)

Носитель: визуальный

Свойство 'font-style' запрашивает стили normal (иногда называемый "roman" или "upright"), italic и oblique в семействе шрифтов. Значения имеют следующий смысл:

normal

Определяет шрифт, который классифицирован как 'normal' в БД шрифтов ПА.

oblique

Определяет шрифт, который классифицирован как 'oblique' в БД шрифтов в ПА. Шрифты со словами Oblique, Slanted или Incline в своих названиях обычно помечаются в БД шрифтов как 'oblique'. Шрифт, помеченный в БД шрифтов ПА как 'oblique', может в действительности генерироваться электронным наклоном нормального шрифта.

italic

Определяет шрифт, который классифицирован как 'italic' в БД шрифтов ПА, или, если это недоступно, шрифт, помеченный 'oblique'. Шрифты со словами Italic, Cursive или Kursiv в своих названиях обычно помечаются как 'italic'.

В этом примере текст normal в элементах H1, H2 или H3 будет отображаться шрифтом italic. Однако, выделенный текст (EM) в элементе H1 будет выведен как normal.

'font-size'

Значение: <absolute-size> | <relative-size> | <length> | <percentage> | inherit

Начальное: medium

Применяется: ко всем элементам

Наследуется: да, вычисленное значение наследуется

Процентное: ссылается на размер шрифта родительского элемента

Носитель: визуальный

Это свойство описывает размер шрифта, установленного в solid. Значения имеют следующий смысл:

<absolute-size>

Ключевое слово <absolute-size> ссылается на вход в таблице размеров шрифта, вычисленной и хранимой пользовательским агентом. Возможные значения:

[ xx-small | x-small | small | medium | large | x-large | xx-large ]

На экране компьютера между смежными индексами применяется масштаб 1.2: если шрифт 'medium' - 12pt, то шрифт 'large' будет 14.4pt. Другие носители могут требовать других значений масштаба. Таким образом, ПА должен учитывать качество и доступность шрифтов при обсчёте таблицы размеров. Таблица может отличаться для разных семейств шрифтов.

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

<relative-size>/относительный размер

Ключевое слово <relative-size> интерпретируется относительно таблицы размеров шрифта и размера шрифта родительского элемента. Возможные значения:

[ larger | smaller ]

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

<length>

Значение length специфицирует абсолютный размер шрифта (т.е. независимый от таблицы шрифтов ПА). Негативные значения недопустимы.

<percentage>

Процентное значение специфицирует абсолютный размер шрифта относительно размера шрифта родительского элемента. Использование процентных значений или значений в 'em' даёт более надёжные и каскадируемые таблицы стилей.

Текущее значение данного свойства может отличаться от обсчитанного свойства при наличии цифрового значения 'font-size-adjust' и недоступности некоторых размеров шрифта.

Дочерние элементы наследуют обсчитанное значение 'font-size' (в то же время, эффект 'font-size-adjust' может усложниться).

P { font-size: 12pt; } BLOCKQUOTE { font-size: larger } EM { font-size: 150% } EM { font-size: 1.5em }

'font-size-adjust'

Значение: <number> | none | inherit

Начальное: none

Применяется: ко всем элементам

Наследуется: да

Процентное: N/A

Носитель: визуальный

В двухкамерном написании субъективно очевидный размер и разборчивость шрифта меньше зависят от своих значений 'font-size', нежели от значений 'x-height', или, более доступно, от пропорции этих двух значений, называемой значением аспекта (font size, разделённый на x-height). Чем выше значение аспекта, тем более вероятно, что шрифт меньшего размера будет разборчивым. В противоположность этому, шрифты с меньшим значением аспекта скорее окажутся неразборчивыми ниже порогового значения, чем шрифты с более высоким значением аспекта. Прямая замена шрифтов в связи с размером шрифта может привести к появлению нечитаемых символов.

Например, популярный шрифт Verdana имеет значение аспекта 0.58; если измерение размера шрифта Verdana - 100 единиц, то его x-height - 58 единиц. Для сравнения, Times New Roman имеет значение аспекта 0.46. Verdana, следовательно, имеет тенденцию остаться разборчивым при меньших размерах, чем Times New Roman. И наоборот, Verdana чаще окажется слишком большим при замещении шрифта Times New Roman.

Это свойство позволяет авторам специфицировать значение аспекта, сохраняющее x-height первого шрифта в подставляемом шрифте. Значения имеют следующий смысл:

none

Не сохраняет x-height шрифта.

<number>

Специфицирует значение аспекта. Число относится к значению аспекта первого шрифта. Значение масштаба доступных шрифтов обсчитывается в соответствии со следующей формулой:

y(a/a') = c

где:

y = 'font-size' первого шрифта a' = значение аспекта доступного шрифта c = 'font-size' для применения к доступному шрифту

Например, если 14px Verdana (со значением аспекта 0.58) окажется недоступным, а доступный шрифт имеет значение аспекта 0.46, font-size замещающего будет 14 * (0.58/0.46) = 17.65px.

Уточнение размера шрифта имеет место при обсчёте текущего значения 'font-size'. Поскольку наследование базируется на обсчитанном значении, дочерние элементы будут наследовать неуточнённые значения.

Первый рисунок показывает различные типы шрифтов, растрированные в обычный размер (11pt. от 72 ppi), вместе с их значениями аспекта. Обратите внимание, что шрифты с большим значением аспекта оказываются больше, чем шрифты с низким значением аспекта. Шрифты со слишком низким значением аспекта оказываются нечитаемыми в данных размерах.

Следующий рисунок показывает результат 'font-size-adjust', где Verdana берётся как "первый шрифт", и результат применения масштаба. После применения, размеры шрифтов почти линеарны, хотя текущие (em) размеры варьируются более чем на 100%. Обратите внимание, что 'font-size-adjust' стремится также стабилизировать горизонтальное измерение строк.

'font'

Значение: [ [ <'font-style'> || <'font-variant'> || <'font-weight'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-bar | inherit

Начальное: см. конкретные свойства

Применяется: ко всем элементам

Наследуется: да

Процентное: допускается в 'font-size' и 'line-height'

Носитель: визуальный

Свойство 'font', за исключением случаев, описанных ниже, является сокращённым значением свойств установок 'font-style', 'font-variant', 'font-weight', 'font-size', 'line-height' и 'font-family' в том же месте таблицы стилей. Синтаксис этого свойства базируется на традиционной типографской нотации сокращений для установки нескольких свойств шрифта.

Все свойства, относящиеся к шрифтам, сначала устанавливаются в свои начальные значения, включая перечисленные в предыдущих параграфах, плюс 'font-stretch' и 'font-size-adjust'. Затем свойства, для которых заданы явные значения в 'font', устанавливаются в эти значения. Для определения допустимых и начальных значений см. ранее определённые свойства. Для обеспечения обратной совместимости нельзя устанавливать 'font-stretch' и 'font-size-adjust' в иные, нежели начальные, значения, используя свойство 'font'; вместо этого установите индивидуальные свойства.

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

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

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

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

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

Дескрипторы шрифта можно классифицировать по трём типам:

1служащие связкой между использованием шрифта в CSS и описанием шрифта (эти дескрипторы имеют те же имена, что и соответствующие свойства шрифта CSS),

2URI для локализации данных шрифта,

3для характеристики шрифта, являющиеся связкой между описанием шрифта и данными шрифта.

Все описания шрифта специфицируются at-правилом @font-face. Общая форма такая:

Следующие дескрипторы имеют те же имена, что и соответствующие свойства шрифта CSS2, и принимают одиночное значение или список разделённых запятыми значений.

Значения в таком списке (за исключением особо отмеченных) - те же самые, что и соответствующие свойства CSS2. Если это одиночное значение, оно должно совпадать. Если это список, любой элемент списка может образовать совпадение. Если в @font-face дескриптор отсутствует, используется начальное значение дескриптора.

'font-family'(Дескриптор)

Значение: [ <family-name> | <generic-family> ] [, [<family-name> | <generic-family> ]]*

Начальное: зависит от ПА

Носитель: визуальный

Это дескриптор имени семейства шрифтов для шрифта, принимающий то же значение, что и свойство 'font-family'.

'font-style' (Дескриптор)

Значение: all | [ normal | italic | oblique ] [, [normal | italic | oblique] ]*

Начальное: all

Носитель: визуальный

Это дескриптор стиля шрифта, принимающий то же значение, что и свойство 'font-style', за исключением того, что использование списка запрещено.

'font-variant' (Дескриптор)

Значение: [normal | small-caps] [,[normal | small-caps]]*

Начальное: normal

Носитель: визуальный

Это CSS-обозначение того, является ли этот шрифт вариантом "малые заглавные". Он принимает те же значения, что и свойство 'font-variant', за исключением того, что использование списка запрещено.

Примечание. Кириллические прямые шрифты могут быть помечены в 'font-variant' как "малые заглавные", что лучше совмещается с латиницей (а соответствующий курсив - помечен 'font-style' как italic с той же целью).

'font-weight' (Дескриптор)

Значение: all | [normal | bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900] [, [normal | bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900]]*

Начальное: all

Носитель: визуальный

Это дескриптор веса шрифта относительно других шрифтов того же семейства. Принимает те же значения, что и свойство 'font-weight', с тремя исключениями:

1относительные ключевые слова (bolder, lighter) не разрешаются;

2список разделённых запятыми значений разрешён для шрифтов, содержащих несколько значений веса;

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

'font-stretch' (Дескриптор)

Значение: all | [ normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded ] [, [ normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded] ]*

Начальное: normal

Носитель: визуальный

Это обозначение CSS для сжатия или расширения шрифта относительно других шрифтов того же семейства. Принимает те же значения, что и свойство 'font-stretch', за исключением того, что:

[x]. относительные ключевые слова (wider, narrower) не допускаются;

[x]. список разделённых запятыми значений разрешён;

[x]. разрешено ключевое слово 'all'.

'font-size'

Значение: all | <length> [, <length>]*

Начальное: all

Носитель: визуальный

Это дескриптор размера, предоставляемого для данного шрифта. Разрешены только абсолютные единицы измерения, в отличие от свойства 'font-size', которое разрешает относительные и абсолютные размеры. Разрешён список разделённых запятыми размеров.

Начальное значение 'all' подходит для большинства имеющих вес шрифтов, поэтому данный дескриптор используется прежде всего в @font-face для растровых шрифтов или шрифтов, имеющих вес, которые разработаны для растрирования в ограниченных пределах размеров шрифта.

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

'unicode-range' (Дескриптор)

Значение: <urange> [, <urange>]*

Начальное: U+0-7FFFFFFF

Носитель: визуальный

Это дескриптор диапазона символов ISO 10646, покрываемого данным шрифтом.

Значения <urange> выражаются с использованием 16-ричных значений с префиксом "U+", соответствующих кодовой позиции в ISO 10646 ( [ISO10646] ).

Например, U+05D1 это символ ISO 10646 'еврейская буква bet'. Для значений вне Basic Multilingual Plane/BMP (Базовый Многоязычный План) подставляются дополнительные ведущие цифры, соответствующие числу плана, и также 16-ричные, как этот U+A1234 символ Плана 10 с 16-ричной кодовой позицией 1234. Со времени написания, новые символы вне BMP не добавлялись. Ведущие нули (например, 0000004D) верны, но не требуются.

Начальное значение этого дескриптора покрывает не только весь Basic Multilingual Plane (BMP), в пределах U+0-FFFF, но также и весь репертуар ISO 10646. Таким образом, начальное значение говорит о том, что шрифт может содержать глифы любых символов ISO 10646. Спецификация значения 'unicode-range' предоставляет информацию для эффективного поиска, объявляя ограниченный диапазон, в пределах которого шрифт может иметь глифы символов. Шрифт не должен искаться вне указанного диапазона символов.

Значения могут записываться любым количеством цифр. Для единичной цифры символ '?' означает 'любое значение', которое создаёт диапазон позиций символов. Таким образом, используя одиночное число:

Этот дескриптор определяет количество "units/единиц измерения" на em; эти units могут использоваться другими дескрипторами для выражения различных размеров, следовательно, 'units-per-em' необходим, если другие дескрипторы зависят от него.

'units-per-em' (Дескриптор)

Значение: <number>

Начальное: не определено

Носитель: визуальный

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

Необходим для ссылки на данные шрифта, загружаемые или установленные локально.

'src' (Дескриптор)

Значение: [ <uri> [format(<string> [, <string>]*)] | <font-face-name> ] [, <uri> [format(<string> [, <string>]*)] | <font-face-name> ]*

Начальное: не определено

Носитель: визуальный

Это выстроенный по приоритету список разделённых запятыми внешних ссылок и/или имён локально установленных файлов. Внешняя ссылка указывает на данные шрифта в Web. Это необходимо, если WebFont загружен. Ресурс шрифта может быть поднабором шрифта-источника, например, он может содержать только те глифы, которые необходимы для текущей страницы или для набора страниц.

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

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

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

Как и с прочими URI в CSS, URI может быть неполным, и в этом случае он расширяется относительно расположения таблицы стилей, содержащей @font-face.

Установленное локально <font-face-name> это полное имя локально установленного шрифта. full font name\полное имя шрифта - это имя шрифта, сообщённое операционной системой, и оно наиболее вероятно будет использоваться читающим таблицами стилей, таблицей стилей по умолчанию в браузере или возможными авторским таблицами стилей в intranet. Украшения, такие как bold, italic и underline, часто используются для дифференциации шрифтов внутри семейства шрифтов. Дополнительную информацию о полных именах шрифтов см. далее в Примечаниях.

Обозначением для <font-face-name> является полное имя шрифта, которое должно быть заключено в кавычки, поскольку может содержать любые символы, включая пробелы и знаки пунктуации, а также должно быть заключено в local(" и ").

Эти дескрипторы не обязательны для определения CSS2, но могут использоваться при смысловой подстановке шрифтов или уточнении размеров шрифтов, необходимых автору.

'panose-1' (Дескриптор)

Значение: [<integer>]{10}

Начальное: 0 0 0 0 0 0 0 0 0 0

Носитель: визуальный

Это дескриптор числа Panose -1, состоящего из десяти десятеричных чисел, разделённых пробелами. Список значений, разделённых запятыми, не допускается для данного дескриптора, поскольку система Panose -1 может указывать, что диапазоны значений совпадают. Начальное значение - нуль, что означает "любое" для любой цифры PANOSE; все шрифты будут совпадать с числом Panose, если используется это значение. Использование дескриптора Panose -1 рекомендуется исключительно для латинских шрифтов. Дополнительно см. Приложение C.

'stemv' (Дескриптор)

Значение: <number>

Начальное: не определено

Носитель: визуальный

Это дескриптор ширины вертикальной основы шрифта. Если значение не определено, дескриптор не используется для подбора. Если этот дескриптор используется, также должен использоваться дескриптор 'units-per-em'.

'stemh' (Дескриптор)

Значение: <number>

Начальное: не определено

Носитель: визуальный

Это дескриптор ширины горизонтальной основы шрифта. Если значение не определено, дескриптор не используется для подбора. Если этот дескриптор используется, также должен использоваться дескриптор 'units-per-em'.

'slope' (Дескриптор)

Значение: <number>

Начальное: 0

Носитель: визуальный

Это дескриптор угла вертикального закругления шрифта.

'cap-height' (Дескриптор)

Значение: <number>

Начальное: не определено

Носитель: визуальный

Это дескриптор для числа-значения высоты глифов верхнего регистра шрифта. Если значение не определено, дескриптор не используется для подбора. Если этот дескриптор используется, также должен использоваться дескриптор 'units-per-em'.

'x-height' (дескриптор)

Значение: <number>

Начальное: не определено

Носитель: визуальный

Это дескриптор высоты глифов нижнего регистра шрифта. Если значение не определено, дескриптор не используется для подбора. Если этот дескриптор используется, также должен использоваться дескриптор 'units-per-em'. Этот дескриптор может широко использоваться вместе со свойством 'font-size-adjust', поскольку вычисление значения z шрифтов-кандидатов требует наличия и font size, и x-height; следовательно, рекомендуется включать данный дескриптор.

'ascent' (Дескриптор)

Значение: <number>

Начальное: не определено

Носитель: визуальный

Это дескриптор максимальной неакцентированной высоты шрифта. Если значение не определено, дескриптор не используется для подбора. Если этот дескриптор используется, также должен использоваться дескриптор 'units-per-em'.

'descent'(Дескриптор)

Значение: <number>

Начальное: не определено

Носитель: визуальный

Это дескриптор максимальной неакцентированной глубины шрифта. Если значение не определено, дескриптор не используется для подбора. Если этот дескриптор используется, также должен использоваться дескриптор 'units-per-em'.

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

Самыми важными из этих дескрипторов являются 'widths' и 'bbox', которые используются для предотвращения перерисовки текста при получении доступа к основному шрифту. В дополнение к этому, дескрипторы из набора дескрипторов, используемых для подбора, могут использоваться для лучшего синтеза внешнего вида основного шрифта.

'widths' (Дескриптор)

Значение: [<urange> ]? [<number> ]+ [,[<urange> ]? <number> ]+]

Начальное: не определено

Носитель: визуальный

Это дескриптор ширины глифов. Значением является список разделённых запятыми значений <urange>, за каждым из которых следует одно или более значений ширины глифов. Если этот дескриптор используется, также должен использоваться дескриптор 'units-per-em'.

Если <urange> опущен, принимается диапазон U+0-7FFFFFFF, который покрывает все символы и их глифы. Если заданных значений ширины глифов не достаточно, то последнее в списке реплицируется для покрытия urange. Если задано слишком много значений ширины, то излишние игнорируются.

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

'baseline' (Дескриптор)

Значение: <number>

Начальное: 0

Носитель: визуальный

Это дескриптор нижней базовой линии шрифта. Если этот дескриптор не установлен в значение по умолчанию (если не нулевое), должен использоваться также дескриптор 'units-per-em'.

'centerline' (Дескриптор)

Значение: <number>

Начальное: не определено

Носитель: визуальный

Это дескриптор центральной базовой линии шрифта. Если значение не определено, ПА может использовать эвристику: как midpoint/среднюю точку для значений восхождения и нисхождения (ascent и descent). Если этот дескриптор используется, также должен использоваться дескриптор 'units-per-em'.

'mathline' (Дескриптор)

Значение: <number>

Начальное: не определено

Носитель: визуальный

Это дескриптор математической базовой линии шрифта. Если не определен, ПА может использовать центральную базовую линию. Если этот дескриптор используется, также должен использоваться дескриптор 'units-per-em'.

'topline' (Дескриптор)

Значение: <number>

Начальное: не определено

Носитель: визуальный

Это дескриптор верхней базовой линии шрифта. Если не определен, ПА может использовать приблизительное значение, такое как ascent. Если этот дескриптор используется, также должен использоваться дескриптор 'units-per-em'.

Для данного списка шрифтов:

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

В этом разделе рассматриваются характеристики шрифта, которые могут пригодиться на стороне клиента для подбора, синтеза и загрузки на различных платформах Web.

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

Эти характеристики используются для описания шрифта. Они не являются специфичными для CSS, или таблиц стилей. В CSS каждая характеристика описывается дескриптором шрифта. Эти характеристики могут также отображаться в узлы VRML, CGM Application Structures, Java API или альтернативные языки таблиц стилей. Шрифты, запрашиваемые одним носителем и хранящиеся в прокси-кэше, могут быть повторно использованы другим носителем, экономя время для загрузки и увеличивая пропускную способность сети, если общая система характеристик шрифтов используется повсюду.

Вот неполный список примеров:

[x]. 2-мерные векторные форматы

[x]. Computer Graphics Metafile

[x]. Simple Vector Format

[x]. 3-мерные графические форматы

[x]. VRML

[x]. 3DMF

[x]. Технологии внедрения объектов

[x]. Java

[x]. Active-X

[x]. Obliq

Это полное имя конкретного представителя семейства шрифтов. Оно обычно содержит много нестандартизованных текстовых квалификаторов или украшений, присоединённых к имени семейства шрифтов. Оно может также включать производственное имя или аббревиатуру, часто впереди имени шрифта. Оно используется для ссылок только на локально установленные Шрифты, поскольку формат "украшенного" имени может варьироваться в зависимости от платформы. Имя должно быть заключено в кавычки.

Например, имена шрифта семейства TrueType и шрифта PostScript могут отличаться в использовании пробельных символов, пунктуации и аббревиатур некоторых слов (напр., чтобы соответствовать различным ограничениям систем или принтеров на размер имён). К примеру, пробелы не допускаются в именах PostScript, но являются обычными в полных именах шрифтов. Таблица имён TrueType может также содержать и имена PostScript, не имеющие пробелов.

Определение имени шрифта важно потому, что оно (имя) является ссылкой на локально установленный шрифт. Важно, чтобы имя было определённым, не зависящим от платформы и приложения. В связи с этим, имя не должно быть зависимым от приложения и языка.

Идеальным решением будет имя, которое уникально идентифицирует каждую коллекцию данных шрифтов. Это имя не должно существовать в текущей практике работы с данными шрифтов. Шрифты с одним базовым именем могут различаться с помощью нескольких дескрипторов. Некоторые из этих дескрипторов, таких как различные дополнения глифов в шрифте, могут быть незначащими, если нужные глифы имеются в шрифте. Другие дескрипторы, такие как различные метрики ширины, делают шрифты с одним именем несовместимыми. Похоже, что невозможно определить правило, по которому можно всегда определить несовместимость и предотвратить использование совершенно соответствующей локальной копии данных шрифта с этим именем. Следовательно, только диапазон символов ISO 10646 будет использоваться для квалификации совпадения имён разновидностей шрифтов.

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

Определённые значения, такие как метрики ширины, выражаются в единицах, относительных к абстрактному квадрату, чья высота подразумевается как расстояние между строками того же размера, что и размер типа. Этот квадрат называется em-квадрат и является дизайн-решёткой, на которой определяются контуры глифов. Значение этого дескриптора специфицирует, на сколько единиц делится EM-квадрат. Обычными значениями являются, например, 250 (Intellifont), 1000 (Type 1) и 2048 (TrueType, TrueType GX и OpenType).

Если значение не специфицировано, то невозможно определить, что означает какая-либо метрика шрифта. Например, один шрифт имеет глифы нижнего регистра высотой 450, а меньший шрифт имеет высоту 890! Числа в действительности являются дробями; первый шрифт имеет 450/1000, а второй - 890/2048, что и в самом деле меньше.

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

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

На практике, многие шрифты содержат различные глифы для одного и того же символа.

Какой из этих глифов используется и зависит или от правил языка, или от предпочтений дизайнера.

В арабском языке, например, все буквы содержат 4 (или 2) различных фигуры, в зависимости от того, используется буква в начале слова, в середине, в конце или изолированно. Во всех случаях это один символ, и, соответственно - только один символ в документе-источнике, но при печати он выглядит каждый раз по другому.

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

Специфицирует ту часть имени шрифта, где указывается имя семейства данного шрифта. Например, имя семейства для Helvetica-Bold - Helvetica, имя семейства для ITC Stone Serif Semibold Italic - ITC Stone Serif. Некоторые системы рассматривают "украшения", относящиеся к сжатию или расширению как часть имени семейства.

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

Относится к доминантной основе шрифта. Может быть два или более значений разработанной при дизайне ширины. Например, главная вертикальная основа римских символов будет отличаться от тонкой основы "M" и "N" с засечками, плюс ещё могут быть разные значения ширины для символов нижнего и верхнего регистров в одном шрифте. Также, из-за дизайна или по ошибке, все основы могут иметь слегка отличающиеся значения ширины.

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

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

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

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

Задаёт позицию математической базовой линии в em-квадрате. Математическая базовая линия используется в математических символах для выравнивания, так же как нижняя базовая линия используется для выравнивания в латинском, греческом и кириллическом письме.

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

Если динамически загружаемый шрифт генерируется путём подразделения шрифта-предка, bbox должен быть тот же, что и у шрифта-предка.

Это расстояние в em-квадрате от базовой линии до высшей точки, достигаемой глифом, исключая любые акценты и знаки диакритики.

Это расстояние в em-квадрате от базовой линии до низшей точки, достигаемой глифом, исключая любые акценты и знаки диакритики.

Panose-1 это индустриальный стандарт классификации шрифтов TrueType и технологии подбора шрифтов. Система PANOSE состоит из набора десяти цифр, которые категоризируют ключевые атрибуты шрифта латиницы, процедуры классификации при создании этих чисел и программы Mapper, которая определяет ближайшее возможное совпадение в данном наборе шрифтов. Эта система может, с некоторыми изменениями, использоваться в греческом и кириллическом письме, но не подходит для однокамерного и идеографического письма (еврейского, армянского, арабского, китайского/японского/корейского).

Обозначает репертуар глифов шрифта, относящийся к ISO 10646 (Unicode).Поскольку этот репертуар не сплошной (большинство шрифтов не покрывает весь ISO 10646), данный дескриптор содержит блоки диапазона, которые частично покрывают диапазон (не даётся никаких гарантий полного покрытия), и используется для отказа от неподходящих шрифтов (тех, которые не имеют требуемых глифов). Он не указывает, что шрифт определённо имеет нужные глифы, а только что есть смысл загрузить шрифт и просмотреть его. См. детальную информацию о родственных документах в [ISO10646] .

Этот метод может быть расширен в будущем для размещения символов Unicode без изменения синтаксиса и с сохранением существующего содержимого.

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

Имеются другие классификации письма, такие как система Monotype (см. [MONOTYPE] ) и предлагаемая система ISO. Эти системы плохо расширяются.

В связи с этим, в данной спецификации используется классификация репертуаров глифов в диапазоне символов ISO 10646, которые (символы) могут быть представлены определённым шрифтом. Эта система может расширяться для покрытия будущих дополнений.

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

Это ширина вертикальной (или приблизительно вертикальной) основы глифов. Эта информация часто вводится для подсказки и может не быть непосредственно доступной в шрифтах некоторых форматов. Этот показатель нужен для доминантной вертикальной основы шрифта, поскольку могут быть различные группировки вертикальных основ (напр., одна главная, другая - облегчённого веса, как для M или N верхнего регистра).

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

Значения свойства 'font-weight' задаются по цифровой шкале, где значение '400' (или 'normal') соответствует шрифту "normal" данного семейства шрифтов. Название веса, ассоциированное с этим шрифтом, обычно: Book, Regular, Roman, Normal или иногда Medium.

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

[x]. Если семейство шрифтов уже использует шкалу из 9 цифровых значений (как в OpenType, например), весы шрифтов должны отображаться напрямую.

[x]. Если оба типа помечены как Medium и один из Book, Regular, Roman или Normal, тогда Medium устанавливается в '500'.

[x]. Шрифт, помеченный "Bold", часто соответствует значению веса '700'.

[x]. Если в семействе имеется менее 9 весов, алгоритм по умолчанию для заполнения "дыр" следующий. Если не назначено '500', оно назначается тому же шрифту, что и с '400'. Если не назначено любое из значений: '600', '700', '800' или '900', оно назначается тому же шрифту, который имеет ближайшее значение более тёмного ключевого слова, если оно имеется, в противном случае - тому, который имеет ближайшее значение более светлого. Если не назначено любое из значений: '300', '200' или '100', оно назначается тому же шрифту, который имеет ближайшее значение более светлого ключевого слова, если оно имеется, в противном случае - тому, который имеет ближайшее значение более тёмного.

Нет никаких гарантий, что в наличии будет более тёмный шрифт для каждого значения 'font-weight'; например, некоторые шрифты могут иметь только разновидности normal и bold, другие могут иметь 8 разновидностей различного веса.

Следующие два примера показывают типичные случаи отображения.

Предположим, что в семействе "Rattlesnake" имеется четыре веса, от светлого до тёмного: Regular, Medium, Bold, Heavy.

Предположим, что в семействе "Ice Prawn" имеется шесть весов: Book, Medium, Bold, Heavy, Black, ExtraBlack. Заметьте, что в этом примере ПА решает не назначать цифровое значение для "Example2 ExtraBlack".

В следующем примере определена специфическая разновидность шрифта - Alabama Italic. Описание шрифта panose и URI-источник для запроса шрифта на сервере truetype также предоставлены. Дескрипторы font-weight и font-style предоставлены для описания шрифта. Объявление также сообщает, что вес совпадёт с любым запросом в диапазоне от 300 до 500. Семейство шрифтов - Alabama, а имя украшенного шрифта - Alabama Italic.

'text-decoration'

Значение: none | [ underline || overline || line-through || blink ] | inherit

Начальное: none

Применяется: ко всем элементам

Наследуется: нет (см. текст)

Процентное: N/A

Носитель: визуальный

Это свойство описывает декоративное оформление текста элемента. Если это свойство специфицировано для элемента уровня блока, оно воздействует на всех потомков инлайн-уровня данного элемента. Если оно специфицировано (или влияет на) элемент инлайн-уровня, оно воздействует на все боксы, генерируемые элементом. Если элемент не имеет содержимого или текста (например, элемент IMG в HTML), ПА обязаны игнорировать данное свойство.

Значения имеют следующий смысл:

none

Не производит декоративное оформление.

underline

Каждая строка текста подчёркнута.

overline

Каждая строка текста имеет над собой линию.

line-through

Каждая строка текста имеет посередине перечёркивающую линию.

blink

Текст мигает. От соответствующих ПА не требуется поддерживать это значение.

Цвет(а), необходимый для декорирования текста, должен быть получен из значения свойства 'color'.

Это свойство не наследуется, но боксы - потомки бокса блока должны быть сформатированы с тем же оформлением (например, все должны быть с подчёркиванием). Цвет оформления должен остаться тем же самым, даже если элементы-потомки имеют другие значения 'color'.

В следующем примере для HTML, текстовое содержимое всех элементов A будет подчёркнуто:

'text-shadow'

Значение: none | [<color> || <length> <length> <length>? ,]* [<color> || <length> <length> <length>?] | inherit

Начальное: none

Применяется: ко всем элементам

Наследуется: нет (см. текст)

Процентное: N/A

Носитель: визуальный

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

Каждый эффект оттенения обязан специфицировать смещение оттенения и может по выбору специфицировать радиус рассеяния и цвет тени.

Смещение оттенения специфицируется двумя значениями <length>, указывающими расстояние от текста. Первое значение специфицирует расстояние по горизонтали справа от текста. Отрицательное значение по горизонтали помещает тень слева от текста. Второе значение специфицирует вертикальное расстояние под текстом. Отрицательное значение по вертикали помещает тень сверху от текста.

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

Значение цвета может быть по выбору специфицировано до или после значений length эффекта оттенения. Значение цвета будет использоваться как базис эффекта оттенения. Если цвет не специфицирован, вместо него будет использоваться значение свойства 'color'.

Оттенения текста могут использоваться вместе с псевдоэлементами :first-letter и :first-line.

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

H1 { text-shadow: 0.2em 0.2em }

Следующий пример установит тень справа и снизу от текста элемента. Тень будет иметь радиус рассеяния 5px и красный цвет:

H2 { text-shadow: 3px 3px 5px red }

Следующий пример специфицирует список эффектов оттенения. Первая тень будет справа и снизу от текста элемента и будет красного цвета без рассеяния. Вторая тень будет перекрывать первую и будет жёлтая, с рассеянием и размещена влево и ниже текста. Третья тень будет справа и сверху над текстом. Поскольку у неё цвет не специфицирован, будет использоваться значение свойства 'color' элемента:

H2 { text-shadow: 3px 3px red, yellow -3px 3px 2px, 3px -3px }

Рассмотри этот пример:

SPAN.glow { background: white; color: white; text-shadow: black 0px 0px 5px; }

Здесь свойства 'background' и 'color' имеют одинаковые значения, и свойство 'text-shadow' используется для создания эффекта "солнечного затмения":

[D]

Примечание. Это свойство не определено в CSS1. Некоторые эффекты оттенения (такие как в последнем примере) могут делать текст невидимым в ПА, поддерживающих только CSS1.

'caption-side'

Значение: top | bottom | left | right | inherit

Начальное: top

Применяется: к элементам 'table-caption'

Наследуется: да

Процентное: N/A

Носитель: визуальный

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

Значения имеют следующий смысл:

top

Позиционирует бокс заголовка над боксом таблицы.

bottom

Позиционирует бокс заголовка под боксом таблицы.

left

Позиционирует бокс заголовка слева от бокса таблицы.

right

Позиционирует бокс заголовка справа от бокса таблицы.

Заголовки сверху или снизу от элемента 'table' форматируются совершенно так же, как если бы они были элементами блока до и после таблицы, за исключением того, что (1) они наследуют наследуемые свойства таблицы и (2) они не рассматриваются как бокс блока для целей элементов 'compact' или 'run-in', которые могут предшествовать таблице.

Заголовок сверху или снизу от бокса таблицы ведёт себя подобно боксу блока и при расчётах ширины; ширина вычисляется относительно ширины бокса таблицы содержащего блока.

Для заголовков слева или справа от бокса таблицы значение, отличное от 'auto' для 'width', устанавливает ширину явно, но 'auto' сообщает ПА, что нужно выбрать "приемлемую ширину". Она может варьироваться от "самого узкого возможного бокса" до "строки", поэтому мы рекомендуем, чтобы пользователи не специфицировали 'auto' для ширины левых и правых заголовков.

Чтобы выровнять содержимое заголовка по горизонтали внутри бокса заголовка, используйте свойство 'text-align'.