Уласцівасць list-style-type

Уласцівасць list-style-type дазваляе для спіса ul замест маркераў-кропак зрабіць квадраты або акружнасці. Для спіса ol замест звычайных лічбаў можна зрабіць рымскія, нумарацыю ў выглядзе літар: лацінскіх або грэчаскіх.

Сінтаксіс

селектар {
	list-style-type: значэнне;
}

Значэнні для ul

Значэнне	Апісанне
`circle`	Стварае маркеры ў выглядзе кружкоў.
`disc`	Стварае маркеры ў выглядзе зафарбаваных кружкоў.
`square`	Стварае маркеры ў выглядзе квадрацікаў.
`none`	Прыбірае маркеры.

Значэнне па змаўчанні: disc.

Значэнні для ol

Значэнне	Апісанне
`armenian`	Традыцыйная армянская нумарацыя.
`decimal`	Арабскія лічбы.
`decimal-leading-zero`	Арабскія лічбы з нулем наперадзе для лічбаў менш за дзесяць.
`georgian`	Традыцыйная грузінская нумарацыя.
`lower-alpha`	Малыя лацінскія літары.
`lower-greek`	Малыя грэчаскія літары.
`lower-latin`	Гэта значэнне аналагічна lower-alpha.
`lower-roman`	Рымскія лічбы ў ніжнім рэгістры.
`upper-alpha`	Вялікія лацінскія літары.
`upper-latin`	Гэта значэнне аналагічна upper-alpha.
`upper-roman`	Рымскія лічбы ў верхнім рэгістры.
`none`	Прыбірае маркеры.

Значэнне па змаўчанні: decimal.

Прыклад

<ul>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
</ul>

ul {
	list-style-type: disc;
}

Прыклад

<ul>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
</ul>

ul {
	list-style-type: circle;
}

Прыклад

<ul>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
</ul>

ul {
	list-style-type: square;
}

Прыклад

<ul>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
</ul>

ul {
	list-style-type: none;
}

Прыклад

<ol>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
</ol>

ol {
	list-style-type: decimal;
}

Прыклад

<ol>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
</ol>

ol {
	list-style-type: armenian;
}

Прыклад

<ol>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
</ol>

ol {
	list-style-type: decimal-leading-zero;
}

Прыклад

<ol>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
</ol>

ol {
	list-style-type: georgian;
}

Прыклад

<ol>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
</ol>

ol {
	list-style-type: lower-alpha;
}

Прыклад

<ol>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
</ol>

ol {
	list-style-type: lower-greek;
}

Прыклад

<ol>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
</ol>

ol {
	list-style-type: lower-latin;
}

Прыклад

<ol>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
</ol>

ol {
	list-style-type: lower-roman;
}

Прыклад

<ol>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
</ol>

ol {
	list-style-type: upper-alpha;
}

Прыклад

<ol>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
</ol>

ol {
	list-style-type: upper-roman;
}

Прыклад

Дадзены прыклад паказвае, што ўласцівасць color уплывае не толькі на колер тэксту, але і на колер маркераў:

<ul>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
</ul>

ul {
	list-style-type: disc;
	color: red;
}

Глядзіце таксама

уласцівасць list-style-image,
якое задае маркеры ў выглядзе зададзеных карцінак
уласцівасць list-style-position,
якое задае пазіцыю маркераў
уласцівасць list-style,
якое з'яўляецца скарачэннем для маркераў