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

CSS свойства

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

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

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

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

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

СвойствоChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
list-style1.01.07.01.04.012.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 свойства list-style (все свойства маркера в одном объявлении).
Пример использования CSS свойства list-style (все свойства маркера в одном объявлении).
CSS свойства