Својство 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,
кое е кратенка за маркерите