С помощью CSS вы можете изменить:

·       маркеры пунктов упорядоченного списка

·       маркеры пунктов неупорядоченного списка

·       вставить изображение в качестве маркера

 

Список

В HTML существуют два типа списков:

·       неупорядоченный список — пункты списка маркируются буллетами (графическая фигура, кружок или квадрат)

·       упорядоченный список — пункты списка маркируются буквами или цифрами

 

Различные маркеры списков

Тип маркера списка можно изменить с помощью свойства list-style-type:

Пример

ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}

ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}

Значения свойства list-style-type различаются для упорядоченных и неупорядоченных списков.

Маркеры неупорядоченных списков

Значение

Описание

none

Нет маркеров

disc

Значение по умолчанию. Маркер в виде закрашенного кружка

circle

Маркер в виде незакрашенной окружности

square

Маркер в виде квадрата

Маркеры упорядоченных списков

Значение

Описание

armenian

Традиционная армянская нумерация

decimal

Числовая нумерация

decimal-leading-zero

Числовая нумерация с нулем перед цифрой (01, 02, 03)

georgian

Традиционная грузинская нумерация (an, ban, gan)

lower-alpha

Строчные латинские буквы (a, b, c, d, e)

lower-greek

Строчные греческие буквы (alpha, beta, gamma)

lower-latin

Строчные латинские буквы (a, b, c, d, e)

lower-roman

Римские цифры в нижнем регистре (i, ii, iii, iv)

upper-alpha

Заглавные латинские буквы (A, B, C, D, E) 

upper-latin

Заглавные латинские буквы (A, B, C, D, E)

upper-roman

Римские цифры в верхнем регистре (I, II, III, IV, V)

Заметка: ни одна версия Internet Explorer (включая IE8) не поддерживает следующие значения свойства list-style-type: "decimal-leading-zero", "lower-greek", "lower-latin", "upper-latin", "armenian" и "georgian".

 

Использование изображения в качестве маркера

Для того, чтобы отображать в качестве маркера ваше изображение, используйте свойство list-style-image:

Пример

ul
{
list-style-image: url('sqpurple.gif');
}

 

Этот пример сгенерирует различный результат в разных браузерах. В IE и Opera маркер будет отображаться чуть выше, чем в Firefox, Chrome и Safari.