list-style-type

Краткая информация

Синтаксис

Обозначения

Значения

Песочница

Пример

Объектная модель

Примечание

Спецификация

Спецификация

Браузеры

Браузеры

Маркированный список

Нумерованный список

Содержание

Изменяет вид маркера для каждого элемента списка. Это свойство используется только в случае, когда значение 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.

Применение свойства list-style-type

Рис. 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, которое устанавливает нумерацию в виде заглавных греческих букв (Α, Β, Γ, Δ,...).

Спецификация	Статус
CSS Lists Module Level 3	Рабочий проект
CSS Level 2 Revision 1 (CSS 2.1)	Рекомендация

Каждая спецификация проходит несколько стадий одобрения.

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	1	1	6	1
lower-latin, upper-latin, lower-greek,armenian, georgian	1	1	6	1
decimal-leading-zero	1	1	8	1

none, disc, circle, square, decimal, lower-alpha, upper-alpha, lower-roman, upper-roman

lower-latin, upper-latin, lower-greek, armenian, georgian

decimal-leading-zero

В таблице браузеров применяются следующие обозначения.

— свойство полностью поддерживается браузером со всеми допустимыми значениями;
— свойство браузером не воспринимается и игнорируется;
— при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.

Число указывает версию браузера, начиная с которой свойство поддерживается.

Списки