32. Настройка списков.

Для настройки внешнего вида списков используются CSS-свойства list-style-type, list-style-image, list-style-position и свойство list-style – сокращённая запись трёх упомянутых свойств. Все свойства являются наследуемыми. Они применимы к dd, dt, li, ol, ul (list-style-type – только к li, ol, ul) и к элементам, у которых display: list-item.

list-style-type

Свойство list-style-type определяет вид маркера: circle, disc, square, armenian, decimal, decimal-leading-zero, georgian, lower-alpha, lower-greek, lower-latin, lower-roman, upper-alpha, upper-latin, upper-roman, none.

Некоторые браузеры поддерживают нестандартные значения (hebrew, hiragana, katakana, …).

list-style-image

Свойство list-style-image устанавливает адрес изображения, которое служит в качестве маркера:

ul { list-style-image: url(images/mark.png); }

Так как свойство наследуется, для отдельных элементов списка для восстановления маркера используйте none.

list-style-position

Если list-style-position принимает значение outside, то маркеры списка размещаются за пределами текстового блока. Это поведение по умолчанию.

При значении inside маркер является частью текстового блока и обтекается текстом элемента списка.

list-style

Универсальное свойство list-style позволяет задать вид маркера, его положение и картинку для маркера.

Значения должны следовать в указанном порядке: вначале вид маркера, затем положение и картинка. Ни одно значение не является обязательным, поэтому неиспользуемые можно опустить.

Счетчики

Встроенная CSS-функция counter() возвращает текущее значение счетчика по его идентификатору.

Свойство counter-increment при применении к элементу увеличивает указанный счетчик. Можно указать шаг приращения. Свойство counter-reset сбрасывает счётчик (до нуля или указанного числа) при применении к элементу.