Eienskap list-style-type

Die eienskap list-style-type laat toe vir 'n lys ul om in plaas van puntsmerkers vierkante of sirkels te maak. Vir 'n lys ol kan in plaas van gewone syfers Romeinse syfers, nommering in die vorm van letters gebruik word: Latyns of Grieks.

Sintaksis

selektor {
	list-style-type: waarde;
}

Waardes vir ul

Waarde	Beskrywing
`circle`	Skep merkers in die vorm van sirkels.
`disc`	Skep merkers in die vorm van ingekleurde sirkels.
`square`	Skep merkers in die vorm van vierkantjies.
`none`	Verwyder merkers.

Verstekwaarde: disc.

Waardes vir ol

Waarde	Beskrywing
`armenian`	Tradisionele Armeense nommering.
`decimal`	Arabiese syfers.
`decimal-leading-zero`	Arabiese syfers met 'n nul voor syfers kleiner as tien.
`georgian`	Tradisionele Georgiese nommering.
`lower-alpha`	Klein Latynse letters.
`lower-greek`	Klein Griekse letters.
`lower-latin`	Hierdie waarde is soortgelyk aan lower-alpha.
`lower-roman`	Romeinse syfers in kleinletters.
`upper-alpha`	Hoofletters Latynse letters.
`upper-latin`	Hierdie waarde is soortgelyk aan upper-alpha.
`upper-roman`	Romeinse syfers in hoofletters.
`none`	Verwyder merkers.

Verstekwaarde: decimal.

Voorbeeld

<ul>
	<li>lys item</li>
	<li>lys item</li>
	<li>lys item</li>
	<li>lys item</li>
	<li>lys item</li>
</ul>

ul {
	list-style-type: disc;
}

Voorbeeld

<ul>
	<li>lys item</li>
	<li>lys item</li>
	<li>lys item</li>
	<li>lys item</li>
	<li>lys item</li>
</ul>

ul {
	list-style-type: circle;
}

Voorbeeld

<ul>
	<li>lys item</li>
	<li>lys item</li>
	<li>lys item</li>
	<li>lys item</li>
	<li>lys item</li>
</ul>

ul {
	list-style-type: square;
}

Voorbeeld

<ul>
	<li>lys item</li>
	<li>lys item</li>
	<li>lys item</li>
	<li>lys item</li>
	<li>lys item</li>
</ul>

ul {
	list-style-type: none;
}

Voorbeeld

<ol>
	<li>lys item</li>
	<li>lys item</li>
	<li>lys item</li>
	<li>lys item</li>
	<li>lys item</li>
</ol>

ol {
	list-style-type: decimal;
}

Voorbeeld

<ol>
	<li>lys item</li>
	<li>lys item</li>
	<li>lys item</li>
	<li>lys item</li>
	<li>lys item</li>
</ol>

ol {
	list-style-type: armenian;
}

Voorbeeld

<ol>
	<li>lys item</li>
	<li>lys item</li>
	<li>lys item</li>
	<li>lys item</li>
	<li>lys item</li>
</ol>

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

Voorbeeld

<ol>
	<li>lys item</li>
	<li>lys item</li>
	<li>lys item</li>
	<li>lys item</li>
	<li>lys item</li>
</ol>

ol {
	list-style-type: georgian;
}

Voorbeeld

<ol>
	<li>lys item</li>
	<li>lys item</li>
	<li>lys item</li>
	<li>lys item</li>
	<li>lys item</li>
</ol>

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

Voorbeeld

<ol>
	<li>lys item</li>
	<li>lys item</li>
	<li>lys item</li>
	<li>lys item</li>
	<li>lys item</li>
</ol>

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

Voorbeeld

<ol>
	<li>lys item</li>
	<li>lys item</li>
	<li>lys item</li>
	<li>lys item</li>
	<li>lys item</li>
</ol>

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

Voorbeeld

<ol>
	<li>lys item</li>
	<li>lys item</li>
	<li>lys item</li>
	<li>lys item</li>
	<li>lys item</li>
</ol>

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

Voorbeeld

<ol>
	<li>lys item</li>
	<li>lys item</li>
	<li>lys item</li>
	<li>lys item</li>
	<li>lys item</li>
</ol>

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

Voorbeeld

<ol>
	<li>lys item</li>
	<li>lys item</li>
	<li>lys item</li>
	<li>lys item</li>
	<li>lys item</li>
</ol>

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

Voorbeeld

Hierdie voorbeeld toon dat die eienskap color nie net die kleur van die teks beïnvloed nie, maar ook die kleur van die merkers:

<ul>
	<li>lys item</li>
	<li>lys item</li>
	<li>lys item</li>
	<li>lys item</li>
	<li>lys item</li>
</ul>

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

Sien ook

die eienskap list-style-image,
wat merkers as spesifieke prente stel
die eienskap list-style-position,
wat die posisie van merkers stel
die eienskap list-style,
wat 'n kortvorm vir merkers is