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

css-свойство list-style-type (от англ. type – тип) задает тип маркера для пунктов списка. Свойство имеет смысл использовать, если значение list-style-image установлено в none.

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

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

Синтаксис

Значения

disc – маркер в виде диска (значение по умолчанию для маркированных списков).
circle – маркер в виде круга.
square – маркер в виде квадрата.
decimal – арабские цифры, т.е. 1, 2, 3 и т.д. (значение по умолчанию для нумерованных списков).
decimal-leading-zero – те же арабские цифры, только с нулем впереди для всех цифр, которые меньше десяти, т.е. 01, 02,...09, 10, 11 и т.д.
lower-roman – римские цифры в нижнем регистре, т.е. i, ii, iii, iv и т.д.
upper-roman – римские цифры в верхнем регистре, т.е. I, II, III, IV и т.д.
lower-greek – строчные греческие буквы, т.е. α, β, γ и т.д.
lower-latin или lower-alpha – строчные латинские буквы, т.е. a, b, c и т.д.
upper-latin или upper-alpha – прописные латинские буквы, т.е. A, B, C и т.д.
armenian – армянские цифры.
georgian – грузинские цифры.
none – отменяет маркеры вообще, т.е. список идет без маркеров.

Ссылки

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

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

Примеры

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