Właściwość list-style-type

Właściwość list-style-type pozwala dla listy ul zamiast znaczników-kropek zrobić kwadraty lub okręgi. Dla listy ol zamiast zwykłych cyfr można zrobić rzymskie, numerację w postaci liter: łacińskich lub greckich.

Składnia

selektor {
	list-style-type: wartość;
}

Wartości dla ul

Wartość	Opis
`circle`	Tworzy znaczniki w postaci kółek.
`disc`	Tworzy znaczniki w postaci wypełnionych kółek.
`square`	Tworzy znaczniki w postaci kwadracików.
`none`	Usuwa znaczniki.

Wartość domyślna: disc.

Wartości dla ol

Wartość	Opis
`armenian`	Tradycyjna numeracja ormiańska.
`decimal`	Cyfry arabskie.
`decimal-leading-zero`	Cyfry arabskie z zerem z przodu dla cyfr mniejszych niż dziesięć.
`georgian`	Tradycyjna numeracja gruzińska.
`lower-alpha`	Małe litery łacińskie.
`lower-greek`	Małe litery greckie.
`lower-latin`	Ta wartość jest analogiczna do lower-alpha.
`lower-roman`	Liczby rzymskie w dolnym rejestrze.
`upper-alpha`	Wielkie litery łacińskie.
`upper-latin`	Ta wartość jest analogiczna do upper-alpha.
`upper-roman`	Liczby rzymskie w górnym rejestrze.
`none`	Usuwa znaczniki.

Wartość domyślna: decimal.

Przykład

<ul>
	<li>element listy</li>
	<li>element listy</li>
	<li>element listy</li>
	<li>element listy</li>
	<li>element listy</li>
</ul>

ul {
	list-style-type: disc;
}

Przykład

<ul>
	<li>element listy</li>
	<li>element listy</li>
	<li>element listy</li>
	<li>element listy</li>
	<li>element listy</li>
</ul>

ul {
	list-style-type: circle;
}

Przykład

<ul>
	<li>element listy</li>
	<li>element listy</li>
	<li>element listy</li>
	<li>element listy</li>
	<li>element listy</li>
</ul>

ul {
	list-style-type: square;
}

Przykład

<ul>
	<li>element listy</li>
	<li>element listy</li>
	<li>element listy</li>
	<li>element listy</li>
	<li>element listy</li>
</ul>

ul {
	list-style-type: none;
}

Przykład

<ol>
	<li>element listy</li>
	<li>element listy</li>
	<li>element listy</li>
	<li>element listy</li>
	<li>element listy</li>
</ol>

ol {
	list-style-type: decimal;
}

Przykład

<ol>
	<li>element listy</li>
	<li>element listy</li>
	<li>element listy</li>
	<li>element listy</li>
	<li>element listy</li>
</ol>

ol {
	list-style-type: armenian;
}

Przykład

<ol>
	<li>element listy</li>
	<li>element listy</li>
	<li>element listy</li>
	<li>element listy</li>
	<li>element listy</li>
</ol>

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

Przykład

<ol>
	<li>element listy</li>
	<li>element listy</li>
	<li>element listy</li>
	<li>element listy</li>
	<li>element listy</li>
</ol>

ol {
	list-style-type: georgian;
}

Przykład

<ol>
	<li>element listy</li>
	<li>element listy</li>
	<li>element listy</li>
	<li>element listy</li>
	<li>element listy</li>
</ol>

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

Przykład

<ol>
	<li>element listy</li>
	<li>element listy</li>
	<li>element listy</li>
	<li>element listy</li>
	<li>element listy</li>
</ol>

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

Przykład

<ol>
	<li>element listy</li>
	<li>element listy</li>
	<li>element listy</li>
	<li>element listy</li>
	<li>element listy</li>
</ol>

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

Przykład

<ol>
	<li>element listy</li>
	<li>element listy</li>
	<li>element listy</li>
	<li>element listy</li>
	<li>element listy</li>
</ol>

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

Przykład

<ol>
	<li>element listy</li>
	<li>element listy</li>
	<li>element listy</li>
	<li>element listy</li>
	<li>element listy</li>
</ol>

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

Przykład

<ol>
	<li>element listy</li>
	<li>element listy</li>
	<li>element listy</li>
	<li>element listy</li>
	<li>element listy</li>
</ol>

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

Przykład

Ten przykład pokazuje, że właściwość color wpływa nie tylko na kolor tekstu, ale także na kolor znaczników:

<ul>
	<li>element listy</li>
	<li>element listy</li>
	<li>element listy</li>
	<li>element listy</li>
	<li>element listy</li>
</ul>

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

Zobacz też

właściwość list-style-image,
która ustawia znaczniki w postaci zadanych obrazków
właściwość list-style-position,
która ustawia pozycję znaczników
właściwość list-style,
która jest skrótem dla znaczników