Изменяет вид маркера для каждого элемента списка. Это свойство используется только в случае, когда значение list-style-image установлено как none. Маркеры различаются для маркированного списка (элемент <ul>) и нумерованного (элемент <ol>).
Краткая информация
| Значение по умолчанию | disc (для <ul>); decimal (для <ol>) |
|---|
| Наследуется | Да |
|---|
| Применяется | К элементам <li>, <ol> и <ul>, а также ко всем элементам, у которых указано display: list-item |
|---|
| Анимируется | Нет |
|---|
Синтаксис
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
Синтаксис
| Описание | Пример |
|---|
| <тип> | Указывает тип значения. | <размер> |
| A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| [ ] | Группирует значения. | [ crop || cross ] |
| * | Повторять ноль или больше раз. | [,<время>]* |
| + | Повторять один или больше раз. | <число>+ |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| {A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
| # | Повторять один или больше раз через запятую. | <время># |
Значения
Значения зависят от того, к какому типу списка они применяются: маркированному или нумерованному.
Маркированный список
- circle
- Маркер в виде кружка.
- disc
- Маркер в виде точки.
- square
- Маркер в виде квадрата.
Нумерованный список
- armenian
- Традиционная армянская нумерация.
- decimal
- Арабские числа (1, 2, 3, 4,...).
- decimal-leading-zero
- Арабские числа с нулем впереди для цифр меньше десяти (01, 02, 03,...).
- georgian
- Традиционная грузинская нумерация.
- lower-alpha
- Строчные латинские буквы (a, b, c, d,...).
- lower-greek
- Строчные греческие буквы (α, β, γ, δ,...).
- lower-latin
- Это значение аналогично lower-alpha.
- lower-roman
- Римские числа в нижнем регистре (i, ii, iii, iv, v,...).
- upper-alpha
- Заглавные латинские буквы (A, B, C, D,...).
- upper-latin
- Это значение аналогично upper-alpha.
- upper-roman
- Римские числа в верхнем регистре (I, II, III, IV, V,...).
- none
- Отменяет маркеры для списка.
Пример
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>list-style-type</title>
<style>
ol {
list-style-type: upper-roman;
}
</style>
</head>
<body>
<ol>
<li>Gaius Octavius Thurinus</li>
<li>Tiberius Claudius Nero</li>
<li>Gaius Iulius Caesar Augustus Germanicus</li>
<li>Tiberius Claudius Drusus</li>
<li>Lucius Arruntius Camillus Scribonianus</li>
<li>Nero Claudius Caesar Drusus Germanicus</li>
<li>Lucius Clodius Macer</li>
</ol>
</body>
</html>Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства list-style-type
Объектная модель
Объект.style.listStyleType
Примечание
В браузере Internet Explorer 6 при использовании нумерованного списка <ol> и значения inside свойства list-style-position, числа идущие с 10, начинают накладываться на текст списка.
Браузер Internet Explorer до версии 7 включительно не поддерживает значения armenian, decimal-leading-zero, georgian, lower-greek, lower-latin, upper-latin. Вместо них выводится нумерация арабскими числами. В этом браузере нумерация или маркеры не отображаются для плавающих элементов (ul { float: left; }).
Internet Explorer 8 дополнительно понимает значение upper-greek, которое устанавливает нумерацию в виде заглавных греческих букв (Α, Β, Γ, Δ,...).
Спецификация
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor's draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
| | | | | | | |
| none, disc, circle, square, decimal, lower-alpha, upper-alpha, lower-roman, upper-roman | 4 | 12 | 1 | 7 | 1 | 1 |
| lower-latin, upper-latin, lower-greek, armenian, georgian | 8 | 12 | 1 | 6 | 1 | 1 |
| decimal-leading-zero | 8 | 12 | 1 | 8 | 1 | 1 |
| | | | | |
| none, disc, circle, square, decimal, lower-alpha, upper-alpha, lower-roman, upper-roman | 1 | 1 | 6 | 1 |
| lower-latin, upper-latin, lower-greek,armenian, georgian | 1 | 1 | 6 | 1 |
| decimal-leading-zero | 1 | 1 | 8 | 1 |
Браузеры
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.