В вышеприведенном примере для элемента 'H1' все буквы устанавливаются прописными.

Ядро CSS1: UA может игнорировать преобразование текста (т.е. отрабатывать как по значению 'none'), для символов, не относящихся к набору для кодировки Latin-1 и для элементов на языках, для которых преобразование отличается от принятого для таблиц преобразования Unicode [8].

5.4.6 Установка выравнивания текста ('text-align')
Значение: left | right | center | justify
По умолчанию: определяется UA
Область применения: блочные элементы
Наследование: есть
Процентное выражение: неопр.

Это свойство описывает способ выравнивания текста внутри элемента. Фактически используемый UA алгоритм будет зависеть от языка документа.

Пример:

DIV.center { text-align: center }

Поскольку выравнивание текста наследуется, все блочные элементы внутри элемента 'DIV' с 'CLASS=center' будут выровнены по середине. Обратите внимание, что выравнивание производится относительно ширины элемента, а не холста. Если UA не поддерживает выравнивание по ширине ('justify'), он должен поддерживать замену - для западных языков это будет, как правило, выравнивание по левому краю.

Ядро CSS: UA вправе интерпретировать выравнивание по середине как выравнивание по левому или правому краю, в зависимости от установленного по умолчанию для элемента направления письма - соответственно слева направо или справа налево.

5.4.7 Установка абзацного отступа ('text-indent')
Значение: <length> | <percentage>
По умолчанию: 0
Область применения: блочный элементы
Наследование: есть
Процентное выражение: относительно ширины
родительского элемента.

Это свойство определяет величину отступа перед первой форматируемой линией абзаца. Значение для абзацного отступа может быть отрицательным, но в пределах, накладываемых особенностями обработки. Отступ не используется в середине элемента, если тот был разбит другим (напр. 'BR' для HTML).

Пример:

P { text-indent: 3em }

5.4.8 Установка высоты строки ('line-height').
Значение: normal | <number> | <length> | <percentage>
По умолчанию: normal
Область применения: все элементы
Наследование: есть
Процентное выражение: относительно размера шрифта
самого элемента.

Данное свойство определяет расстояние между базами двух смежных строк.

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

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

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

DIV { line-height: 1.2; font-size: 10pt }
/* number */
DIV { line-height: 1.2em; font-size: 10pt }
/* length */
DIV { line-height: 120%; font-size: 10pt }
/* percentage */

Значение 'normal' устанавливает "рациональное" соотношение высоты строки и высоты шрифта элемента. Предполагается, что UA в случае значения 'normal' устанавливает это соотношение в пределах 1,0....1,2.

См. раздел 4.7. , описание того, как свойство "высота строки" влияет на форматирование блочного элемента.

5.5 Свойства полей.
Свойство "поле" устанавливают размер, периферию и расположение полей, представляющих элементы. См. модель форматирования (разд.4), в котором приведен пример использования свойства "поле".

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

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

Свойства рамки устанавливают рамки элемента. Каждый элемент имеет четыре стороны рамки, для каждой из которых устанавливаются ширина, цвет и стиль.

Свойства "ширина" ('width') и "высота" ('height') устанавливают размеры поля , а "плавающий" ('float') и "очистка" ('clear') позволяют изменять позицию элементов.

5.5.1 Установка верхней границы ('margin-top').
Значение: <length> | <percentage> | auto
По умолчанию: 0
Область применения: все элементы
Наследование: нет
Процентное выражение: по отношению к ширине
родительских элементов.

Это свойство определяет верхнюю границу элемента:

H1 { margin-top: 2em }

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

5.5.2 Установка правой границы ('margin-right').
Значение: <length> | <percentage> | auto
По умолчанию: 0
Область применения: все элементы
Наследование: нет
Процентное выражение: по отношению к ширине
родительских элементов

Это свойство определяет правую границу элемента:

H1 { margin-right: 12.3% }

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

5.5.3 Установка нижней границы ('margin-bottom').
Значение: <length> | <percentage> | auto
По умолчания: 0
Область применения: все элементы
Наследование: нет
Процентное выражение: по отношению к ширине
родительских элементов

Это свойство определяет нижнюю границу элемента:

H1 { margin-bottom: 3px }

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

5.5.4 Установка левой границы ('margin-left')
Значение: <length> | <percentage> | auto
По умолчанию: 0
Область применения: все элементы
Наследование: нет
Процентные значения: refer to
родительский элемент's width

Это свойство устанавливает левую границу элемента:

H1 { margin-left: 2em }

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

5.5.5 Установка обобщающего свойства "граница" ('margin').
Значение: [ <length> | <percentage> | auto ]{1,4}
По умолчанию: не определено для обобщающих свойств
Область применения: все элементы
Наследование: нет
Процентное выражение: по отношению к ширине
родительских элементов

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

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

BODY { margin: 2em } /* all margins set to 2em */
BODY { margin: 1em 2em } /* top & bottom = 1em,
right & left = 2em */
BODY { margin: 1em 2em 3em } /* top=1em,
right=2em, bottom=3em, left=2em */

Последняя строка вышеприведенного примера равноценна нижеследующему примеру:

BODY {
margin-top: 1em;
margin-right: 2em;
margin-bottom: 3em;
margin-left: 2em;
/* copied from opposite side (right) */
}

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

5.5.6 Установка верхнего отступа ('padding-top').
Значение: <length> | <percentage>
По умолчанию: 0
Область применения: все элементы
Наследование: нет
Процентное выражение: по отношению к ширине
родительских элементов

Это свойство определяет величину верхнего отступа элемента.

BLOCKQUOTE { padding-top: 0.3em }

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

5.5.7 Установка правого отступа ('padding-right').
Значение: <length> | <percentage>
По умолчанию: 0
Область применения: все элементы
Наследование: нет
Процентное выражение: по отношению к ширине
родительских элементов

Это свойство определяет величину правого отступа элемента.

BLOCKQUOTE { padding-right: 10px }

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

5.5.8 Установка нижнего отступа ('padding-bottom').
Значение: <length> | <percentage>
По умолчанию: 0
Область применения: все элементы
Наследование: нет
Процентное выражение: по отношению к ширине
родительских элементов

Это свойство определяет величину нижнего отступа элемента.

BLOCKQUOTE { padding-bottom: 2em }

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

5.5.9 Установка левого отступа ('padding-left').
Значение: <length> | <percentage>
По умолчанию: 0
Область применения: все элементы
Наследование: нет
Процентное выражение: по отношению к ширине
родительских элементов

Это свойство устанавливает величину левого отступа элемента..

BLOCKQUOTE { padding-left: 20% }

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

5.5.10 Установка обобщающего свойства " отступ" ('padding').
Значение: [ <length> | <percentage> ]{1,4}
По умолчанию: 0
Область применения: все элементы
Наследование: нет
Процентное выражение: по отношению к ширине
родительских элементов

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

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

Поверхность отступа определяется с помощью свойства "фон" ('background'):

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

В вышеприведенном примере устанавливается горизонтальный отступ величиной '1em' (правый и левый) и вертикальный отступ величиной '2em' (верхний и нижний). Величина 'em' определяется относительно размера шрифта элемента: 1em соответствует размеру применяемого шрифта.

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

5.5.11 Установка ширины верхней рамки ('border-top-width').
Значение: thin | medium | thick | <length>
По умолчанию: 'medium'
Область применения: all элементы
Наследование: нет
Процентное выражение: неопр.

Это свойство определяет ширину верхней рамки элемента. Ширина, определяемая зарезервированным словом, зависит от UA, но при этом выдерживается зависимость: 'thin' меньше, чем 'medium', а последнее меньше, чем 'thick'.

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

H1 { border: solid thick red }
P { border: solid thick blue }

В вышеуказанном примере у элементов 'H1' и 'P' будет та же самая рамка независимо от размера шрифта. Чтобы установить относительную ширину, можно использовать единицы 'em':

H1 { border: solid 0.5em }

Величина рамки не может быть отрицательной.

5.5.12 Установка ширины правой рамки('border-right-width').
Значение: thin | medium | thick | <length>
По умолчанию: 'medium'
Область применения: все элементы
Наследование: нет
Процентное выражение: неопр.

Это свойство определяет ширину правой рамки элемента. Остальное эквивалентно установке ширины верхней рамки('border-top-width').

5.5.13 Установка ширины нижней рамки('border-bottom-width')
Значение: thin | medium | thick | <length>
По умолчанию: 'medium'
Область применения: все элементы
Наследование: нет
Процентное выражение: неопр.

Это свойство определяет ширину нижней рамки элемента. Остальное эквивалентно установке ширины верхней рамки('border-top-width').

5.5.14 Установка ширины левой рамки 'border-left-width'
Значение: thin | medium | thick | <length>
По умолчанию: 'medium'
Область применения: все элементы
Наследование: нет
Процентное выражение: неопр.

Это свойство определяет ширину левой рамки элемента. Остальное эквивалентно установке ширины верхней рамки ('border-top-width').

5.5.15 Установка обобщающего свойства "ширина рамки" ('border-width')
Значение: thin | medium | thick | <length>
По умолчанию: 'medium'
Область применения: все элементы
Наследование: нет
Процентное выражение: неопр.

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

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

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

H1 { border-width: thin }
/* thin thin thin thin */
H1 { border-width: thin thick }
/* thin thick thin thick */
H1 { border-width: thin thick medium }
/* thin thick medium thin */
H1 { border-width: thin thick medium none }
/* thin thick medium none */

Величина рамки не может быть отрицательной.

5.5.16 Установка цвета рамки ('border-color').
Значение: <color>{1,4}
По умолчанию: значение свойства 'color'
Область применения: все элементы
Наследование: нет
Процентное выражение: неопр.

Свойство "цвет рамки" ('border-color') определяет цвет четырех сторон рамки. "Цвет рамки" может иметь от одного до четырех значений, которые устанавливают цвета сторон рамки аналогично вышеописанному для толщины рамки.

Если не задано ни одного значения цвета, по умолчанию присваивается значение свойства "цвет" самого элемента:

P {
color: black;
background: white;
border: solid;
}

В вышеуказанном примере рамка представляет собой сплошную черную линию.

5.5.17 Установка стиля рамки ('border-style')
Значение: none | dotted | dashed | solid | double
| groove | ridge | inset |
outset
По умолчанию: none
Область применения: все элементы
Наследование: нет
Процентное выражение: неопр.

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

#xy34 { border-style: solid dotted }

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

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

Возможны следующие стили рамки:

none
рамка не изображается (независимо от значения ширины рамки)
dotted
рамка - пунктирная линия поверх обоев элемента
dashed
рамка - штриховая линия поверх обоев элемента
solid
рамка - сплошная линия
double
рамка - двойная линия поверх обоев элемента. Сумма толщин двух линий и промежутка между ними соответствует толщине рамки.
groove
объемная канавка, цвета на основе значения свойства "цвет".
ridge
объемный гребень, цвета на основе значения свойства "цвет".
inset
объемная складка внутрь, цвета на основе значения свойства "цвет".
outset
объемная складка наружу, цвета на основе значения свойства "цвет".
Ядро CSS: UA может обрабатывать 'dotted', 'dashed', 'double', 'groove', 'ridge', 'inset' и 'outset' как сплошную линию ('solid').
5.5.18 Установка обобщающего свойства "верхняя рамка" ('border-top')
Значение: <border-top-width> || <border-style> |
| <color>
По умолчанию: для обобщающего свойства не определено
Область применения: все элементы
Наследование: нет
Процентное выражение: неопр.

Данное свойство является обобщающим для установки ширины, стиля и цвета для верхней рамка элемента.

H1 { border-bottom: thick solid red }

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

H1 { border-bottom: thick solid }

В вышеуказанном примере значение цвета опущено и цвет рамки будет установлен по значению свойства "цвет" самого элемента.

Обратите внимание, что в отличие от свойства "стиль рамки ", для обобщающего свойства "верхняя рамка" задается только одно значение стиля.

5.5.19 Установка обобщающего свойства "правая рамка" ('border-right')
Значение: <border-right-width> || <border-style> |
| <color>
По умолчанию: для обобщающего свойства не определено
Область применения: все элементы
Наследование: нет
Процентное выражение: неопр.

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

5.5.20 Установка обобщающего свойства "нижняя рамка" ('border-bottom')
Значение: <border-bottom-width> || <border-style> |
| <color>
По умолчанию: для обобщающего свойства не определено
Область применения: все элементы
Наследование: нет
Процентное выражение: неопр.

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

5.5.21 Установка обобщающего свойства "левая рамка" 'border-left'
Значение: <border-left-width> || <border-style> |
| <color>
По умолчанию: для обобщающего свойства не определено
Область применения: все элементы
Наследование: нет
Процентное выражение: неопр.

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

5.5.22 Установка обобщающего свойства " рамка" 'border'
Значение: <border-width> || <border-style> |
| <color>
По умолчанию: для обобщающего свойства не определено
Область применения: все элементы
Наследование: нет
Процентное выражение: неопр.

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

P { border: solid red }
P {
border-top: solid red;
border-right: solid red;
border-bottom: solid red;
border-left: solid red
}

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

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

BLOCKQUOTE {
border-color: red;
border-left: double
color: black;
}

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

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

5.5.23 Установка свойства "ширина" ('width')
Значение: <length> | <percentage> | auto
По умолчанию: auto
Область применения: блочные и замещаемые элементы
Наследование: нет
Процентное выражение: по отношению к ширине
родительского элемента

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

Пример:

IMG.icon { width: 100px }

Если для свойств "ширина" и "высота" замещаемого элемента использовано значение 'auto', то обрабатываются значения, соответствующие собственным размерам элемента.

Отрицательные значения для свойства "ширина" не допускаются.

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

5.5.24 Установка свойства "высота" 'height'
Значение: <length> | auto
По умолчанию: auto
Область применения: блочные и замещаемые элементы
Наследование: нет
Процентное выражение: неопр.

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

Пример:

IMG.icon { height: 100px }

Если для свойств "ширина" и "высота" замещаемого элемента использовано значение 'auto', то обрабатываются значения, соответствующие собственным размерам элемента.

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

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

Ядро CSS1: UA могут игнорировать свойство "высота" (т.е. присваивать ему значение 'auto'), если элемент не является замещаемым.

5.5.25 Установка свойства "плавающий" ('float')
Значение: left | right | none
По умолчанию: none
Область применения: все элементы
Наследование: нет
Процентное выражение: неопр.

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

IMG.icon {
float: left;
margin-left: 0;
}

В вышеприведенном примере все элементы IMG, имеющие класс icon, будут установлены вдоль левой стороны родительского элемента.

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

5.5.26 Установка свойства "чисто" ('clear')
Значение: none | left | right | both
По умолчанию: none
Область применения: все элементы
Наследование: нет
Процентное выражение: нет

Это свойство устанавливается, если элемент допускает размещение на своих сторонах плавающих элементов. Если точнее, то значение данного свойства указывает стороны, где плавающие элементы не ставятся. Если для свойства элемента "чисто" указать значение 'left', то для такого элемента все плавающие элементы на левой стороне будут опущены вниз. Если указано значение 'none', то плавающие элементы устанавливаются на всех сторонах. Пример:

H1 { clear: left }

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

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

5.6.1 Установка свойства "показ" ('display')
Значение: block | inline | list-item | none
По умолчанию: block
Область применения: все элементы
Наследование: нет
Процентное выражение: неопр.

Это свойство описывает, показывается ли элемент на холсте (печатная страница, экран и т.п.) и каким образом.

Элемент со значением 'block' свойства "показ" открывает новое поле. Поле устанавливается относительно смежных полей в соответствии с принципами форматирования CSS. Обычно такие элементы как 'H1' и 'P' относятся к типу "блочные". Значение 'list-item' будет здесь аналогично значению 'block', с той лишь разницей, что добавляется маркер элемента списка. Для HTML это значение обычно имеет элемент 'LI'.

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

Значение 'none' отменяет показ элемента, включая дочерние элементы и окружающее поле.

P { display: block }
EM { display: inline }
LI { display: list-item }
IMG { display: none }

Последняя строка отключает показ картинок.

По умолчанию свойству "показ" ('display') присваивается значение 'block', но UA обычно присваивает всем элементам HTML значения по умолчанию в соответствии с предлагаемыми спецификацией HTML для соответствующих элементов [2].

Ядро CSS1: UA может игнорировать свойство "показ" и использовать собственные установки по умолчанию. (См. раздел 7).

5.6.2 Установка пробелов ('white-space')
Значение: normal | pre | nowrap
По умолчанию: normal
Область: блочный элементы
Наследование: есть
Процентное выражение: неопр.

Это свойство описывает, каким образом внутри элемента поддерживаются пробелы: при значении 'normal' пробелы сжимаются, значение 'pre' действует подобно элементу PRE для HTML, а при значении 'nowrap' перенос производится только с помощью элементов BR:

PRE { white-space: pre }
P { white-space: normal }

По умолчанию свойству "пробелы" присваивается значение 'normal', однако UA обычно ставит значения по умолчанию для всех элементов HTML в соответствии с указанным для этих элементов в спецификации HTML [2].

Ядро CSS1: UA может игнорировать свойство "пробелы" в таблице стилей автора или читателя, и использовать взамен собственные значения по умолчанию. (См. раздел 7).

5.6.3 Установка типа маркера перечня ('list-style-type')
Значение: disc | circle | square | decimal |
lower-roman | upper-roman |
lower-alpha | upper-alpha | none
По умолчанию: disc
Область применения: элементы со значением '
list-item' для свойства 'display'
Наследование: есть
Процентное выражение: неопр.

Это свойство служит для установки появления маркера перечня, если свойству "рисунок маркера перечня" ('list-style-image') присвоено значение 'none', либо, если изображение, указанное в URL, не может быть отображено.

OL { list-style-type: decimal }
/* 1 2 3 4 5 etc. */
OL { list-style-type: lower-alpha }
/* a b c d e etc. */
OL { list-style-type: lower-roman }
/* i ii iii iv v etc. */

5.6.4 Установка рисунка маркера перечня ('list-style-image').
Значение: <url> | none
По умолчанию: none
Область применения: элементы со значением
'list-item' для свойства 'display'
Наследование: есть
Процентное выражение: неопр.

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

UL { list-style-image:
url(http://png.com/ellipse.png) }

5.6.5 Установка отступа маркера перечня 'list-style-position'
Значение: inside | outside
По умолчанию: outside
Область применения: элементы со значением
'list-item' для свойства 'display'
Наследование: есть
Процентное выражение: неопр.

Значение свойства "отступ маркера перечня" определяет, каким образом маркер перечня будет расположен относительно содержания. Примеры форматирования см. в разделе 4.1.3.

5.6.6 Установка обобщающего свойства "перечень" ('list-style')
Значение: <keyword> || <position> || <url>
По умолчанию: не определено для обобщающих свойств
Область применения: элементы со значением
'list-item' для свойства 'display'
Наследование: есть
Процентное выражение: неопр.

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

UL { list-style: upper-roman inside }
UL UL { list-style: circle outside }
LI.square { list-style: square }

Прямое указание значений свойств "перечень" для элементов 'LI' может иметь непредсказуемые результаты. НаПример:

<STYLE TYPE="text/css">
OL.alpha LI { list-style: lower-alpha }
UL LI { list-style: disc }
</STYLE>
<BODY>
<OL CLASS=alpha>
<LI>level 1
<UL>
<LI>level 2
</UL>
</OL>
</BODY>

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

OL.alpha { list-style: lower-alpha }
UL { list-style: disc }

В вышеуказанных примерах свойства "перечень" будут унаследованы элементами 'LI' от элементов 'OL' и 'UL'.

Значение URL можно сочетать с любыми другими значениями:

UL { list-style: url(http://png.com/ellipse.png) disc }

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