Eigenschap list-style-type

De eigenschap list-style-type maakt het mogelijk voor een ul lijst om in plaats van stippen als markeringen vierkanten of cirkels te gebruiken. Voor een ol lijst kan in plaats van gewone cijfers Romeinse cijfers, of nummering in de vorm van letters: Latijnse of Griekse, worden gebruikt.

Syntaxis

selector {
	list-style-type: waarde;
}

Waarden voor ul

Waarde	Beschrijving
`circle`	Maakt markeringen in de vorm van cirkels.
`disc`	Maakt markeringen in de vorm van ingevulde cirkels.
`square`	Maakt markeringen in de vorm van vierkantjes.
`none`	Verwijdert de markeringen.

Standaardwaarde: disc.

Waarden voor ol

Waarde	Beschrijving
`armenian`	Traditionele Armeense nummering.
`decimal`	Arabische cijfers.
`decimal-leading-zero`	Arabische cijfers met een nul ervoor voor cijfers kleiner dan tien.
`georgian`	Traditionele Georgische nummering.
`lower-alpha`	Kleine Latijnse letters.
`lower-greek`	Kleine Griekse letters.
`lower-latin`	Deze waarde is analoog aan lower-alpha.
`lower-roman`	Romeinse cijfers in kleine letters.
`upper-alpha`	Hoofdletters Latijnse letters.
`upper-latin`	Deze waarde is analoog aan upper-alpha.
`upper-roman`	Romeinse cijfers in hoofdletters.
`none`	Verwijdert de markeringen.

Standaardwaarde: decimal.

Voorbeeld

<ul>
	<li>lijstitem</li>
	<li>lijstitem</li>
	<li>lijstitem</li>
	<li>lijstitem</li>
	<li>lijstitem</li>
</ul>

ul {
	list-style-type: disc;
}

Voorbeeld

<ul>
	<li>lijstitem</li>
	<li>lijstitem</li>
	<li>lijstitem</li>
	<li>lijstitem</li>
	<li>lijstitem</li>
</ul>

ul {
	list-style-type: circle;
}

Voorbeeld

<ul>
	<li>lijstitem</li>
	<li>lijstitem</li>
	<li>lijstitem</li>
	<li>lijstitem</li>
	<li>lijstitem</li>
</ul>

ul {
	list-style-type: square;
}

Voorbeeld

<ul>
	<li>lijstitem</li>
	<li>lijstitem</li>
	<li>lijstitem</li>
	<li>lijstitem</li>
	<li>lijstitem</li>
</ul>

ul {
	list-style-type: none;
}

Voorbeeld

<ol>
	<li>lijstitem</li>
	<li>lijstitem</li>
	<li>lijstitem</li>
	<li>lijstitem</li>
	<li>lijstitem</li>
</ol>

ol {
	list-style-type: decimal;
}

Voorbeeld

<ol>
	<li>lijstitem</li>
	<li>lijstitem</li>
	<li>lijstitem</li>
	<li>lijstitem</li>
	<li>lijstitem</li>
</ol>

ol {
	list-style-type: armenian;
}

Voorbeeld

<ol>
	<li>lijstitem</li>
	<li>lijstitem</li>
	<li>lijstitem</li>
	<li>lijstitem</li>
	<li>lijstitem</li>
</ol>

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

Voorbeeld

<ol>
	<li>lijstitem</li>
	<li>lijstitem</li>
	<li>lijstitem</li>
	<li>lijstitem</li>
	<li>lijstitem</li>
</ol>

ol {
	list-style-type: georgian;
}

Voorbeeld

<ol>
	<li>lijstitem</li>
	<li>lijstitem</li>
	<li>lijstitem</li>
	<li>lijstitem</li>
	<li>lijstitem</li>
</ol>

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

Voorbeeld

<ol>
	<li>lijstitem</li>
	<li>lijstitem</li>
	<li>lijstitem</li>
	<li>lijstitem</li>
	<li>lijstitem</li>
</ol>

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

Voorbeeld

<ol>
	<li>lijstitem</li>
	<li>lijstitem</li>
	<li>lijstitem</li>
	<li>lijstitem</li>
	<li>lijstitem</li>
</ol>

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

Voorbeeld

<ol>
	<li>lijstitem</li>
	<li>lijstitem</li>
	<li>lijstitem</li>
	<li>lijstitem</li>
	<li>lijstitem</li>
</ol>

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

Voorbeeld

<ol>
	<li>lijstitem</li>
	<li>lijstitem</li>
	<li>lijstitem</li>
	<li>lijstitem</li>
	<li>lijstitem</li>
</ol>

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

Voorbeeld

<ol>
	<li>lijstitem</li>
	<li>lijstitem</li>
	<li>lijstitem</li>
	<li>lijstitem</li>
	<li>lijstitem</li>
</ol>

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

Voorbeeld

Dit voorbeeld toont aan dat de eigenschap color niet alleen van invloed is op de tekstkleur, maar ook op de kleur van de markeringen:

<ul>
	<li>lijstitem</li>
	<li>lijstitem</li>
	<li>lijstitem</li>
	<li>lijstitem</li>
	<li>lijstitem</li>
</ul>

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

Zie ook

de eigenschap list-style-image,
die markeringen instelt in de vorm van opgegeven afbeeldingen
de eigenschap list-style-position,
die de positie van de markeringen instelt
de eigenschap list-style,
die een verkorte notatie is voor markeringen