С помощью 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.
Для того, чтобы маркер-изображение отображалось одинаково во всех браузерах, используйте следующее решение:
ul { list-style-type: none; padding: 0px; margin: 0px; } li { background-image: url(sqpurple.gif); background-repeat: no-repeat; background-position: 0px 5px; padding-left: 14px;
}
Объясним пример:
- Для элемента ul:
- Удаляем маркеры списка
- Обнуляем padding и margin для кросс-браузерной совместимости
- Для элемента li:
- Указываем путь к изображению и отображаем его один раз (no-repeat)
- Позиционируем изображение
- Позиционируем текст с помощью padding-left
Краткая запись свойств списка
Чтобы задать все свойства списка в одной записи, используйте следующий код:
ul { list-style: square url(«sqpurple.gif»);
}
При использовании краткой записи свойств списка рекомендуется соблюдать следующий порядок свойств:
- list-style-type
- list-style-position
- list-style-image
Если вы не укажете какое-либо свойство, будет подставлено значение по умолчанию.
Все свойства списков — справка CSS
Число в столбце «CSS» указывает на то, в какой версии CSS появилось соответствующее свойство (CSS1 или CSS2).
| Свойство | Описание | Значения | CSS |
|---|---|---|---|
| list-style | Все свойства списка одной записью | list-style-type list-style-position list-style-imageinherit | 1 |
| list-style-image | Путь к изображению-маркеру | URL none
inherit |
1 |
| list-style-position | Положение маркера относительно пункта списка | inside outside
inherit |
1 |
| list-style-type | Тип маркера | none disc circle square decimal decimal-leading-zero armenian georgian lower-alpha upper-alpha lower-greek lower-latin upper-latin lower-roman upper-roman
inherit |
1 |