Propriété list-style-type

La propriété list-style-type permet pour une liste ul de remplacer les points par des carrés ou des cercles. Pour une liste ol, au lieu des chiffres normaux, on peut utiliser des chiffres romains, une numérotation en lettres : latines ou grecques.

Syntaxe

sélecteur {
	list-style-type: valeur;
}

Valeurs pour ul

Valeur	Description
`circle`	Crée des marqueurs sous forme de cercles vides.
`disc`	Crée des marqueurs sous forme de cercles pleins.
`square`	Crée des marqueurs sous forme de carrés.
`none`	Supprime les marqueurs.

Valeur par défaut : disc.

Valeurs pour ol

Valeur	Description
`armenian`	Numérotation arménienne traditionnelle.
`decimal`	Chiffres arabes.
`decimal-leading-zero`	Chiffres arabes avec un zéro devant pour les chiffres inférieurs à dix.
`georgian`	Numérotation géorgienne traditionnelle.
`lower-alpha`	Lettres latines minuscules.
`lower-greek`	Lettres grecques minuscules.
`lower-latin`	Cette valeur est analogue à lower-alpha.
`lower-roman`	Chiffres romains en minuscules.
`upper-alpha`	Lettres latines majuscules.
`upper-latin`	Cette valeur est analogue à upper-alpha.
`upper-roman`	Chiffres romains en majuscules.
`none`	Supprime les marqueurs.

Valeur par défaut : decimal.

Exemple

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

Exemple

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

Exemple

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

Exemple

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

Exemple

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

Exemple

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

Exemple

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

Exemple

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

Exemple

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

Exemple

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

Exemple

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

Exemple

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

Exemple

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

Exemple

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

Exemple

Cet exemple montre que la propriété color affecte non seulement la couleur du texte, mais aussi la couleur des marqueurs :

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

Voir aussi

la propriété list-style-image,
qui définit les marqueurs sous forme d'images spécifiées
la propriété list-style-position,
qui définit la position des marqueurs
la propriété list-style,
qui est un raccourci pour les marqueurs