Proprietà list-style-type

La proprietà list-style-type permette per la lista ul di creare quadrati o cerchi al posto dei marcatori a punti. Per la lista ol al posto dei normali numeri si possono usare numeri romani, o una numerazione sotto forma di lettere: latine o greche.

Sintassi

selettore {
	list-style-type: valore;
}

Valori per ul

Valore	Descrizione
`circle`	Crea marcatori sotto forma di cerchi.
`disc`	Crea marcatori sotto forma di cerchi pieni.
`square`	Crea marcatori sotto forma di quadrati.
`none`	Rimuove i marcatori.

Valore predefinito: disc.

Valori per ol

Valore	Descrizione
`armenian`	Numerazione tradizionale armena.
`decimal`	Numeri arabi.
`decimal-leading-zero`	Numeri arabi con uno zero iniziale per numeri inferiori a dieci.
`georgian`	Numerazione tradizionale georgiana.
`lower-alpha`	Lettere latine minuscole.
`lower-greek`	Lettere greche minuscole.
`lower-latin`	Questo valore è analogo a lower-alpha.
`lower-roman`	Numeri romani in minuscolo.
`upper-alpha`	Lettere latine maiuscole.
`upper-latin`	Questo valore è analogo a upper-alpha.
`upper-roman`	Numeri romani in maiuscolo.
`none`	Rimuove i marcatori.

Valore predefinito: decimal.

Esempio

<ul>
	<li>voce di lista</li>
	<li>voce di lista</li>
	<li>voce di lista</li>
	<li>voce di lista</li>
	<li>voce di lista</li>
</ul>

ul {
	list-style-type: disc;
}

Esempio

<ul>
	<li>voce di lista</li>
	<li>voce di lista</li>
	<li>voce di lista</li>
	<li>voce di lista</li>
	<li>voce di lista</li>
</ul>

ul {
	list-style-type: circle;
}

Esempio

<ul>
	<li>voce di lista</li>
	<li>voce di lista</li>
	<li>voce di lista</li>
	<li>voce di lista</li>
	<li>voce di lista</li>
</ul>

ul {
	list-style-type: square;
}

Esempio

<ul>
	<li>voce di lista</li>
	<li>voce di lista</li>
	<li>voce di lista</li>
	<li>voce di lista</li>
	<li>voce di lista</li>
</ul>

ul {
	list-style-type: none;
}

Esempio

<ol>
	<li>voce di lista</li>
	<li>voce di lista</li>
	<li>voce di lista</li>
	<li>voce di lista</li>
	<li>voce di lista</li>
</ol>

ol {
	list-style-type: decimal;
}

Esempio

<ol>
	<li>voce di lista</li>
	<li>voce di lista</li>
	<li>voce di lista</li>
	<li>voce di lista</li>
	<li>voce di lista</li>
</ol>

ol {
	list-style-type: armenian;
}

Esempio

<ol>
	<li>voce di lista</li>
	<li>voce di lista</li>
	<li>voce di lista</li>
	<li>voce di lista</li>
	<li>voce di lista</li>
</ol>

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

Esempio

<ol>
	<li>voce di lista</li>
	<li>voce di lista</li>
	<li>voce di lista</li>
	<li>voce di lista</li>
	<li>voce di lista</li>
</ol>

ol {
	list-style-type: georgian;
}

Esempio

<ol>
	<li>voce di lista</li>
	<li>voce di lista</li>
	<li>voce di lista</li>
	<li>voce di lista</li>
	<li>voce di lista</li>
</ol>

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

Esempio

<ol>
	<li>voce di lista</li>
	<li>voce di lista</li>
	<li>voce di lista</li>
	<li>voce di lista</li>
	<li>voce di lista</li>
</ol>

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

Esempio

<ol>
	<li>voce di lista</li>
	<li>voce di lista</li>
	<li>voce di lista</li>
	<li>voce di lista</li>
	<li>voce di lista</li>
</ol>

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

Esempio

<ol>
	<li>voce di lista</li>
	<li>voce di lista</li>
	<li>voce di lista</li>
	<li>voce di lista</li>
	<li>voce di lista</li>
</ol>

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

Esempio

<ol>
	<li>voce di lista</li>
	<li>voce di lista</li>
	<li>voce di lista</li>
	<li>voce di lista</li>
	<li>voce di lista</li>
</ol>

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

Esempio

<ol>
	<li>voce di lista</li>
	<li>voce di lista</li>
	<li>voce di lista</li>
	<li>voce di lista</li>
	<li>voce di lista</li>
</ol>

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

Esempio

Questo esempio mostra che la proprietà color influisce non solo sul colore del testo, ma anche sul colore dei marcatori:

<ul>
	<li>voce di lista</li>
	<li>voce di lista</li>
	<li>voce di lista</li>
	<li>voce di lista</li>
	<li>voce di lista</li>
</ul>

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

Vedi anche

la proprietà list-style-image,
che imposta marcatori sotto forma di immagini specificate
la proprietà list-style-position,
che imposta la posizione dei marcatori
la proprietà list-style,
che è una scorciatoia per i marcatori