Свойства объёма звука: 'volume'

'volume'

Значение:	<number> \| <percentage> \| silent \| x-soft \| soft \| medium \| loud \| x-loud \| inherit
Начальное:	medium
Применяется:	ко всем элементам
Наследуется:	да
Процентное:	относительно наследуемого значения
Носитель:	звуковой

Объём означает величину размаха синусоиды. Другими словами, сильно изогнутая синусоида голоса при объёме 50 может давать пики выше данного значения. Полные значения, вероятно, будут более комфортными для человека, например, при физическом управлении объёмом звука (что будет пропорционально увеличивать значения и 0, и 100); единственное, что делает данное свойство, это определяет динамический диапазон.

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

Любое число от '0' до '100'. '0' - это минимальный слышимый уровень громкости, а 100 соответствует максимальному комфортному уровню. <percentage>

Процентные значения вычисляются относительно наследуемого значения и затем выравниваются в диапазоне от '0' до '100'. silentВообще нет звука. Значение '0' не означает то же самое, что 'silent'. x-softТо же, что '0'.softТо же, что '25'. mediumТо же, что '50'.loudТо же, что '75'. x-loudТо же, что '100'.

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

Вот некоторые примеры:

Браузер для использования в автомобиле имеет установки с учётом сильных посторонних шумов. '0' будет довольно высоким уровнем, а '100' - очень высоким. Речь будет хорошо прослушиваться сквозь уличный шум, но общий динамический диапазон будет ограничен. Автомобили с улучшенной звукоизоляцией могут обеспечить более широкий динамический диапазон.

Другой браузер используется в квартире поздно ночью или в учебной аудитории. '0' - установлено на очень низкий уровень, а '100' - тоже на довольно низкий. Как и в первом примере, динамический диапазон довольно ограничен. Реальный объём звука здесь небольшой, а в первом примере - слишком высокий. В тихом изолированном помещении установлен домашний театр hi-fi. '0' - установлен довольно низко и '100' - довольно высоко; динамический диапазон весьма широк.

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

Свойства паузы: 'pause-before', 'pause-after' и 'pause'

'pause-before'

Значение:	<time> \| <percentage> \| inherit
Начальное:	зависит от ПА
Применяется:	ко всем элементам
Наследуется:	нет
Процентное:	см. текст
Носитель:	звуковой

'pause-after'

Значение:	<time> \| <percentage> \| inherit
Начальное:	зависит от ПА
Применяется:	ко всем элементам
Наследуется:	нет
Процентное:	см. текст
Носитель:	звуковой

Это свойство специфицирует паузу до (или после) произнесения содержимого элемента.
Значения имеют следующий смысл:

<time>

Выражает паузу в абсолютных единицах времени (секундах и миллисекундах). <percentage>

Относится к инверсии значения свойства 'speech-rate'. Например, если speech-rate - 120 слов в минуту (т.е. одно слово в полсекунды, или 500ms), тогда 'pause-before' в 100% означает паузу в 500ms, а 'pause-before' в 20% означает 100ms.

Пауза вставляется между содержимым элементов и любым содержимым 'cue-before' или 'cue-after'.

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

'pause'

Значение:	[ [<time> \| <percentage>]{1,2} ] \| inherit
Начальное:	зависит от ПА
Применяется:	ко всем элементам
Наследуется:	нет
Процентное:	см. описания 'pause-before' и 'pause-after'
Носитель:	звуковой

Свойство 'pause' это сокращение для 'pause-before' и 'pause-after'. Если заданы два значения, то первое является 'pause-before', а второе - 'pause-after'. Если задано только одно значение, оно применяется для обоих свойств.

Пример(ы):

H1 { pause: 20ms } /* pause-before: 20ms; pause-after: 20ms */ H2 { pause: 30ms 40ms } /* pause-before: 30ms; pause-after: 40ms */ H3 { pause-after: 10ms } /* pause-before: ?; pause-after: 10ms */

Свойства поля: 'margin-top', 'margin-right', 'margin-bottom', 'margin-left' и 'margin'

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

Свойства, определённые в этом разделе, относятся к типу значений <margin-width>, который может устанавливаться в:

Специфицирует фиксированную ширину. <percentage>

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

сгенерированного бокса. Это верно для 'margin-top' и 'margin-bottom' везде, кроме контекста страницы, где процентные значения относятся к высоте бокса страницы. auto

См. расчёт ширины и полей.

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

'margin-top', 'margin-right', 'margin-bottom', 'margin-left'

Значение:	<margin-width> \| inherit
Начальное:	0
Применяется:	ко всем элементам
Наследуется:	нет
Процентное:	относительно ширины содержащего блока
Носитель:	визуальный

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

Пример(ы):

H1 { margin-top: 2em }

'margin'

Значение:	<margin-width>{1,4} \| inherit
Начальное:	не определено для сокращённого свойства
Применяется:	ко всем элементам
Наследуется:	нет
Процентное:	относительно ширины содержащего блока
Носитель:	визуальный

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

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

Пример(ы):

BODY { margin: 2em } /* все поля установлены в 2em */ BODY { margin: 1em 2em } /* верхнее и нижнее = 1em, правое и левое = 2em */ BODY { margin: 1em 2em 3em } /* верхнее=1em, правое=2em, нижнее=3em, левое=2em */

Последнее правило эквивалентно следующему:BODY { margin-top: 1em; margin-right: 2em; margin-bottom: 3em; margin-left: 2em; /* копируется из противоположной стороны (из правой) */ }

Свойства рамки

Свойства рамки специфицируют ширину, цвет и стиль области рамки бокса. Эти свойства применимы ко всем элементам.

Примечание.

Особенно в HTML, ПА могут отображать рамки определённых элементов (например, кнопок, меню и т.п.) иначе, чем у "обычных" элементов.

Свойства разговора: 'speak'

'speak'

Значение:	normal \| none \| spell-out \| inherit
Начальное:	normal
Применяется:	ко всем элементам
Наследуется:	да
Процентное:	N/A
Носитель:	визуальный

Это свойство специфицирует, будет ли текст представляться в звуке и - если да - в какой манере (примерно как свойство 'display').

Возможные значения:

none

Вырезает звуковое представление, так что элемент не требует времени для представления. Обратите внимание, что потомки могут переопределять это значение и будут звучать. (Для того, чтобы точно отменить представление элемента и его потомков, используйте свойство 'display').

normalИспользует зависимые от языка правила произношения для представления элемента и его потомков.

spell-outТекст произносится побуквенно (используется для акронимов и аббревиатур).

Заметьте разницу между элементом, чьё свойство 'volume' имеет значение 'silent', и элементом, чьё свойство 'speak' установлено в 'none'. Первый отнимает столько же времени, как если бы он произносился, включая паузы до и после элемента, но звук не будет генерироваться. Второй не отнимает времени и не представляется (хотя его потомки - могут).

Свойства речи: 'speak-punctuation' и 'speak-numeral'

Дополнительное свойство речи, speak-header, описано в главе о таблицах.

'speak-punctuation'

Значение:	code \| none \| inherit
Начальное:	none
Применяется:	ко всем элементам
Наследуется:	да
Процентное:	N/A
Носитель:	звуковой

Специфицирует, как произносится пунктуация.

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

code

Такие знаки препинания, как точка с запятой, скобки и так далее, произносятся буквально. none

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

'speak-numeral'

Значение:	digits \| continuous \| inherit
Начальное:	continuous
Применяется:	ко всем элементам
Наследуется:	да
Процентное:	N/A
Носитель:	звуковой

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

digits

Произносит числа отдельными цифрами. Например, "237" произносится "два три семь". continuous

Числа произносятся полностью. Например, "237" произносится "двести тридцать семь". Словесное представление зависит от языка.

Свойства реплики: 'cue-before', 'cue-after' и 'cue'

'cue-before'

Значение:	<uri> \| none \| inherit
Начальное:	none
Применяется:	ко всем элементам
Наследуется:	нет
Процентное:	N/A
Носитель:	звуковой

'cue-after'

Значение:	<uri> \| none \| inherit
Начальное:	none
Применяется:	ко всем элементам
Наследуется:	нет
Процентное:	N/A
Носитель:	звуковой

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

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

<uri>

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

none Звуковая иконка не специфицирована.

Пример(ы):

A {cue-before: url("bell.aiff"); cue-after: url("dong.wav") } H1 {cue-before: url("pop.au"); cue-after: url("pop.au") }

'cue'

Значение:	[ <'cue-before'> \|\| <'cue-after'> ] \| inherit
Начальное:	не определено для сокращённого свойства
Применяется:	ко всем элементам
Наследуется:	нет
Процентное:	N/A
Носитель:	звуковой

Свойство 'cue' является сокращением для установок 'cue-before'

и 'cue-after'. Если заданы два значения, первое является 'cue-before', а второе - 'cue-after'. Если задано только одно значение, оно применяется к обоим свойствам.

Пример(ы):

Следующие два правила эквивалентны: H1 {cue-before: url("pop.au"); cue-after: url("pop.au") } H1 {cue: url("pop.au") }

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

Информацию о других видах техники генерации содержимого см. в псевдоэлементах :before и :after.

Свойства спецификации шрифта

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 используются для описания желаемого вида текста документа. Дескрипторы шрифта, напротив, используются для описания характеристик шрифта, чтобы мог быть выбран походящий шрифт для создания нужного представления.

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

Свойства заполнения: 'padding-top'

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

Свойства, определённые в этом разделе, относятся к типу значений <padding-width>, который может устанавливаться в:

Специфицирует фиксированную ширину. <percentage>

Процентное, высчитывается относительно ширины содержащего блока, генерирующего бокс, в том числе и для 'padding-top' и 'padding-bottom'.

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

'padding-top', 'padding-right', 'padding-bottom', 'padding-left'

Значение:	<padding-width> \| inherit
Начальное:	0
Применяется:	ко всем элементам
Наследуется:	нет
Процентное:	относительно ширины содержащего блока
Носитель:	визуальный

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

Пример(ы):

BLOCKQUOTE { padding-top: 0.3em }

'padding'

Значение:	<padding-width>{1,4} \| inherit
Начальное:	не определено для сокращённого свойства
Применяется:	ко всем элементам
Наследуется:	нет
Процентное:	относительно ширины содержащего блока
Носитель:	визуальный

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

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

Цвет поверхности области заполнения специфицируется через свойство 'background':

Пример(ы):

H1 { background: white; padding: 1em 2em; }

Вышеприведённый пример специфицирует вертикальное заполнение '1em' ('padding-top' и 'padding-bottom') и горизонтальное заполнение '2em' ('padding-right' и 'padding-left'). Единицы измерения 'em' относительны к размеру шрифта элемента: '1em' эквивалентно размеру используемого шрифта.

Свойство 'content'

'content'

Значение:	[ <string> \| <uri> \| <counter> \| attr(X) \| open-quote \| close-quote \| no-open-quote \| no-close-quote ]+ \| inherit
Начальное:	пустая строка
Применяется:	к псевдоэлементам :before и :after
Наследуется:	нет
Процентное:	N/A
Носитель:	все

Это свойство используется с псевдоэлементами :before и :after для генерации содержимого документа.
Значения имеют следующий смысл:

Содержимое текста (см. раздел строки).

<uri>

Значением является URI, обозначающий внешний ресурс. Если ПА не может поддержать данный ресурс (в связи с типами носителя), он может игнорировать данный ресурс. Примечание.CSS2 не предлагает механизмов для изменения размеров внедрённого объекта или для предоставления его текстуального описания, подобных атрибутам "alt" или "longdesc" для изображений HTML. Это может быть изменено в будущих уровнях CSS.<counter>

Счётчики/Counters могут быть специфицированы двумя различными функциями: 'counter()' или 'counters()'. Первая имеет две формы: 'counter(name)' или 'counter(name, style)'. Генерируемый текст является значением именованного счётчика от этой точки в структуре форматирования; он форматируется в указанном стиле

(по умолчанию - 'decimal'). Вторая функция имеет также две формы: 'counters(name, string)' или 'counters(name, string, style)'. Генерируемый текст является значениями всех счётчиков с данным именем от этой точки в структуре форматирования, разделёнными специфицированной строкой. Счётчики выводятся в указанном стиле(по умолчанию - 'decimal'). См. раздел автоматические счётчики и нумерация. open-quote и close-quote

Эти значения замещаются подходящей строкой свойства 'quotes'.

no-open-quote

и no-close-quote

Ничего не вставляют (пустая строка), но увеличивают (уменьшают) уровень вложения кавычек.

attr(X)

Эта функция возвращает строковое значение X для субъекта селектора. Строка не разбирается процессором CSS. Если субъект селектора не имеет атрибута X, возвращается пустая строка. Чувствительность к регистру имён атрибутов зависит от языка документа. Примечание. В CSS2 невозможно обращаться к значениям атрибутов других элементов селектора.

Свойство 'display' регулирует, куда помещается содержимое, в блок, инлайн- или маркированный бокс.

Авторы должны поместить объявление 'content'

в правила @media, если содержимое является медиа-чувствительным. Например, буквенный текст может использоваться для любой группы носителей, но изображения применяются только к медиа-группам visual + bitmap, а звуковые файлы применяются только к звуковым медиа-группам.

Примеры(ы):

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

@media aural { BLOCKQUOTE:after { content: url("beautiful-music.wav") } }

Примеры(ы):

Следующее правило вставляет текст атрибута "alt" HTML перед изображением. Если изображение не выводится, пользователь увидит текст "alt".

IMG:before { content: attr(alt)}

Авторы могут включать новые строки в генерируемое содержимое путём ввода escape-последовательности "\A" в одной из строк после свойства 'content'. Это вставляет форсированный обрыв строки, подобно элементу BR в HTML. См. дополнительную информацию об escape-последовательности "\A" в разделах "Строки" и "Символы и регистр".

Примеры(ы):

H1:before { display: block; text-align: center; content: "chapter\A hoofdstuk\A chapitre" }

Генерируемое содержимое не изменяет дерево документа. Обычно оно не передаётся обратно процессору языка документа (например, для повторного разбора).

Примечание. В будущих уровнях CSS свойство 'content' сможет принимать дополнительные значения, позволяя варьировать стиль участков генерируемого содержимого, но в CSS2 всё содержимое псевдоэлементов :before или :after имеет один стиль.

Свойство 'display'

'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':

P { display: block } EM { display: inline } LI { display: list-item } IMG { display: none } /* Не выводить изображения */

Соответствующие ПА HTML могут игнорировать свойство 'display'.

Сжатие полей

В этой спецификации выражение сжатие полей

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

В CSS2 вертикальные поля никогда не сжимаются.

Горизонтальные поля могут сжиматься между определёнными боксами:

Два или более смежных горизонтальных поля боксов блока при нормальном расположении

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

Вертикальные поля между обтекаемым боксом и любым другим боксом не сжимаются.

Поля абсолютно и относительно позиционированных боксов не сжимаются.

См. иллюстрацию сжимаемых полей в примере полей, заполнения и рамок.

Сжатие: свойство 'clip'

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

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

'clip'

Значение:	<shape> \| auto \| inherit
Начальное:	auto
Применяется:	к элементам уровня блока и к замещаемым элементам
Наследуется:	нет
Процентное:	N/A
Носитель:	визуальный

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

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

auto

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

<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 все сжимаемые области прямоугольны. Мы предполагаем в будущем расширение, разрешающее непрямоугольное сжатие.

Табличная модель CSS

Табличная модель CSS базируется на табличной модели HTML 4.0, структура таблиц которой почти параллельна визуальному представлению. В данной модели таблица состоит из необязательного заголовка и любого числа рядов столбцов. О табличной модели говорится, что в ней "ряды первичны", поскольку авторы явно специфицируют ряды, а не столбцы, в языке документа. Столбцы определяются после того, как будут специфицированы все ряды - первая ячейка каждого ряда принадлежит первому столбцу, вторая - второму столбцу и т.д.). Ряды и столбцы могут быть сгруппированы структурно, и это группирование отражается при представлении (например, рамка может быть прорисована вокруг группы рядов).

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

Модель CSS не требует, чтобы язык документа содержал элементы, соответствующие каждому из этих компонентов. Для языков документов (таких как приложения XML), не имеющих предопределённых табличных элементов, авторы обязаны отображать элементы языка документа в элементы таблицы; это делается с помощью свойства 'display'. Следующие значения 'display' назначают семантику таблицы произвольному элементу:

table (в HTML: TABLE)

Специфицирует, что элемент определяет таблицу уровня блока: это прямоугольный блок, участвующий в контексте форматирования блока.inline-table (в HTML: TABLE)

Специфицирует, что элемент определяет таблицу инлайн-уровня: это прямоугольный блок, участвующий в инлайн-контексте форматирования).table-row (в HTML: TR)

Специфицирует, что элемент - это ряд ячеек.table-row-group

(в HTML: TBODY) Специфицирует, что элемент группирует один или более рядов.table-header-group

(в HTML: THEAD) Похож на 'table-row-group', но для визуального форматирования; группа рядов всегда отображается до всех других рядов и групп рядов и после любого верхнего заголовка. Печатающие пользовательские агенты (ПА) могут повторять ряды футера на каждой странице, занимаемой таблицей.table-footer-group

(в HTML: TFOOT)

Похож на 'table-row-group', но для визуального форматирования; группа рядов всегда отображается после всех других рядов и групп рядов и перед любым нижним заголовком. Печатающие ПА могут повторять ряды футера на каждой странице, занимаемой таблицей.table-column (в HTML: COL)

Специфицирует, что элемент описывает столбец ячеек.table-column-group

(в HTML: COLGROUP)

Специфицирует, что элемент группирует один или более столбцов.table-cell (в HTML: TD, TH)

Специфицирует, что элемент представляет ячейку таблицы.table-caption (в HTML: CAPTION)

Специфицирует заголовок таблицы.

Элементы с 'display', установленным в 'table-column' или 'table-column-group', не выводятся (в точности так, как если бы они имели 'display: none'), но используются, поскольку могут иметь атрибуты, вводящие определённый стиль для представляемых ими столбцов.

Таблица стилей по умолчанию для HTML 4.0

в приложении иллюстрирует использование этих значений в HTML 4.0:

TABLE { display: table } TR { display: table-row } THEAD { display: table-header-group } TBODY { display: table-row-group } TFOOT { display: table-footer-group } COL { display: table-column } COLGROUP { display: table-column-group } TD, TH { display: table-cell } CAPTION { display: table-caption }

ПА могут игнорировать

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

Таблицы

Содержание

17.1 Введение

17.2 Табличная модель CSS

17.2.1 Анонимные объекты таблицы

17.3 Селекторы столбцов

17.4 Таблицы в модели визуального форматирования

17.4.1 Позиция и выравнивание заголовка

17.5 Вид содержимого таблицы

17.5.1 Слои и прозрачность таблицы

17.5.2 Алгоритмы ширины таблицы: свойство 'table-layout'

Фиксированный вывод таблицы

Автоматический вывод таблицы

17.5.3 Алгоритмы высоты таблицы

17.5.4 Горизонтальное выравнивание в столбце

17.5.5 Динамические эффекты рядов и столбцов

17.6 Рамки

17.6.1 Модель раздельных рамок

Обрамление пустых ячеек: свойство 'empty-cells'

17.6.2 Модель сжимающихся рамок

Разрешение конфликтов рамок

17.6.3 Стили рамок

17.7 Звуковое представление таблиц

17.7.1 Говорящие заголовки: свойство 'speak-header'

Таблицы в модели визуального форматирования

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

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

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

[D]

Диаграмма таблицы с заголовком вверху; нижнее поле заголовка сжато вместе с верхним полем таблицы.

Текст

Содержание

16.1 Отступы: свойство 'text-indent'

16.2 Выравнивание: свойство 'text-align'

16.3 Декоративные эффекты

16.3.1 Подчёркивание, надчёркивание, перечёркивание и мигание: свойство 'text-decoration'

16.3.2 Оттенение текста: свойство 'text-shadow'

16.4 Расстояния между буквами и словами: свойства 'letter-spacing' и 'word-spacing'

16.5 Капитализация: свойство 'text-transform'

16.6 Пробел: свойство 'white-space'

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

Тип содержимого text/css

Таблицы стилей CSS, находящиеся во внешнем файле, пересылаются по Internet как последовательность байтов, сопровождаемая информацией о кодировании (см. [HTML40], гл. 5). Структура переноса, называемая сущность сообщения, определена в RFC 2045 и RFC 2068 (см. [RFC2045] и [RFC2068]).

Сущность сообщения вместе с типом содержимого "text/css" представляет независимый документ CSS. Тип содержимого "text/css" был зарегистрирован в RFC 2138 ([RFC2318]).

Типы носителя

Содержание

7.1 Введение

7.2 Спецификация таблиц стилей, зависимых от типа носителя

7.2.1 Правило @media

7.3 Распознаваемые типы носителя

7.3.1 Группы носителей

Угловые значения

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

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

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

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

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

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

Угол вертикального наклона

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

Универсальный селектор

Универсальный селектор, записываемый "*", совпадает с именем любого типа элемента. Он совпадает с любым простым элементом в дереве документа.

Универсальный селектор не является единственным компонентом простого селектора, символ "*" может быть опущен. Например:

*[LANG=fr] и [LANG=fr] эквивалентны. *.warning и .warning эквивалентны. *#myid и #myid эквивалентны.

Управление генерацией боксов

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

Управление положением после поплавка: свойство 'clear'

'clear'

Значение:	none \| left \| right \| both \| inherit
Начальное:	none
Применяется:	к элементам уровня блока
Наследуется:	нет
Процентное:	N/A
Носитель:	визуальный

Это свойство указывает, какие стороны бокса(ов) элемента не могут быть смежными с ранее всплывшим боксом. (Может быть такое, что элемент сам имеет всплывающих потомков; свойство 'clear' не оказывает на них воздействия.)

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

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

left

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

right

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

both

Генерируемый бокс перемещается ниже всех всплывающих боксов элементов, появившихся ранее в документе-источнике.

none

Нет ограничений на позицию бокса относительно поплавков.

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

позиционирования поплавка. Прибавляется дополнительное условие (#10):

Верхний внешний край

поплавка обязан быть ниже нижнего внешнего края всех ранее всплывающих влево боксов (если 'clear: left'), или всех ранее всплывающих вправо боксов (если 'clear: right'), или обоих ('clear: both').

URL + URN = URI

URL (Uniform Resource Locator, см. [RFC1738]

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

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

Пример(ы):

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

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

Пример(ы):

Пример без кавычек: LI { list-style: url(http://www.redballs.com/redball.png) disc }

Скобки, запятые, пробельные символы, одинарные (') и двойные (") кавычки в URI обязаны вводиться с помощью escape-последовательностей с обратным слэшем: '\(', '\)', '\,'.

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

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

Пример(ы):

Предположим, имеется такое правило:

BODY { background: url("yellow") }

размещённое в таблице стилей с URI:

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

Фон элемента BODY в документе-источнике будет заполнен каким-нибудь изображением, обозначенный ресурсом URI:

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

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

Уровень блока, незамещаемые

Если 'top', 'bottom', 'margin-top'

или 'margin-bottom'

- 'auto', их вычисленное значение - '0'. Если 'height'

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

Уровень блока, незамещаемые элементы при нормальном всплывании

Если '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', их вычисленные значения равны.

Установка значений свойств, Каскадирование и Наследование

Содержание

6.1 Специфицированные, вычисленные и текущие значения

6.1.1 Специфицированные значения

6.1.2 Вычисленные значения

6.1.3 Реальные (текущие) значения

6.2 Наследование

6.2.1 Значение 'inherit'

6.3 Правило @import

6.4 Каскад

6.4.1 Порядок каскадирования

6.4.2 Правила !important

6.4.3 Вычисление специфики селектора

6.4.4 Старшинство не-CSS подсказок

Увеличение

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

При увеличении страницы ПАгенты должны выдерживать соотношения между позиционированными элементами.

Верхняя базовая линия

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

Вид содержимого таблицы

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

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

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

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

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

таблицы.

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

Ячейки могут захватывать несколько рядов и столбцов. (Хотя CSS2 не определяет, как вычисляется количество захваченных рядов или столбцов, ПА может иметь специальные сведения о документе-источнике; будущая версия CSS может предоставить способ выражения этих сведений в синтаксисе CSS.) Каждая ячейка, следовательно, это прямоугольный бокс шириной и высотой в одну или более ячеек сетки. Верхний ряд этого прямоугольника находится в ряду, специфицированном родителем ячейки. Прямоугольник обязан находиться как можно левее, но не может перекрывать любой другой бокс ячейки и обязан находиться справа от всех ячеек в том же ряду, определённых ранее в документе-источнике. (Это ограничение остаётся в силе, если свойство 'direction' таблицы - 'ltr'; если же 'direction' - 'rtl', "лево" и "право" в предыдущем предложении меняются местами.)

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

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

Вот два примера. Первый - документ HTML:

<TABLE> <TR><TD>1 <TD rowspan="2">2 <TD>3 <TD>4 <TR><TD colspan="2">5 </TABLE>

<TABLE> <ROW><CELL>1 <CELL rowspan="2">2 <CELL>3 <CELL>4 <ROW><CELL colspan="2">5 </TABLE>

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

[D]

Слева - возможное представление ошибочной таблицы HTML 4.0; справа - единственно возможное форматирование такой же не-HTML таблицы.

Видимость: свойство 'visibility'

'visibility'

Значение:	visible \| hidden \| collapse \| inherit
Начальное:	inherit
Применяется:	ко всем элементам
Наследуется:	нет
Процентное:	N/A
Носитель:	визуальный

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

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

visible

Генерируемый бокс виден. hidden

Генерируемый бокс невидим (полностью прозрачен), но влияет на структуру. collapse

См. также раздел динамические эффекты рядов и столбцов в таблицах. Если используется не с рядами или столбцами, 'collapse' имеет то же значение, что и 'hidden'.

Это свойство может использоваться вместе со скриптами для создания динамических эффектов.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <STYLE type="text/css">  </STYLE> </HEAD> <BODY> <P>Choose a suspect:</P> <DIV id="container1"> <IMG alt="Al Capone" width="100" height="100" src="suspect1.jpg"> <P>Name: Al Capone</P> <P>Residence: Chicago</P> </DIV>

<DIV id="container2"> <IMG alt="Lucky Luciano" width="100" height="100" src="suspect2.jpg"> <P>Name: Lucky Luciano</P> <P>Residence: New York</P> </DIV>

Визуальные эффекты

Содержание

11.1 Переполнение и сжатие

11.1.1 Переполнение: свойство 'overflow'

11.1.2 Сжатие: свойство 'clip'

11.2 Видимость: свойство 'visibility'

Вложение счётчиков и область видимости

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

Пример(ы):

Так, следующего достаточно для нумерации вложенных элементов списка. Результат очень похож на применение установки 'display:list-item' и 'list-style: inside' в элементе LI:

OL { counter-reset: item } LI { display: block } LI:before { content: counter(item) ". "; counter-increment: item }

Самовложение базируется на том принципе, что каждый элемент, имеющий 'counter-reset' для счётчика X, создаёт новый счётчик X, область видимости

которого - элемент, его предшествующие родственники и все потомки элемента и его предшествующих родственников.

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

Если мы обозначим с помощью item[n] nый экземпляр счётчика "item" и "(" and ")" - начало и конец области видимости, то следующий фрагмент HTML будет использовать указанные счётчики. (Мы используем ту же таблицу стилей, что и в предыдущем примере).

Функция 'counters()' генерирует строку, составленную из значений всех счётчиков с тем же самым именем, разделённых заданной строкой.

Пример(ы):

Следующая таблица стилей нумерует вложенные элементы списка как "1", "1.1", "1.1.1" и т.д.

OL { counter-reset: item } LI { display: block } LI:before { content: counters(item, "."); counter-increment: item }

Время

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

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

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

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

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

Всплывание, незамещаемые элементы

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

Всплывание, замещаемые элементы

Если 'left', 'right', 'margin-left' или 'margin-right'

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

Вставка кавычек с применением свойства '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 и вставляет одиночную закрывающую кавычку в конце:

BLOCKQUOTE P:before { content: open-quote } BLOCKQUOTE P:after { content: no-close-quote } BLOCKQUOTE P.last:after { content: close-quote }

Это относится к последнему параграфу, маркированному классом "last", поскольку нет селекторов, которые могут совпадать с последним потомком элемента.

Для симметрии имеется также ключевое слово 'no-open-quote', которое ничего не вставляет, а увеличивает глубину закавычивания на единицу.

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

Пример(ы):

Французский внутри английского:

The device of the order of the garter is “Honi soit qui mal y pense.”

Английский внутри французского:Il disait: « Il faut mettre l'action en ‹ fast forward ›.»

Таблица стилей типа следующей установит свойство 'quotes' таким образом, что 'open-quote' и 'close-quote' будут корректно работать во всех элементах. Это правила для документов, содержащих только английский, французский или оба этих языка. Одно правило понадобится для каждого дополнительного языка. Обратите внимание на использование комбинатора-потомка (">") для установки кавычек в элементы на базе языка окружающего текста:

[LANG|=fr] > * { quotes: "«" "»" "\2039" "\203A" } [LANG|=en] > * { quotes: "\201C" "\201D" "\2018" "\2019" }

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

[LANG|=fr] > * { quotes: "«" "»" "‹" "›" } [LANG|=en] > * { quotes: "“" "”" "‘" "’" }

Втягивающиеся боксы (run-in)

Бокс run-in

ведёт себя так:

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Пример бокса run-in</TITLE> <STYLE type="text/css"> H3 { display: run-in } </STYLE> </HEAD> <BODY> <H3>Заголовок run-in.</H3> <P>И параграф текста, следующий за ним. </BODY> </HTML>

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

Заголовок run-in. И параграф текста, следующий за ним.

Свойства run-in-элемента наследуются от родителя в дереве-источнике, а не от бокса блока, частью которого он визуально является.

Информацию о том, как compact-боксы взаимодействуют с генерируемым содержимым, см. в разделе Генерируемое содержимое.

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

Звуковое представление документа, обычно используемое людьми с проблемами зрения, сочетает речевой синтез и "звуковые иконки". Часто такое звуковое представление происходит при конвертации документа в обычный текст и его перенаправлении в устройство чтения с экрана -- программу или физическое устройство, которое просто считывает все символы на экране. Результатом этого является менее эффективное представление, чем могло бы быть, если бы сохранялась структура документа. Свойства таблиц стилей для звукового представления могут использоваться совместно с визуальными свойствами (смешанный носитель) или как звуковая альтернатива визуальному представлению.
Помимо очевидного преимущества - повышения доступности, есть и улучшение использования в других условиях прослушивания информации: использовании в автомобиле, индустриальных и медицинских системах документации (intranet), домашние развлечения и помощь пользователям, обучающимся чтению или имеющим проблемы с чтением.
При использовании звуковых свойств, канва состоит из трёхмерного физического пространства (звуковой среды) и временнoго пространства (можно специфицировать звуки до, во время и после других звуков). Свойства CSS позволяют также авторам изменять качество синтезируемой речи (тип голоса, частоту, инфлексию и т.п.).
Пример(ы):
H1, H2, H3, H4, H5, H6 { voice-family: paul; stress: 20; richness: 90; cue-before: url("ping.au") } P.heidi { azimuth: center-left } P.peter { azimuth: right } P.goat { volume: x-soft }
Здесь речевой синтезатор направляется в речевые заголовки в голосе (своего рода "аудио-шрифт"), называемом "paul", ровным звуком, но очень мягким голосом. Перед произнесением заголовков звуковой отрывок будет проигрываться из заданного URL. Параграфы класса "heidi" будут идти слева (если звуковая система способна воспроизводить пространственное аудио), а параграфы класса "peter" - справа. Параграфы класса "goat" будут звучать очень мягко.

Одним из важнейших свойств таблиц стилей является то, что они специфицируют представление документа на различных носителях информации: на экране, бумаге, в речевом синтезаторе, в брайль-устройстве и т.п.
Некоторые свойства CSS созданы для конкретных носителей (например, свойство 'cue-before' - для звуковых пользовательских агентов (ПА)). Иногда, однако, таблицы стилей для различных носителей могут использовать одно и то же свойство, но при этом требуют для него различных значений. Например, свойство 'font-size' используется и для экрана, и для носителя печати. Однако эти два носителя достаточно различны, чтобы требовать различных значений для общего свойства; документ обычно требует для экрана более крупный шрифт, чем для печати. Опыт показывает также, что шрифты sans-serif лучше читаются на экране, а шрифты с засечками (serif) лучше читаются на бумаге. Исходя из этих соображений, необходимо указывать, что таблица стилей - или раздел таблицы стилей - применяется к носителю определённого типа.

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

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

Шрифт - это набор глифов, соблюдающих один базовый мотив в соответствии с дизайном, размером, внешним видом и другими атрибутами, ассоциированными со всем набором, и отображение из символов в абстрактные глифы.
Визуальный пользовательский агент (ПА) обязан рассматривать следующие вопросы, прежде чем отображать символы:
Имеется ли, прямо или наследуемо, шрифт, специфицированный для данного символа? Доступен ли этот шрифт для ПА? Если это так, какой глиф(ы) отображает этот символ или последовательность символов? Если нет, что нужно сделать? Подставлять ли другой шрифт? Может ли шрифт быть синтезирован? Может ли он быть получен из Web?
И в CSS1, и в CSS2 авторы специфицируют характеристики шрифта в серии свойств.
То, как ПА обрабатывают свойства, если нет совпадения шрифта на стороне клиента, было расширено в CS2 по сравнению с CSS1. В CSS1 принималось, что все шрифты представлены в клиентской системе и идентифицируются исключительно по имени. Альтернативные шрифты могли быть специфицированы через свойства, но в то же время у ПА не было способа предложить пользователю какие-либо другие шрифты (даже стилистически подобные шрифты, которые были доступны ПА), кроме общих шрифтов по умолчанию.
В CSS2 всё это изменилось, и теперь появилось больше свободы:
для авторов таблиц стилей: описывать необходимые шрифты; для пользовательских агентов: в выборе шрифтов, если затребованный авторами шрифт непосредственно не доступен.
CSS2 улучшает подбор шрифтов на стороне клиента, делает возможным синтезирование шрифта и прогрессирующее отображение, а также загрузку шрифтов из Web. Это улучшает возможности 'WebFonts'.
В шрифтовой модели CSS2, как и в CSS1, каждый ПА имеет в своём распоряжении базу данных (БД) шрифтов.

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

Некоторые возможности переноса:
Перенос одного страничного бокса на один лист (например, односторонняя печать). Перенос двух страничных боксов на две стороны одного листа (например, двухсторонняя печать). Перенос N (маленького) страничного бокса на один лист (называется "n-up"). Перенос одного (большого) страничного бокса на N x M листов (называется "tiling"). Создание подписей. Подпись, это группа страниц, напечатанных на листе, которые после брошюрования и обрезки выглядят, как книга, и расположены в соответствующем порядке. Печать одного документа в несколько потоков печати. Вывод в файл.
Хотя CSS2 не специфицирует то, как ПА переносят страничные боксы на листы, не даётся также и определённого механизма для того, чтобы сообщить ПА о размерах и ориентации целевого листа.

Таблицы представляют взаимоотношения между данными. Авторы специфицируют эти взаимоотношения на языке документа и их представление в CSS двумя способами - визуально и звуком.
Авторы могут специфицировать визуальное форматирование таблицы как прямоугольной сетки ячеек. Ряды и столбцы ячеек можно организовать в группы рядов и столбцов. Ряды, столбцы, группы рядов, группы столбцов и ячейки могут иметь вокруг себя порисованные рамки (в CSS2 есть две модели рамок). Авторы могут выровнять данные в ячейках по вертикали и по горизонтали и выровнять данные во всех ячейках ряда или столбца.
Авторы могут также специфицировать звуковое представление таблицы: то, как заголовки и данные будут звучать. На языке документа авторы могут помечать лэйблами ячейки и группы ячеек так, что при звуковом отображении заголовки ячеек будут произноситься перед данными ячеек. Фактически это "сериализует" таблицу: пользователи, прослушивающие таблицу, услышат последовательность заголовков и последующих данных.
Пример(ы):
Вот простая таблица из трёх рядов и трёх столбцов, написанная в HTML 4.0:
<TABLE> <CAPTION>Это простая таблица 3x3</CAPTION> <TR id="row1"> <TH>Header 1 <TD>Cell 1 <TD>Cell 2 <TR id="row2"> <TH>Header 2 <TD>Cell 3 <TD>Cell 4 <TR id="row3"> <TH>Header 3 <TD>Cell 5 <TD>Cell 6 </TABLE>
Этот код создаёт одну таблицу (элемент TABLE), три ряда (элементы TR), три заголовочных ячейки (элементы TH) и шесть ячеек данных (элементы TD). Обратите внимание, что три столбца в этом примере специфицированы неявно: в таблице столько столбцов, сколько затребовано заголовочными ячейками и ячейками данных.
Следующее правило CSS центрирует текст по горизонтали в заголовочных ячейках и выводит данные шрифтом, имеющим вес bold:
TH { text-align: center; font-weight: bold }
Следующее правило выравнивает текст заголовочных ячеек по их базовой линии и центрирует текст по вертикали в каждой ячейке данных:
TH { vertical-align: baseline } TD { vertical-align: middle }

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

Выбор схемы позиционирования: свойство 'position'

Свойства '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, как здесь:

Пример(ы):

@media screen { H1#first { position: fixed } } @media print { H1#first { position: static } }

Выбор шрифта

Вторая фаза механизма шрифтов CSS2 - выбор в ПА шрифта на базе специфицированных автором свойств шрифта, доступных шрифтов и т.д. Детали алгоритма подбора шрифта

рассматриваются ниже.

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

совпадение имени шрифта

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

смысловое совпадение

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

синтез

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

загрузка

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

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

Примечание.

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

Вычисление ширины и полей

Вычисленные значения свойств 'width', 'margin-left', 'margin-right', 'left' и 'right' для элементов зависят от типа генерируемого бокса и друг от друга. В принципе вычисленные значения - те же, что и специфицированные, с 'auto', замещаемым другим подходящим значением, но есть и исключения. Должны быть рассмотрены следующие варианты:

инлайн, незамещаемые элементы инлайн, замещаемые элементы уровень блока, незамещаемые элементы при нормальном всплывании уровень блока, замещаемые элементы при нормальном всплывании всплывание, незамещаемые элементы всплывание, замещаемые элементы абсолютно позиционированные незамещаемые элементы абсолютно позиционированные замещаемые элементы

Пункты 1-6 включают относительное позиционирование.

Вычисление специфики селектора

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

вычисляется количество атрибутов ID в селекторе (= a) вычисляется количество других атрибутов и псевдоклассов в селекторе (= b) вычисляется количество имён элементов в селекторе (= c) игнорируются псевдоэлементы.

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

Пример(ы):

* {} /* a=0 b=0 c=0 -> специфика = 0 */ LI {} /* a=0 b=0 c=1 -> специфика = 1 */ UL LI {} /* a=0 b=0 c=2 -> специфика = 2 */ UL OL+LI {} /* a=0 b=0 c=3 -> специфика = 3 */ H1 + *[REL=up]{} /* a=0 b=1 c=1 -> специфика = 11 */ UL OL LI.red {} /* a=0 b=1 c=3 -> специфика = 13 */ LI.red.level {} /* a=0 b=2 c=1 -> специфика = 21 */ #x34y {} /* a=1 b=0 c=0 -> специфика = 100 */

В HTML значения атрибута "style" элемента являются правилами таблицы стилей. Эти правила не имеют селекторов, но для целей шага 3 каскадного алгоритма они рассматриваются как имеющие селектор ID (специфика: a=1, b=0, c=0). Для целей шага 4 они рассматриваются после всех других правил.

<HEAD> <STYLE type="text/css"> #x97z { color: blue } </STYLE> </HEAD> <BODY> <P ID=x97z style="color: red"> </BODY>

В данном примере цвет элемента P будет красным. Хотя специфика - одна и та же для обоих объявлений, объявление атрибута "style" переопределит объявление в элементе STYLE в соответствии с каскадным правилом 4.

Вычисление высоты и полей

Для вычисления значений 'top', 'margin-top', 'height', 'margin-bottom'

и 'bottom' обязано быть проведено разграничение между различными видами боксов:

Пункты 1-6 включают относительное позиционирование.

Вычисленные значения

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

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

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

Выравнивание: свойство 'text-align'

'text-align'

Значение:	left \| right \| center \| justify \| <string> \| inherit
Начальное:	зависит от ПА и направления письма
Применяется:	к элементам уровня блока
Наследуется:	да
Процентное:	N/A
Носитель:	визуальный

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

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

left, right, center, and justify

Выравнивает текст влево, вправо, по центру и по формату. <string>

Специфицирует строку, в которой ячейки столбца таблицы будут выровнены (см. детали и пример в разделе Горизонтальное выравнивание в столбце). Это значение применяется только к ячейкам таблицы. Если установлено в другом элементе, оно рассматривается как 'left' или 'right', в зависимости от того, каково направление письма: 'direction' - 'ltr' или 'rtl', соответственно.

Блок текста это стопка строчных боксов. В случаях 'left', 'right' и 'center', это свойство специфицирует, как инлайн-боксы в каждом строчном боксе выравниваются относительно левой и правой сторон строчного бокса; выравнивание не производится относительно порта просмотра. В случае с 'justify', ПА может сжать инлайн-боксы в дополнение к уточнению их позиций. (См. также 'letter-spacing' и 'word-spacing'.)

Пример(ы):

Здесь обратите внимание, что, поскольку 'text-align' наследуется, все элементы уровня блока внутри элемента DIV с 'class=center' получат своё инлайн-содержимое сцентрированным.

DIV.center { text-align: center }

Примечание.

Фактический алгоритм выравнивания по формату зависит от ПА и языка письма.

Соответствующие пользовательские агенты (ПА) могут интерпретировать значение 'justify' как 'left' или 'right', в зависимости от того, каково по умолчанию направление письма: слева-направо или справа-налево, соответственно.

Высота глифов нижнего регистра

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

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

Высота глифов верхнего регистра

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