Евгений Резниченко - Спецификация CSS2

upper-latin или upper-alpha

Букв ascii верхнего регистра (A, B, C, ... Z).

lower-greek

Классических греческих букв нижнего регистра альфа, бета, гамма, ... (?, ?, ?, ...)

Эта спецификация не определяет то, как происходит перенос алфавитной системы в конце алфавита. Например, после 26 элементов списка представление 'lower-latin' не определено. Поэтому для длинных списков мы рекомендуем, чтобы авторы специфицировали точные числа.

Например, следующий документ HTML:

Нумерация латинскими буквами нижнего регистра OL { list-style-type: lower-roman }

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

может дать на выходе:

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

Обратите внимание, что выравнивание маркёров списка (здесь - по правому краю) зависит от ПА.

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

'list-style-image'

Значение: | none | inherit

Начальное: none

Применяется: к элементам с 'display: list-item'

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

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

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

Это свойство определяет изображение, которое будет использоваться как маркёр элемента списка. Если изображение доступно, оно замещает маркёр, установленный 'list-style-type'.

В следующем примере устанавливается маркёр - изображение "ellipse.png" - в начале каждого элемента списка .

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

'list-style-position'

Значение: inside | outside | inherit

Начальное: outside

Применяется: к элементам с 'display: list-item'

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

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

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

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

outside

Бокс маркёра находится вне основного бокса блока

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

inside

Бокс маркёра это первый инлайн-бокс в боксе основного блока, после которого всплывает содержимое элемента.

Например:

Сравнение позиций inside/outside UL { list-style: outside } UL.compact { list-style: inside }

• first list item comes first
• second list item comes second

• first list item comes first
• second list item comes second

Этот пример отображается так:

[D]

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

'list-style'

Значение: [ || < 'list-style-position' > || < 'list-style-image' > ] | inherit

Начальное: не определено для сокращённых свойств

Применяется: к элементам с 'display: list-item'

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

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

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

Свойство 'list-style'- это сокращённое обозначение для установки трёх свойств: 'list-style-type' , 'list-style-image' и 'list-style-position' в одном месте в таблице стилей.

UL { list-style: upper-roman inside } /* Какой-либо UL */ UL > UL { list-style: circle outside } /* UL - потомок UL */

Хотя авторы могут специфицировать информацию о 'list-style' непосредственно в элементах списка (напр., LI в HTML), это нужно делать аккуратно. Следующие правила похожи, но в первом объявляется селектор-потомок, а во втором (более специфический) дочерний селектор.

OL.alpha LI { list-style: lower-alpha } /* LI - потомок OL */ OL.alpha > LI { list-style: lower-alpha } /* LI-наследник OL */

Авторы, использующие только селекторы-потомки, могут не получить тот результат, на который рассчитывали. Рассмотрим следующие правила:

ПРЕДУПРЕЖДЕНИЕ: Непредсказуемый результат из-за каскадирования OL.alpha LI { list-style: lower-alpha } UL LI { list-style: disc }

1. level 1
   • level 2

Ожидается, что элементы списка уровня 1 будут маркированы лэйблами 'lower-alpha', а элементы уровня 2 - лэйблами 'disc'. Однако порядок каскадирования вызовет маскирование второго правила первым (которое содержит специфическую информацию класса). В следующих правилах для решения проблемы используется дочерний селектор:

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

Другим решением может быть спецификация информации 'list-style' только для типа элемента списка:

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

При наследовании значения 'list-style' будут перенесены из элементов OL и UL в элементы LI. Это рекомендуемый способ спецификации информации стиля списка.

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

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

Читать дальше