Свойство 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>елемент от списък</li>
	<li>елемент от списък</li>
	<li>елемент от списък</li>
	<li>елемент от списък</li>
	<li>елемент от списък</li>
</ul>

ul {
	list-style-type: disc;
}

Пример

<ul>
	<li>елемент от списък</li>
	<li>елемент от списък</li>
	<li>елемент от списък</li>
	<li>елемент от списък</li>
	<li>елемент от списък</li>
</ul>

ul {
	list-style-type: circle;
}

Пример

<ul>
	<li>елемент от списък</li>
	<li>елемент от списък</li>
	<li>елемент от списък</li>
	<li>елемент от списък</li>
	<li>елемент от списък</li>
</ul>

ul {
	list-style-type: square;
}

Пример

<ul>
	<li>елемент от списък</li>
	<li>елемент от списък</li>
	<li>елемент от списък</li>
	<li>елемент от списък</li>
	<li>елемент от списък</li>
</ul>

ul {
	list-style-type: none;
}

Пример

<ol>
	<li>елемент от списък</li>
	<li>елемент от списък</li>
	<li>елемент от списък</li>
	<li>елемент от списък</li>
	<li>елемент от списък</li>
</ol>

ol {
	list-style-type: decimal;
}

Пример

<ol>
	<li>елемент от списък</li>
	<li>елемент от списък</li>
	<li>елемент от списък</li>
	<li>елемент от списък</li>
	<li>елемент от списък</li>
</ol>

ol {
	list-style-type: armenian;
}

Пример

<ol>
	<li>елемент от списък</li>
	<li>елемент от списък</li>
	<li>елемент от списък</li>
	<li>елемент от списък</li>
	<li>елемент от списък</li>
</ol>

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

Пример

<ol>
	<li>елемент от списък</li>
	<li>елемент от списък</li>
	<li>елемент от списък</li>
	<li>елемент от списък</li>
	<li>елемент от списък</li>
</ol>

ol {
	list-style-type: georgian;
}

Пример

<ol>
	<li>елемент от списък</li>
	<li>елемент от списък</li>
	<li>елемент от списък</li>
	<li>елемент от списък</li>
	<li>елемент от списък</li>
</ol>

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

Пример

<ol>
	<li>елемент от списък</li>
	<li>елемент от списък</li>
	<li>елемент от списък</li>
	<li>елемент от списък</li>
	<li>елемент от списък</li>
</ol>

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

Пример

<ol>
	<li>елемент от списък</li>
	<li>елемент от списък</li>
	<li>елемент от списък</li>
	<li>елемент от списък</li>
	<li>елемент от списък</li>
</ol>

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

Пример

<ol>
	<li>елемент от списък</li>
	<li>елемент от списък</li>
	<li>елемент от списък</li>
	<li>елемент от списък</li>
	<li>елемент от списък</li>
</ol>

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

Пример

<ol>
	<li>елемент от списък</li>
	<li>елемент от списък</li>
	<li>елемент от списък</li>
	<li>елемент от списък</li>
	<li>елемент от списък</li>
</ol>

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

Пример

<ol>
	<li>елемент от списък</li>
	<li>елемент от списък</li>
	<li>елемент от списък</li>
	<li>елемент от списък</li>
	<li>елемент от списък</li>
</ol>

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

Пример

Този пример показва, че свойството color влияе не само на цвета на текста, но и на цвета на маркерите:

<ul>
	<li>елемент от списък</li>
	<li>елемент от списък</li>
	<li>елемент от списък</li>
	<li>елемент от списък</li>
	<li>елемент от списък</li>
</ul>

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

Вижте също

свойство list-style-image,
което задава маркери под формата на зададени изображения
свойство list-style-position,
което задава позицията на маркерите
свойство list-style,
което е съкращение за маркерите