CSS :: Свойство list-style-type
http://belarusweb.net
Основы создания сайтов

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".

Синтаксис

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

Значения

  • 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 – отменяет маркеры вообще, т.е. список идет без маркеров.

Ссылки

Примеры

HTML Результат BwCodes
<!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