Egenskapen list-style-type

Egenskapen list-style-type låter dig för en ul-lista göra kvadratiska eller cirkulära markörer istället för punkter. För en ol-lista kan du använda romerska siffror eller numrering med bokstäver som latinska eller grekiska istället för vanliga siffror.

Syntax

selektor {
	list-style-type: värde;
}

Värden för ul

Värde	Beskrivning
`circle`	Skapar markörer i form av cirklar.
`disc`	Skapar markörer i form av ifyllda cirklar.
`square`	Skapar markörer i form av kvadrater.
`none`	Tar bort markörer.

Standardvärde: disc.

Värden för ol

Värde	Beskrivning
`armenian`	Traditionell armenisk numrering.
`decimal`	Arabiska siffror.
`decimal-leading-zero`	Arabiska siffror med en nolla framför för siffror mindre än tio.
`georgian`	Traditionell georgisk numrering.
`lower-alpha`	Gemena latinska bokstäver.
`lower-greek`	Gemena grekiska bokstäver.
`lower-latin`	Detta värde är analogt med lower-alpha.
`lower-roman`	Romerska siffror med gemena bokstäver.
`upper-alpha`	Versala latinska bokstäver.
`upper-latin`	Detta värde är analogt med upper-alpha.
`upper-roman`	Romerska siffror med versala bokstäver.
`none`	Tar bort markörer.

Standardvärde: decimal.

Exempel

<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;
}

Exempel

<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;
}

Exempel

<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;
}

Exempel

<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;
}

Exempel

<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;
}

Exempel

<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;
}

Exempel

<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;
}

Exempel

<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;
}

Exempel

<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;
}

Exempel

<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;
}

Exempel

<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;
}

Exempel

<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;
}

Exempel

<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;
}

Exempel

<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;
}

Exempel

Detta exempel visar att egenskapen color påverkar inte bara textens färg utan också markörernas färg:

<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;
}

Se även

egenskapen list-style-image,
som sätter markörer som angivna bilder
egenskapen list-style-position,
som sätter markörernas position
egenskapen list-style,
som är en förkortning för markörer