CSS свойство list-style

Определение и применение

CSS свойство list-style устанавливает все свойства списка в одном объявлении.

Свойства, которые могут быть заданы:

list-style-type (тип маркера)."none | disc (по умолчанию) | armenian | circle | cjk-ideographic | decimal | decimal-leading-zero | georgian | hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha | lower-alpha | lower-greek | lower-latin | lower-roman | square | upper-alpha | upper-latin | upper-roman | initial | inherit"
list-style-position (расположение маркера). "inside | outside (по умолчанию) | initial | inherit"
list-style-image (изображение маркера). "none (по умолчанию) | url | initial | inherit"

Если одно из значений свойства отсутствует, то значение этого свойства будет установлено по умолчанию автоматически.

Поддержка браузерами

Свойство	Chrome	Firefox	Opera	Safari	IExplorer	Edge
list-style	1.0	1.0	7.0	1.0	4.0	12.0

CSS синтаксис:

list-style:"list-style-type list-style-position list-style-image | initial | inherit";

JavaScript синтаксис:

object.style.listStyle = "katakana inside"

Значения свойства

Значение	Описание
list-style-type	Указывает тип маркера элемента списка. Значение по умолчанию - disc.
list-style-position	Определяет расположение маркера относительно элемента списка (внутри элемента списка вместе с содержимым, либо за границей элемента списка). Значение по умолчанию - outside.
list-style-image	Позволяет задать изображение в качестве маркера элемента списка. Значение по умолчанию - none.
initial	Устанавливает свойство в значение по умолчанию.
inherit	Указывает, что значение наследуется от родительского элемента.

Версия CSS

CSS1

Наследуется

Да.

Анимируемое

Нет.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title> Пример CSS свойства list-style.</title>
<style> 
.test {
list-style : square outside; /* указываем, что маркер в форме квадрата располагается слева от текста за границей элемента списка */
}
.test2 {
list-style : circle inside; /* указываем, что маркер в форме круга располагается слева от текста внутри элемента вместе с содержимым */
}
</style>
</head>
	<body>
		<ul class = "test">
			<li>Элемент списка</li>
			<li>Элемент списка</li>
			<li>Элемент списка</li>
		</ul>
		<ul class = "test2">
			<li>Элемент списка</li>
			<li>Элемент списка</li>
			<li>Элемент списка</li>
		</ul>
	</body>
</html>

CSS свойства