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



Иллюстрация 1

   [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 }
Абсолютные единицы измерения используются только тогда, когда известны физические свойства выводного устройства.
Абсолютными значениями являются: in: inches/дюймы -- 1 дюйм равен 2.54 сантиметра. cm: сантиметры mm: миллиметры pt: points/пункты - пункт, используемый в CSS2, равен 1/72 дюйма. pc: picas/пики -- 1 пика равна 12 пунктам.
Пример(ы):
H1 { margin: 0.5in } /* дюймы */ H2 { line-height: 3cm } /* сантиметры */ H3 { word-spacing: 4mm } /* миллиметры */ H4 { font-size: 12pt } /* пункты */ H4 { font-size: 1pc } /* пики */ В тех случаях, когда специфицированные размеры не могут поддерживаться, ПА обязаны давать значение, приближённое к реальному.

Имя семейства шрифта

15.4.6 Имя семейства шрифта

Специфицирует ту часть имени шрифта, где указывается имя семейства данного шрифта. Например, имя семейства для Helvetica-Bold - Helvetica, имя семейства для ITC Stone Serif Semibold Italic - ITC Stone Serif. Некоторые системы рассматривают "украшения", относящиеся к сжатию или расширению как часть имени семейства.

Индекс дескрипторов

Индекс дескрипторов

НазваниеЗначенияНачальное значение

'ascent'	<number>	не определено
'baseline'	<number>	0
'bbox'	<number>, <number>, <number>, <number>	не определено
'cap-height'	<number>	не определено
'centerline'	<number>	не определено
'definition-src'	<uri>	не определено
'descent'	<number>	не определено
'font-family'	[ <family-name> | <generic-family> ] [, [<family-name> | <generic-family> ]]*	зависит от пользовательского агента
'font-size'	all | <length> [, <length>]*	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
'font-style'	all | [ normal | italic | oblique ] [, [normal | italic | oblique] ]*	all
'font-variant'	[normal | small-caps] [,[normal | small-caps]]*	normal
'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
'mathline'	<number>	не определено
'panose-1'	[<integer>]{10}	0 0 0 0 0 0 0 0 0 0
'slope'	<number>	0
'src'	[ <uri> [format(<string> [, <string>]*)] | <font-face-name> ] [, <uri> [format(<string> [, <string>]*)] | <font-face-name> ]*	не определено
'stemh'	<number>	не определено
'stemv'	<number>	не определено
'topline'	<number>	не определено
'unicode-range'	<urange> [, <urange>]*	U+0-7FFFFFFF
'units-per-em'	<number>	не определено
'widths'	[<urange> ]? [<number> ]+ [,[<urange> ]? <number> ]+]	не определено
'x-height'	<number>	не определено

Индекс свойств

Индекс свойств

НазваниеЗначения Начальное значениеПрименяется:
(По умолчанию:
ко всем)НаследуетсяПроцентное
(По умолчанию: N/A)Группа носителей

'azimuth'	<angle> | [[ left-side | far-left | left | center-left | center | center-right | right | far-right | right-side ] || behind ] | leftwards | rightwards | inherit	center		да		звуковой
'background'	[ 'background-color' || 'background-image' || 'background-repeat' || 'background-attachment' || 'background-position'] | inherit	XX	визуальный	нет	допускается в 'background-position'	визуальный
'background-attachment'	scroll | fixed | inherit	scroll		нет		визуальный
'background-color'	<color> | transparent | inherit	transparent		нет		визуальный
'background-image'	<uri> | none | inherit	none		нет		визуальный
'background-position'	[ [<percentage> | <length> ]{1,2} | [ [top | center | bottom] || [left | center | right] ] ] | inherit	0% 0%	к элементам уровня блока и к замещаемым элементам	нет	относительно размеров самого бокса	визуальный
'background-repeat'	repeat | repeat-x | repeat-y | no-repeat | inherit	repeat		нет		визуальный
'border'	[ 'border-width' || 'border-style' || <color> ] | inherit	см. индивидуальные свойства		нет		визуальный
'border-collapse'	collapse | separate | inherit	collapse	к элементам 'table' и 'inline-table'	да		визуальный
'border-color'	<color>{1,4} | transparent | inherit	см. индивидуальные свойства		нет		визуальный
'border-spacing'	<length> <length>? | inherit	0	к элементам 'table' и 'inline-table'	да		визуальный
'border-style'	<border-style>{1,4} | inherit	см. индивидуальные свойства		нет		визуальный
'border-top' 'border-right' 'border-bottom' 'border-left'	[ 'border-top-width' || 'border-style' || <color> ] | inherit	см. индивидуальные свойства		нет		визуальный
'border-top-color' 'border-right-color' 'border-bottom-color' 'border-left-color'	<color> | inherit	значение свойства 'color'		нет		визуальный
'border-top-style' 'border-right-style' 'border-bottom-style' 'border-left-style'	<border-style> | inherit	none		нет		визуальный
'border-top-width' 'border-right-width' 'border-bottom-width' 'border-left-width'	<border-width> | inherit	medium		нет		визуальный
'border-width'	<border-width>{1,4} | inherit	см. индивидуальные свойства		нет		визуальный
'bottom'	<length> | <percentage> | auto | inherit	auto	к позиционированным элементам	нет	относительно высоты содержащего блока	визуальный
'caption-side'	top | bottom | left | right | inherit	top	к элементам 'table-caption'	да		визуальный
'clear'	none | left | right | both | inherit	none	к элементам уровня блока	нет		визуальный
'clip'	<shape> | auto | inherit	auto	к элементам уровня блока и к замещаемым элементам	нет		визуальный
'color'	<color> | inherit	зависит от ПА		да		визуальный
'content'	[ <string> | <uri> | <counter> | attr(X) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit	пустая строка	к псевдоэлементам :before и :after	нет		визуальный
'counter-increment'	[ <identifier> <integer>? ]+ | none | inherit	none		нет		визуальный
'counter-reset'	[ <identifier> <integer>? ]+ | none | inherit	none		нет		визуальный
'cue'	[ 'cue-before' || 'cue-after' ] | inherit	XX		нет		звуковой
'cue-after'	<uri> | none | inherit	none		нет		звуковой
'cue-before'	<uri> | none | inherit	none		нет		звуковой
'cursor'	[ [<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize| text | wait | help ] ] | inherit	auto		да		визуальный, интерактивный
'direction'	ltr | rtl | inherit	ltr	ко всем элементам, но см. др. информацию	да		визуальный
'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		нет		все
'elevation'	<angle> | below | level | above | higher | lower | inherit	level		да		звуковой
'empty-cells'	show | hide | inherit	show	к элементам 'table-cell'	да		визуальный
'float'	left | right | none | inherit	none	ко всем непозиционированным элементам и генерируемому содержимому	нет		визуальный
'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-family'	[[ <family-name> | <generic-family> ],]* [<family-name> | <generic-family>] | inherit	зависит от ПА (пользовательского агента)		да		визуальный
'font-size'	<absolute-size> | <relative-size> | <length> | <percentage> | inherit	medium		да, вычисляемое значение наследуется	относительно размера шрифта родительского элемента	визуальный
'font-size-adjust'	<number> | none | inherit	none		да		визуальный
'font-stretch'	normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | inherit	normal		да		визуальный
'font-style'	normal | italic | oblique | inherit	normal		да		визуальный
'font-variant'	normal | small-caps | inherit	normal		да		визуальный
'font-weight'	normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit	normal		да		визуальный
'height'	<length> | <percentage> | auto | inherit	auto	ко всем элементам, кроме незамещаемых инлайн-элементов, столбцов таблиц и групп столбцов	нет	см. дополнительную информацию	визуальный
'left'	<length> | <percentage> | auto | inherit	auto	к позиционированным элементам	нет	относительно ширины содержащего блока	визуальный
'letter-spacing'	normal | <length> | inherit	normal		да		визуальный
'line-height'	normal | <number> | <length> | <percentage> | inherit	normal		да	относительно размера шрифта этого элемента	визуальный
'list-style'	[ 'list-style-type' || 'list-style-position' || 'list-style-image' ] | inherit	XX	к элементам с 'display: list-item'	да		визуальный
'list-style-image'	<uri> | none | inherit	none	к элементам с 'display: list-item'	да		визуальный
'list-style-position'	inside | outside | inherit	outside	к элементам с 'display: list-item'	да		визуальный
'list-style-type'	disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-alpha | lower-latin | upper-alpha | upper-latin | hebrew | armenian | georgian | cjk-ideographic | hiragana | katakana | hiragana-iroha | katakana-iroha | none | inherit	disc	к элементам с 'display: list-item'	да		визуальный
'margin'	<margin-width>{1,4} | inherit	XX		нет	относительно ширины содержащего блока	визуальный
'margin-top' 'margin-right' 'margin-bottom' 'margin-left'	<margin-width> | inherit	0		нет	относительно ширины содержащего блока	визуальный
'marker-offset'	<length> | auto | inherit	auto	к элементам с 'display: marker'	нет		визуальный
'marks'	[ crop || cross ] | none | inherit	none	к контексту страницы	N/A		визуальный, страничный
'max-height'	<length> | <percentage> | none | inherit	none	ко всем элементам, кроме незамещаемых инлайн-элементов и элементов таблицы	нет	относительно высоты содержащего блока	визуальный
'max-width'	<length> | <percentage> | none | inherit	none	ко всем элементам, кроме незамещаемых инлайн-элементов и элементов таблицы	нет	относительно ширины содержащего блока	визуальный
'min-height'	<length> | <percentage> | inherit	0	ко всем элементам, кроме незамещаемых инлайн-элементов и элементов таблицы	нет	относительно высоты содержащего блока	визуальный
'min-width'	<length> | <percentage> | inherit	зависит от ПА	ко всем элементам, кроме незамещаемых инлайн-элементов и элементов таблицы	нет	относительно ширины содержащего блока	визуальный
'orphans'	<integer> | inherit	2	к элементам уровня блока	да		визуальный, страничный
'outline'	[ 'outline-color' || 'outline-style' || 'outline-width' ] | inherit	см. индивидуальные свойства		нет		визуальный, интерактивный
'outline-color'	<color> | invert | inherit	invert		нет		визуальный, интерактивный
'outline-style'	<border-style> | inherit	none		нет		визуальный, интерактивный
'outline-width'	<border-width> | inherit	medium		нет		визуальный, интерактивный
'overflow'	visible | hidden | scroll | auto | inherit	visible	к элементам уровня блока и к замещаемым	нет		визуальный
'padding'	<padding-width>{1,4} | inherit	XX		нет	относительно ширины содержащего блока	визуальный
'padding-top' 'padding-right' 'padding-bottom' 'padding-left'	<padding-width> | inherit	0		нет	относительно ширины содержащего блока	визуальный
'page'	<identifier> | auto	auto	к элементам уровня блока	да		визуальный, страничный
'page-break-after'	auto | always | avoid | left | right | inherit	auto	к элементам уровня блока	нет		визуальный, страничный
'page-break-before'	auto | always | avoid | left | right | inherit	auto	к элементам уровня блока	нет		визуальный, страничный
'page-break-inside'	avoid | auto | inherit	auto	к элементам уровня блока	да		визуальный, страничный
'pause'	[ [<time> | <percentage>]{1,2} ] | inherit	зависит от ПА		нет	см. описание 'pause-before' и 'pause-after'	звуковой
'pause-after'	<time> | <percentage> | inherit	зависит от ПА		нет	см. дополнительную информацию	звуковой
'pause-before'	<time> | <percentage> | inherit	зависит от ПА		нет	см. дополнительную информацию	звуковой
'pitch'	<frequency> | x-low | low | medium | high | x-high | inherit	medium		да		звуковой
'pitch-range'	<number> | inherit	50		да		звуковой
'play-during'	<uri> mix? repeat? | auto | none | inherit	auto		нет		звуковой
'position'	static | relative | absolute | fixed | inherit	static	ко всем элементам, кроме тех, которые генерируют содержимое	нет		визуальный
'quotes'	[<string> <string>]+ | none | inherit	зависит от ПА		да		визуальный
'richness'	<number> | inherit	50		да		звуковой
'right'	<length> | <percentage> | auto | inherit	auto	к позиционированным элементам	нет	относительно ширины содержащего блока	визуальный
'size'	<length>{1,2} | auto | portrait | landscape | inherit	auto	к контексту страницы	N/A		визуальный, страничный
'speak'	normal | none | spell-out | inherit	normal		да		звуковой
'speak-header'	once | always | inherit	once	к элементам, имеющим информацию "шапки"	да		звуковой
'speak-numeral'	digits | continuous | inherit	continuous		да		звуковой
'speak-punctuation'	code | none | inherit	none		да		звуковой
'speech-rate'	<number> | x-slow | slow | medium | fast | x-fast | faster | slower | inherit	medium		да		звуковой
'stress'	<number> | inherit	50		да		звуковой
'table-layout'	auto | fixed | inherit	auto	к 'table' и 'inline-table'	нет		звуковой
'text-align'	left | right | center | justify | <string> | inherit	зависит от ПА и направления письма	к элементам уровня блока	да		визуальный
'text-decoration'	none | [ underline || overline || line-through || blink ] | inherit	none		нет (см. дополнительную информацию)		визуальный
'text-indent'	<length> | <percentage> | inherit	0	к элементам уровня блока	да	относительно ширины содержащего блока	визуальный
'text-shadow'	none | [<color> || <length> <length> <length>? ,]* [<color> || <length> <length> <length>?] | inherit	none		нет (см. дополнительную информацию)		визуальный
'text-transform'	capitalize | uppercase | lowercase | none | inherit	none		да		визуальный
'top'	<length> | <percentage> | auto | inherit	auto	к позиционированным элементам	нет	относительно высоты содержащего блока	визуальный
'unicode-bidi'	normal | embed | bidi-override | inherit	normal	ко всем элементам, но см. др. информацию	нет		визуальный
'vertical-align'	baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit	baseline	к элементам инлайн уровня и к 'table-cell'	нет	относительно 'line-height' самого элемента	визуальный
'visibility'	visible | hidden | collapse | inherit	inherit		нет		визуальный
'voice-family'	[[<specific-voice> | <generic-voice> ],]* [<specific-voice> | <generic-voice> ] | inherit	зависит от ПА		да		звуковой
'volume'	<number> | <percentage> | silent | x-soft | soft | medium | loud | x-loud | inherit	medium		да	относительно унаследованного значения	звуковой
'white-space'	normal | pre | nowrap | inherit	normal	к элементам уровня блока	да		визуальный
'widows'	<integer> | inherit	2	к элементам уровня блока	да		визуальный, страничный
'width'	<length> | <percentage> | auto | inherit	auto	ко всем элементам, кроме незамещаемых инлайн-элементов, столбцов таблиц и групп столбцов	нет	относительно ширины содержащего блока	визуальный
'word-spacing'	normal | <length> | inherit	normal		да		визуальный
'z-index'	auto | <integer> | inherit	auto	к позиционированным элементам	нет		визуальный

Инлайн незамещаемые элементы

10.2 Ширина содержимого: свойство 'width' 'width'

Значение:	<length> | <percentage> | auto | inherit
Начальное:	auto
Применяется:	ко всем элементам, кроме незамещаемых инлайн-элементов, рядов таблиц и групп рядов
Наследуется:	нет
Процентное:	относительно ширины содержащего блока
Носитель:	визуальный

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

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

Ширина бокса замещаемого элемента является внутренней и может масштабироваться ПА, если значение этого свойства отличается от 'auto'.
Значения имеют следующий смысл: <length> Специфицирует фиксированную ширину. <percentage> Специфицирует ширину в процентах. Проценты вычисляются относительно ширины содержащего блока генерируемого бокса. auto Ширина зависит от значений других свойств. См. следующие разделы.

Отрицательные значения для 'width' не допускаются.

Пример(ы):

Это правило фиксирует ширину содержимого параграфа в 100 пикселов:

P { width: 100px }

Инлайн замещаемые элементы

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

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

Инлайнэлементы и инлайнбоксы

9.2.2 Инлайн-элементы и инлайн-боксы

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

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

Внутри бокса блока инлайн-бокс участвует в инлайн-контексте форматирования. Инлайн-бокс compact расположен в поле бокса блока. Боксы-маркёры имеют позицию также вне бокса блока.

Интерфейс пользователя

18. Интерфейс пользователя

Содержание 18.1 Курсоры: свойство 'cursor' 18.2 Предпочтительные цвета пользователя 18.3 Предпочтительные шрифты пользователя 18.4 Динамические контуры: свойство 'outline' 18.4.1 Контуры и фокус 18.5 Увеличение

Использование именованных страниц 'page'

13.3.2 Использование именованных страниц: 'page'

'page'

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

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

Пример(ы):

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

@page rotated {size: landscape} TABLE {page: rotated; page-break-before: right}

Свойство 'page' работает так: если бокс блока с инлайн-содержимым имеет свойство 'page', отличное от аналогичного свойства предшествующего бокса блока с инлайн-содержимым, тогда один или два разрыва страницы вставляются между ними, и боксы после разрыва отображаются в страничном боксе именованного типа. См. ниже "Форсированные разрывы страниц".

Пример(ы):

В этом примере две таблицы отображаются на landscape-страницах (или на одной странице, если входят), и тип страницы "narrow" вообще не используется, вопреки установкам в DIV:

@page narrow {size: 9cm 18cm} @page rotated {size: landscape} DIV {page: narrow} TABLE {page: rotated} с этим документом: <DIV> <TABLE>...</TABLE> <TABLE>...</TABLE> </DIV>

Изображения и полные описания

1.3.5 Изображения и полные описания

Большинство изображений в электронной версии данной спецификации сопровождаются "полными описаниями" того, что изображено. Ссылка на полное описание обозначена "[D]" справа от изображения.

Изображения и полные описания являются исключительно информативными.

Язык документа элементы и атрибуты

1.3.1 Язык документа: элементы и атрибуты

В CSS имена свойств, дескрипторов и псевдоклассов ограничиваются одиночными кавычками. Значения в CSS ограничиваются одиночными кавычками. Элементы языка документа записываются буквами в верхнем регистре. Имена атрибутов языка документа записываются в нижнем регистре и ограничиваются двойными кавычками.

Элементы уровня блока и боксы блока

9.2.1 Элементы уровня блока и боксы блока

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

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

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

Как читать эту спецификацию

1.1 Как читать эту спецификацию

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

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

Как организована эта спецификация

1.2 Как организована эта спецификация

Эта спецификация содержит следующие разделы: Раздел 2: Введение в CSS2 Введение содержит краткий учебник по CSS2 и обсуждение принципов дизайна вне CSS2.
Раздел 3 - 20: Справочник-учебник CSS2 Основу составляет справочник языка CSS2. Этот справочник определяет, что может входить в таблицы стилей CSS2 (синтаксис, свойства, значения свойств) и как ПА обязаны интерпретировать эти таблицы стилей, чтобы претендовать на соответствие.
Приложения: Содержат образцы таблиц стилей для HTML 4.0, изменения относительно CSS1, замечания по реализации и выполнению, грамматике CSS2, список нормативных и информативных ссылок и три индекса: Свойства, Дескрипторы и Общий индекс.

Канва

2.3.1 Канва

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

Капитализация свойство 'texttransform'

'text-transform'

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

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

capitalize Переводит первый символ каждого слова в верхний регистр. uppercase Переводит все символы каждого слова в верхний регистр. lowercase Переводит все символы каждого слова в нижний регистр. none Нет эффектов капитализации.

Реальная трансформация зависит в каждом конкретном случае от языка письма. См. о способах определения языка элемента в RFC 2070 ([RFC2070]).

Соответствующие ПА могут рассматривать значение 'text-transform' как 'none' для тех символов, которые не входят в репертуар Latin-1, и для элементов на тех языках, в которых трансформация отличается от трансформации, специфицированной таблицей конвертации регистров для ISO 10646 ([ISO10646]).

Пример(ы):

Здесь весь текст в элементе H1 переводится в верхний регистр. H1 { text-transform: uppercase }

Каскад

Таблицы стилей могут иметь три независимых источника: автор, пользователь и ПА.

Автор. Специфицирует таблицы стилей для документа-источника в соответствии с соглашениями о языке документа. К примеру, в HTML таблицы стилей могут быть включены в документ или иметь внешнюю связь. Пользователь. Может иметь возможность специфицировать стилевую информацию для определённого документа. Например, пользователь может специфицировать файл, содержащий таблицу стилей, или ПА может предоставить интерфейс, генерирующий пользовательскую таблицу стилей (или вести себя так, как если бы предоставлял). Пользовательский агент. Соответствующие ПА обязаны применять таблицу стилей по умолчанию (или вести себя так, как если бы применяли) до того, как применять к документу все другие таблицы стилей. Таблицы стилей по умолчанию в ПАгенте должны представить элементы языка документа теми способами, которые удовлетворяют общим ожиданиям для языка документа (например, для визуальных браузеров, элемент EM в HTML представляется шрифтом italic). См. "Образец таблицы стилей HTML 4.0" - рекомендуемую таблицу стилей по умолчанию для документов HTML 4.0.

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

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

Каскад CSS назначает вес каждому правилу стиля. Если применяются несколько правил, одно, имеющее больший вес, будет иметь приоритет.

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

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

Каскадирование в контексте страницы

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

Пример(ы):

@page { margin-left: 3cm; } @page :left { margin-left: 4cm; }

Из-за более высокой специфики селектора псевдокласса, левое поле левых страниц будет '4см', а все остальные страницы (т.е. правые) - левое поле '3см'.

Каскадные Таблицы Стилей уровеньСпецификация CSS

Каскадные Таблицы Стилей, уровень 2
Спецификация CSS2

Рекомендации W3C от 12 Мая 1998 года Данная версия:http://www.w3.org/TR/1998/REC-CSS2-19980512;   Последняя версия:http://www.w3.org/TR/REC-CSS2   Предыдущая версия:http://www.w3.org/TR/1998/PR-CSS2-19980324   Редакторы: Bert Bos<bbos@w3.org>
Håkon Wium Lie<howcome@w3.org>
Chris Lilley<chris@w3.org>
Ian Jacobs<ij@w3.org>   На русский язык перевёл Александр Пирамидин <a_pyramidin@yahoo.com>  

Ключевые слова

4.1.2 Ключевые слова

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

это ключевое слово, а  "red" - нет (это строка). Другие неверные примеры:

Примеры неверного использования:

width: "auto"; border: "none"; font-family: "serif"; background: "red";

Кодировка шрифта

15.4.5 Кодировка шрифта

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

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

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

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

в любом месте между лексемами,

4.1.9 Комментарии

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

Контекст форматирования блока

9.4.1 Контекст форматирования блока

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

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

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

Контекст инлайнформатирования

9.4.2 Контекст инлайн-форматирования

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

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

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

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

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

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

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

Вот пример конструкции инлайн-боксов. Следующий параграф (созданный элементом Р уровня блока в HTML) содержит анонимный текст, распределённый между элементами EM и STRONG: <P>Several <EM>emphasized words</EM> appear <STRONG>in this</STRONG> sentence, dear.</P>

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

Anonymous: "Several" EM: "emphasized words" Anonymous: "appear" STRONG: "in this" Anonymous: "sentence, dear."

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

Контуры и фокус

18.4.1 Контуры и фокус

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

Пример(ы):

Чтобы прорисовать толстую чёрную линию вокруг элемента, когда он имеет фокус, толстую красную линию, когда он активен, можно использовать следующие правила: :focus { outline: thick solid black } :active { outline: thick solid red }

Коррекция цветовой гаммы

По вопросам цветовой гаммы проконсультируйтесь в Gamma Tutorial в спецификации PNG ([PNG10]).

При вычислении коррекции цветовой гаммы, ПА, выводящие на CRT, могут принять идеальный CRT и игнорировать любые эффекты внедряемой гаммы. Это означает, что минимальная обработка, необходимая для текущей платформы - : PC, использующий MS-Windows none Unix, использующий X11 none Mac, использующий QuickDraw применяет гамму 1.45 [ICC32] (приложения ColorSync-savvy могут просто передавать профиль sRGB ICC в ColorSync для выполнения необходимой коррекции цвета) SGI, использующий X применяет значения гаммы из /etc/config/system.glGammaVal (значение по умолчанию - 1.70; приложения, запущенные на Irix 6.2 или выше могут просто передавать профиль sRGB ICC в систему управления цветом) NeXT, использующий NeXTStep применяется гамма 2.22

"Применение гаммы" означает, что каждый из трёх - R, G и B - обязан быть конвертирован в R'=Rgamma, G'=Ggamma, B'=Bgamma, прежде чем быть обработанным ОС.

Это можно быстро выполнить путём однократного создания 256-элементной просмотровой таблицы при вызове браузера таким вот образом: for i := 0 to 255 do raw := i / 255.0; corr := pow (raw, gamma); table[i] := trunc (0.5 + corr * 255.0) end

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

 

Краткое пособие CSS для HTML

В этом пособии мы покажем, как можно быстро создать простые таблицы стилей.
Для использования этого пособия необходимо немного знать HTML (см. [HTML40]) и некоторые базовые термины настольных публикаций.

Вот небольшой документ HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Bach's home page</TITLE> </HEAD> <BODY> <H1>Bach's home page</H1> <P>Johann Sebastian Bach was a prolific composer. </BODY> </HTML>

Чтобы установить голубой цвет текста элемента H1, можно написать такое правило CSS:

H1 { color: blue }

Правило CSS состоит из двух главных частей: селектора ('H1') и объявления ('color: blue'). Объявление имеет две части: свойство ('color') и значение ('blue'). Поскольку в предыдущем примере делается попытка использовать только одно из свойств, необходимое для отображения документа HTML, он может быть квалифицирован как таблица стилей. В комбинации с другими таблицами стилей (возможность комбинировать таблицы стилей является одним из фундаментальных свойств CSS) оно (свойство) определит конечный вид документа.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Bach's home page</TITLE> <STYLE type="text/css"> H1 { color: blue } </STYLE> </HEAD> <BODY> <H1>Bach's home page</H1> <P>Johann Sebastian Bach was a prolific composer. </BODY> </HTML>

Для максимальной гибкости мы рекомендуем, чтобы авторы специфицировали внешние таблицы стилей; они могут быть изменены без модификации документа-источника HTML, а также могут раздельно использоваться несколькими документами. Чтобы сослаться на внешнюю таблицу стилей, Вы можете использовать элемент LINK:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Bach's home page</TITLE> <LINK rel="stylesheet" href="bach.css" type="text/css"> </HEAD> <BODY> <H1>Bach's home page</H1> <P>Johann Sebastian Bach was a prolific composer. </BODY> </HTML>

Элемент LINK специфицирует:

тип гиперссылки: "stylesheet"; размещение таблицы стилей: в атрибуте "ref"; тип таблицы стилей, на которую ссылаются: "text/css".

Чтобы продемонстрировать тесную взаимосвязь между таблицей стилей и структурной разметкой, мы продолжим использовать элемент STYLE в этом пособии. Давайте добавим больше цветов: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Bach's home page</TITLE> <STYLE type="text/css"> BODY { color: red } H1 { color: blue } </STYLE> </HEAD> <BODY> <H1>Bach's home page</H1> <P>Johann Sebastian Bach was a prolific composer. </BODY> </HTML>

Таблица стилей теперь содержит два правила: первое устанавливает цвет элемента BODY в 'red', а второе - цвет элемента H1 в 'blue'. Поскольку для элемента P не специфицирован цвет, он будет наследовать цвет от своего элемента-предка, а именно - от BODY. Элемент H1 является также дочерним элементом элемента BODY, но второе правило переопределяет наследуемое значение. В CSS часто возникают такие конфликты между различными значениями, и данная спецификация описывает, как их разрешить.

В CSS2 имеется более 100 различных свойств, в том числе - 'color'.
Рассмотри некоторые другие: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Bach's home page</TITLE> <STYLE type="text/css"> BODY { font-family: "Gill Sans", sans-serif; font-size: 12pt; margin: 3em; } </STYLE> </HEAD> <BODY> <H1>Bach's home page</H1> <P>Johann Sebastian Bach was a prolific composer. </BODY> </HTML>

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

Первое объявление элемента BODY устанавливает семейство шрифтов "Gill Sans". Если этот шрифт недоступен, ПА (часто называемый "браузер") будет использовать семейство шрифтов 'sans-serif', которое является одним из пяти семейств шрифтов, известных всем ПА. Дочерние элементы элемента BODY унаследуют значение свойства 'font-family'.

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

Третье объявление использует относительные единицы измерения, которые определяются относительно своего окружения. Единица "em" относится к размеру шрифта элемента. В нашем случае поля вокруг элемента BODY шире размера шрифта в три раза.

Краткое пособие CSS для XML

CSS может использоваться с любым структурированным форматом документа, например, с приложениями eXtensible Markup Language [XML10]. На самом деле XML намного больше зависит от таблиц стилей, чем HTML, поскольку авторы могут создавать свои собственные элементы, которые не известны ПА и не могут ими выводиться.

Вот простой фрагмент XML: <ARTICLE> <HEADLINE>Fredrick the Great meets Bach</HEADLINE> <AUTHOR>Johann Nikolaus Forkel</AUTHOR> <PARA> One evening, just as he was getting his <INSTRUMENT>flute</INSTRUMENT> ready and his musicians were assembled, an officer brought him a list of the strangers who had arrived. </PARA> </ARTICLE>

Чтобы вывести данный фрагмент в виде документа, мы обязаны сначала объявить, какие элементы являются элементами инлайн-уровня (т.е. не вызывают разрывов строк) и какие - уровня блока (т.е. вызывают разрывы строк). INSTRUMENT { display: inline } ARTICLE, HEADLINE, AUTHOR, PARA { display: block }

Первое правило объявляет INSTRUMENT как инлайн, а второе правило с его списком разделённых запятыми селекторов объявляет все другие элементы как элементы уровня блока.

Одним из вариантов связи таблицы стилей с документом XML является использование инструкций процесса: <?XML:stylesheet type="text/css" href="bach.css"?> <ARTICLE> <HEADLINE>Fredrick the Great meets Bach</HEADLINE> <AUTHOR>Johann Nikolaus Forkel</AUTHOR> <PARA> One evening, just as he was getting his <INSTRUMENT>flute</INSTRUMENT> ready and his musicians were assembled, an officer brought him a list of the strangers who had arrived. </PARA> </ARTICLE>

Визуальный ПА может отформатировать вышеприведённый пример так:

Курсоры свойство 'cursor'

'cursor'

Значение:	[ [<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize| text | wait | help ] ] | inherit
Начальное:	auto
Применяется:	ко всем элементам
Наследуется:	да
Процентное:	N/A
Носитель:	визуальный, интерактивный

Это свойство специфицирует тип курсора указательного устройства.
Значения имеют следующий смысл: auto пользовательский агент (ПА) определяет курсор на базе текущего контекста. crosshair простой крест (например, увеличение знака "+" с помощью коротких отрезков). default курсор по умолчанию, зависящий от платформы. Часто отображается стрелкой. pointer курсор - указатель на ссылку. move обозначает то, что перемещается. e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize обозначают перемещение какого-либо края. Например, курсор 'se-resize' используется, если передвижение начинается в юго-восточном углу бокса. text обозначает текст, который может быть выделен. Часто отображается как вертикальная черта I. wait обозначает, что программа занята и пользователь должен подождать. Часто отображается как (песочные) часы. help для объекта под курсором имеется вспомогательная информация. Часто отображается как знак вопроса или воздушный шар. <uri> ПА получает курсор из ресурса, обозначенного в URI. Если ПА не может обработать первый курсор из списка курсоров, он должен попытаться обработать второй, и т.д. Если ПА не может обработать ни один курсор, определённый пользователем, он обязан использовать общий курсор в конце списка.

Пример(ы):

P { cursor : url("mything.cur"), url("second.csr"), text; }

Лексический разбор

4.1.1 Лексический разбор

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

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

Лексема

Определение IDENT {ident} ATKEYWORD @{ident} STRING {string} HASH #{name} NUMBER {num} PERCENTAGE {num}% DIMENSION {num}{ident} URI url\({w}{string}{w}\)
|url\({w}([!#$%&*-~]|{nonascii}|{escape})*{w}\) UNICODE-RANGE U\+[0-9A-F?]{1,6}(-[0-9A-F]{1,6})? CDO <!-- CDC --> ; ; { \{ } \} ( \( ) \) [ \[ ] \] S [ \t\r\n\f]+ COMMENT \/\*[^*]*\*+([^/][^*]*\*+)*\/ FUNCTION {ident}\( INCLUDES ~= DASHMATCH |= DELIM любой другой символ, не совпавший с вышеприведёнными правилами

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

 

Макрос Определение

ident	{nmstart}{nmchar}*
name	{nmchar}+
nmstart	[a-zA-Z]|{nonascii}|{escape}
nonascii	[^\0-\177]
unicode	\\[0-9a-f]{1,6}[ \n\r\t\f]?
escape	{unicode}|\\[ -~\200-\4177777]
nmchar	[a-z0-9-]|{nonascii}|{escape}
num	[0-9]+|[0-9]*\.[0-9]+
string	{string1}|{string2}
string1	\"([\t !#$%&(-~]|\\{nl}|\'|{nonascii}|{escape})*\"
string2	\'([\t !#$%&(-~]|\\{nl}|\"|{nonascii}|{escape})*\'
nl	\n|\r\n|\r|\f
w	[ \t\r\n\f]*

Ниже дан синтаксис ядра CSS. В последующих разделах описывается, как этот синтаксис использовать. Приложение D описывает более ограниченный набор грамматических правил исключительно для уровня 2 языка CSS. stylesheet : [ CDO | CDC | S | statement ]*; statement : ruleset | at-rule; at-rule : ATKEYWORD S* any* [ block | ';' S* ]; block : '{' S* [ any | block | ATKEYWORD S* | ';' ]* '}' S*; ruleset : selector? '{' S* declaration? [ ';' S* declaration? ]* '}' S*; selector : any+; declaration : property ':' S* value; property : IDENT S*; value : [ any | block | ATKEYWORD S* ]+; any : [ IDENT | NUMBER | PERCENTAGE | DIMENSION | STRING | DELIM | URI | HASH | UNICODE-RANGE | INCLUDES | FUNCTION | DASHMATCH | '(' any* ')' | '[' any* ']' ] S*;

Лексемы КОММЕНТАРИЕВ в грамматике отсутствуют (для сохранения читабельности), но некоторое количество этих лексем может появляться где-либо среди других лексем.

Лексема S в вышеприведённой грамматике стоит вместо пробела. Только символы "space" (Unicode code 32), "tab" (9), "line feed" (10), "carriage return" (13) и "form feed" (12) могут служить пробелами. Другие "пробелоподобные" символы, такие как "em-space" (8195) и "ideographic space" (12288), никогда не могут быть пробелами.

Левая правая и первая страницы

13.2.4 Левая, правая и первая страницы

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

Все страницы автоматически классифицируются ПАгентами на псевдоклассы :left  или :right.

Пример(ы):

@page :left { margin-left: 4cm; margin-right: 3cm; } @page :right { margin-left: 3cm; margin-right: 4cm; }

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

Авторы могут специфицировать также стиль для первой страницы документа псевдоклассом :first:

Пример(ы):

@page { margin: 2cm } /* Все поля установлены в 2см */ @page :first { margin-top: 10cm /* Верхнее поле на первой странице - 10см */ }

Является ли первая страница документа :left или :right, зависит от направления письма в документе и находится вне пределов рассмотрения данного документа. Однако, чтобы форсировать первую страницу в :left или :right, авторы могут вставить разрыв страницы перед первым генерируемым боксом (например, в HTML, специфицировать это для элемента BODY).

Свойства, специфицированные в :left (или :right) в правилах @page, переопределяют те же свойства, специфицированные в правиле @page и не имеющие специфицированного псевдокласса. Свойства, специфицированные в :first в правиле @page, переопределяют те же свойства, специфицированные в :left (или :right) в правилах @page.

Примечание. Добавление объявлений в псевдоклассы :left или :right не указывает, выходит ли документ на принтер одно- или двухсторонним (это находится вне рамок данной спецификации).

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

Максимальная неакцентированная глубина

15.4.15 Максимальная неакцентированная глубина

Это расстояние в em-квадрате от базовой линии до низшей точки, достигаемой глифом, исключая любые акценты и знаки диакритики.

Максимальная неакцентированная высота

15.4.14 Максимальная неакцентированная высота

Это расстояние в em-квадрате от базовой линии до высшей точки, достигаемой глифом, исключая любые акценты и знаки диакритики.

Максимальный ограничивающий бокс

15.4.13 Максимальный ограничивающий бокс

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

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

Маркировка и списки

12.6 Маркировка и списки

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

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Создание списка с маркёрами</TITLE> <STYLE type="text/css"> LI:before { display: marker; content: counter(mycounter, lower-roman) "."; counter-increment: mycounter; } </STYLE> </HEAD> <BODY> <OL> <LI> Это первый элемент списка. <LI> Это второй элемент списка. <LI> Это третий элемент списка. </OL> </BODY> </HTML>

должны дать на выходе примерно следующее:

i. Это первый элемент списка. ii. Это второй элемент списка. iii. Это третий элемент списка.

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

Маркировка свойство 'markeroffset'

12.6.1 Маркировка: свойство 'marker-offset'

Маркёры создаются путём установки свойства 'display' в 'marker' внутри псевдоэлементов :before или :after. Поскольку содержимое 'block' и 'inline' в :before и :after является частью основного бокса, генерируемого элементом, содержимое 'marker' форматируется в независимом боксе маркёра вне основного бокса. Боксы маркёра форматируются как единая строка (т.е. один бокс строки (строчный бокс)), поэтому они не обладают такой гибкостью, как поплавки. Боксы маркёра создаются только тогда, когда свойство 'content' псевдоэлементов действительно генерирует содержимое.

Боксы маркёра имеют заполнение и рамку, но не имеют полей.

Для псевдоэлемента :before базовая линия текста в боксе маркёра будет выровнена вертикально относительно базовой линии текста первой строки содержимого основного бокса. Если основной бокс не содержит текста, верхний внешний край бокса маркёра будет выровнен с верхним внешним краем основного бокса. Для псевдоэлемента :after базовая линия текста в боксе маркёра будет выровнена вертикально относительно базовой линии текста последней строки содержимого основного бокса. Если основной бокс не содержит текста, нижний внешний край бокса маркёра будет выровнен с нижним внешним краем основного бокса.

Высота бокса маркёра задаётся в свойстве 'line-height'. Бокс маркёра :before (:after) участвует в подсчёте высоты первого (последнего) строчного бокса основного бокса. Таким образом, маркёры выравниваются по первой и последней строке содержимого элемента, даже если боксы маркёра находятся в разных строчных боксах. Если в основном боксе отсутствует первый или последний строчный бокс, то бокс маркёра сам устанавливает свой первый строчный бокс.

Вертикальное выравнивание бокса маркёра внутри его строчного бокса специфицируется свойством 'vertical-align'.

Если значение свойства 'width' - 'auto', то ширина содержимого бокса маркёра является шириной содержимого, иначе - это значение 'width'. Для значений 'width' меньших, чем ширина содержимого, свойство 'overflow' специфицирует поведение при переполнении. Боксы маркёра могут перекрывать основные боксы. Для значений 'width' больших, чем ширина содержимого, свойство 'text-align' определяет горизонтальное выравнивание содержимого в боксе маркёра.

Свойство 'marker-offset' специфицирует смещение по горизонтали между боксом маркёра и ассоциированным основным боксом. Расстояние измеряется между их ближайшими краями рамок.
Примечание. Если маркёр всплывает вправо от поплавка в содержимом, отформатированном слева направо, то основной бокс будет всплывать вниз от правой стороны поплавка, но боксы маркёра будут появляться слева от поплавка. Поскольку левый край рамки основного бокса расположен слева от поплавка (см. описание поплавков), а бокс маркёра расположен вне края рамки основного бокса, маркёр расположится также слева от поплавка. Аналогичным будет и поведение при форматировании справа налево, когда маркёр всплывёт слева от поплавка.

Если свойство 'display' имеет значение 'marker' для содержимого, генерируемого элементом с 'display: list-item', то бокс маркёра, генерируемый для ':before', замещает нормальный маркёр элемента списка.

В следующем примере содержимое центрируется в боксе маркёра фиксированной ширины.
Этот документ:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Выравнивание содержимого в боксе маркёра</TITLE> <STYLE type="text/css"> LI:before { display: marker; content: "(" counter(counter) ")"; counter-increment: counter; width: 6em; text-align: center; } </STYLE> </HEAD> <BODY> <OL> <LI> Это первый элемент списка. <LI> Это второй элемент списка. <LI> Это третий элемент списка. </OL> </BODY> </HTML>

должен дать примерно такой вывод:

(1) Это первый элемент списка. (2) Это второй элемент списка. (3) Это третий элемент списка.

В следующем примере создаются маркёры до и после элементов списка.

Этот документ:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Маркёры до и после элементов списка</TITLE> <STYLE type="text/css"> @media screen, print { LI:before { display: marker; content: url("smiley.gif"); LI:after { display: marker; content: url("sad.gif"); } } </STYLE> </HEAD> <BODY> <UL> <LI>первый элемент списка появляется первым <LI>второй элемент списка появляется вторым </UL> </BODY> </HTML>

должен дать примерно такой вывод (здесь используется рисунок ascii вместо изображения gif улыбки):

:-) первый элемент списка появляется первым :-( :-) второй элемент списка появляется вторым :-(

В следующем примере маркёры используются для нумерации примечаний (параграфов).

Данный документ:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Маркёры для создания нумерованных примечаний 4</TITLE> <STYLE type="text/css"> P { margin-left: 12 em; } @media screen, print { P.Note:before { display: marker; content: url("note.gif") "Примечание " counter(note-counter) ":"; counter-increment: note-counter; text-align: left; width: 10em; } } </STYLE> </HEAD> <BODY> <P>Это первый параграф данного документа.</P> <P CLASS="Note">Это очень короткий документ.</P> <P>Это конец.</P> </BODY> </HTML>

должен дать примерно такой вывод:

Это первый параграф данного документа. Примечание 1: Это очень короткий документ. Это конец. 'marker-offset'

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

Это свойство специфицирует расстояние между ближайшим краем рамки бокса маркёра и ассоциированным с ним основным боксом. Смещение может или специфицироваться пользователем (<length>), или выбираться ПА ('auto'). Значения размеров могут быть отрицательными, но могут существовать ограничения, в зависимости от специфики реализации.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>Пример маркёров 5</TITLE> <STYLE type="text/css"> P { margin-left: 8em } /* Создаёт пространство для счётчиков */ LI:before { display: marker; marker-offset: 3em; content: counter(mycounter, lower-roman) "."; counter-increment: mycounter; } </STYLE> </HEAD> <BODY> <P> Это большой предшествующий параграф ... <OL> <LI> Это первый элемент списка. <LI> Это второй элемент списка. <LI> Это третий элемент списка. </OL> <P> Это большой последующий параграф ... </BODY> </HTML>

должен дать примерно такой вывод:

Это большой предшествующий параграф ... i. Это первый элемент списка. ii. Это второй элемент списка. iii. Это третий элемент списка. Это большой последующий параграф ...

Математическая базовая линия

15.4.12 Математическая базовая линия

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

---

---