Как маркировать списки в CSS.

Модель бокса: display: marker.

Почти все блочные элементы(теги) генерируют один основной блок-бокс, за исключением display: marker, который генерирует два блока, один для контента, а второй для бокса-маркера, который может быть как снаружи от основного блок-бокса, так и врезан в него. Модель display: marker не влияет на позицию основного блока не зависимо от того какая модель использутся у основлого бокса. Бокс-маркеры можно использовать вместе с счетчиками:
LI:before {
display: marker;
content: counter(spisok, lower-roman) ".";
counter-increment:spisok;
}

Как создаются маркеры.

Чтобы создать маркер достаточно элементу списка присвоить модель display: marker внутри псевдоэлементов :before и/или :after.
Чтобы сделать зазор между маркером и основным боксом нужно установить правило marker-offset:
LI:before {
display: marker;
marker-offset:5px
}
Значением marker-offset может быть только единица длины. Так-же маркер может выравниваться по вертикали правилом vertical-align , значение которого мы расматривали на предыдущих страницах.

Правило list-style-type:

Данное правило применяется только к элементам с display: list-item и определяет тип маркера.
Для неупорядоченных элементов списков могут быть значения:
disc - диск;
circle - круг;
square - квадрат.
Для упорядоченных элементов списков могут быть значения цифровыми:
decimal обычные цифры
decimal-leading-zero обычные цифры с первым нолем(00, 01, 02, ... 99)
lower-roman - маленькие римские
upper-roman - большие римские
Для упорядоченных элементов списков могут быть значения из букв:
lower-latin или lower-alpha маленикие латынские буквы
upper-latin или upper-alpha большие латынские буквы
lower-greek гречиские буквы.
Если пользовательский агент(П.А.) не распознает тип маркета, то он обязан отбразить его как list-style-type:decimal

Правило list-style-image:

Данное правило выводит в качестве маркера ваши изображения и может принимать следующие значения:
list-style-image:inherit - П.А. должен использовать вычесленое значение.
list-style-image:none - Маркер отсуствует вообще
list-style-image:url("путь_к_картинке") - указывает путь к картинке маркеру
Если П.А. не распознает тип изображения или путь указан не верно, то значение будет равно list-style-type:decimal

Правило list-style-position:

Данное правило определяет позицию маркера относительно основного бокса: list-style-position:inherit - П.А. должен использовать вычесленое значение.
list-style-position:inside - маркер встроен в основной бокс.
list-style-position:outside - маркер находится вне основного блока.

Правило list-style:

Данное правило объединяет все три предыдущих правил и позволяет их исользовать все три сразу:
list-style:inherit - П.А. должен использовать вычесленое значение.
list-style: list-style-type list-style-position list-style-image
Например: list-style: lower-latin inside url("путь_к_картинке")