'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. Это третий элемент списка.
Это большой последующий
параграф ...
Свойства списков создают базовое визуальное форматирование списков. Как и с более общими маркёрами, элемент с 'display: list-item' генерирует основной для содержимого элемента и необязательный бокс маркёра. Другие свойства списка позволяют авторам специфицировать тип маркёра (изображение, глиф или цифра) и его позицию относительно основного бокса (вне или внутри него перед содержимым). Они не позволяют авторам специфицировать другие стили (цвет, шрифт, выравнивание и т.п.) для маркёра списка или уточнять его позицию относительно основного бокса.
Следовательно, если маркёр M (созданный в 'display: marker') используется с элементом списка, созданным в свойстве списка, M замещает стандартный маркёр элемента списка.
Вместе со свойствами списка свойства фона применяются только к основному боксу; бокс маркёра 'outside' прозрачен. Маркёры дают больший контроль над стилем бокса маркёра.
'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'
Наследуется: да
Процентное: N/A
Носитель: визуальный
Это свойство специфицирует вид маркёра элемента списка, если 'list-style-image' имеет значение 'none' или если изображение, на которое указывает URI, не может быть отображено. Значение 'none' специфицирует отсутствие маркёров, для других случаев имеются три типа маркёров: глифы, системы нумерации и алфавитные системы.
Примечание. Нумерованные списки улучшают доступность документа, т.к. делают списки более удобными для навигации.
Глифы специфицируются с помощью disc, circle и square. Их точное представление зависит от ПА.
Системы нумерации специфицируются с помощью:
decimal
Десятеричных чисел, начинающихся с 1.
decimal-leading-zero
Десятеричных чисел, дополненных начальными нулями (например, 01, 02, 03, ..., 98, 99).
lower-roman
Римских цифр в нижнем регистре (i, ii, iii, iv, v и т.д.).
upper-roman
Римских цифр в верхнем регистре (I, II, III, IV, V и т.д.).
hebrew
Традиционной еврейской нумерации.
georgian
Традиционной грузинской нумерации (an, ban, gan, ..., he, tan, in, in-an, ...).
armenian
Традиционной армянской нумерации.
cjk-ideographic
Простых идеографических чисел.
hiragana
a, i, u, e, o, ka, ki, ...
katakana
A, I, U, E, O, KA, KI, ...
hiragana-iroha
i, ro, ha, ni, ho, he, to, ...
katakana-iroha
I, RO, HA, NI, HO, HE, TO, ...
ПА, не распознающий системы нумерации, должен использовать 'decimal'.
Примечание. Этот документ не специфицирует точный механизм действия каждой системы нумерации (например, как вычисляются римские цифры). В будущих Примечаниях W3C могут быть даны дальнейшие разъяснения.
Алфавитные системы специфицируются с помощью:
lower-latin или lower-alpha
Букв ascii нижнего регистра (a, b, c, ... z).
upper-latin или upper-alpha
Букв ascii верхнего регистра (A, B, C, ... Z).
lower-greek
Классических греческих букв нижнего регистра альфа, бета, гамма, ... (?, ?, ?, ...)
Эта спецификация не определяет то, как происходит перенос алфавитной системы в конце алфавита. Например, после 26 элементов списка представление 'lower-latin' не определено. Поэтому для длинных списков мы рекомендуем, чтобы авторы специфицировали точные числа.
Например, следующий документ HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Нумерация латинскими буквами нижнего регистра</TITLE>
<STYLE type="text/css">
OL { list-style-type: lower-roman }
</STYLE>
</HEAD>
<BODY>
<OL>
<LI> Это первый элемент списка.
<LI> Это второй элемент списка.
<LI> Это третий элемент списка.
</OL>
</BODY>
</HTML>
может дать на выходе:
i Это первый элемент списка.
ii Это второй элемент списка.
iii Это третий элемент списка.
Обратите внимание, что выравнивание маркёров списка (здесь - по правому краю) зависит от ПА.
Примечание. Следующие версии CSS могут предоставить более совершенные механизмы международных стилей нумерации.
'list-style-image'
Значение: <uri> | 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'