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

Сокращенное css-свойство list-style (от англ. list style – стиль списка) позволяет в одном объявлении задать сразу нескольких параметров маркеров списка, перечисляя их через пробел в любом порядке.

Характеристики

Значение по умолчанию: см. каждое свойство.
Применяется: к элементам <li>, <ol>, <ul>, а также ко всем элементам, у которых значение display установлено в list-item.
Наследуется: см. каждое свойство.
Анимируется: см. каждое свойство.
JavaScript: object.style.listStyle="value".

Синтаксис

list-style: list-style-type || list-style-position || list-style-image

Значения

Можно указывать через пробел значения свойств list-style-type, list-style-position и list-style-image. П ри этом значения могут быть указаны в любом порядке. В случае отсутствия значения какого-нибудь свойства браузер использует вместо него соответствующее значение по умолчанию.

Ссылки

Официальный сайт W3C: https://drafts.csswg.org/css-lists-3/#list-style-property

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/list-style

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>

	<style>
	
		ul{
		width: 500px;
		margin: 2em;
		padding: 0px;
		background-color: #009900;		
		}
	
		.list_2	{
		list-style-position: inside;
		list-style-type: decimal;
		}
		
		.list_3{
		list-style-position: outside;
		list-style-image: url("circle_orange.png");
		}
		
		.list_4{
		list-style-position: inside;
		list-style-type: square;
		}
		
		.list_5{
		list-style: decimal inside;
		}		
		
		.list_6{
		list-style: outside url("circle_orange.png");
		}			
		
	</style>
	
</head>
<body>

	<ul>
	
		<li>
			Все значения по умолчанию.<br><br>
		</li>
	
		<li class="list_2">
			list-style-position: inside;<br>
			list-style-type: decimal;<br><br>
		</li>
		
		<li class="list_3">
			list-style-position: outside;<br>
			list-style-image: url("circle_orange.png");<br><br>
		</li>
		
		<li class="list_4">
			list-style-position: inside;<br>
			list-style-type: square;<br><br>
		</li>
		
		<li class="list_5">
			list-style: decimal inside;<br><br>
		</li>
		
		<li class="list_6">
			list-style: outside url("circle_orange.png");
		</li>
		
	</ul>
	
</body>
</html>

Пример №1