La propriété CSS list-style
Propriété raccourcie pour list-style-type, list-style-position et list-style-image en CSS. Syntaxe et exemples pratiques.
La propriété CSS list-style est un raccourci qui vous permet de définir trois propriétés de marqueur de liste en une seule déclaration :
list-style-type— la forme du marqueur ou le style de compteur (disc,circle,square,decimal,lower-roman,none…).list-style-position— si le marqueur se trouveoutsidede la boîte de contenu (valeur par défaut) ouinside.list-style-image— une image à utiliser comme marqueur à la place du marqueur basé sur le type.
Cette page couvre la syntaxe raccourcie, la correspondance de ses valeurs avec les trois propriétés individuelles, ainsi que les utilisations courantes en pratique.
Fonctionnement du raccourci
Vous pouvez indiquer les valeurs dans n'importe quel ordre, mais l'ordre conventionnel est type → position → image :
list-style: square inside url('marker.png');Il n'est pas nécessaire de fournir les trois valeurs. Toute propriété individuelle omise est réinitialisée à sa valeur initiale — écrire list-style: square équivaut donc à list-style: square outside none. Cette réinitialisation peut silencieusement annuler un list-style-position défini ailleurs, c'est pourquoi il est préférable d'utiliser les propriétés individuelles lorsque vous ne souhaitez modifier qu'un seul aspect.
La propriété peut être appliquée à un élément de liste, ou à la liste elle-même (<ul> ou <ol>), où elle se cascade vers chaque élément de cette liste.
Lorsque vous fournissez à la fois un list-style-type et un list-style-image, le type joue le rôle de valeur de repli : l'image est affichée si elle se charge correctement, et le marqueur de type apparaît si l'image est manquante ou ne se charge pas. Conserver une valeur de type constitue un bon filet de sécurité.
Pour masquer complètement les marqueurs, utilisez list-style: none; — pratique pour les menus de navigation construits à partir de listes <ul>.
| Valeur initiale | disc outside none |
|---|---|
| S'applique à | Éléments de liste. |
| Héritage | Oui. |
| Animable | Non. |
| Version | CSS1 |
| Syntaxe DOM | object.style.listStyle = "none"; |
Syntaxe
list-style: list-style-type list-style-position list-style-image | initial | inherit;Exemple avec les marqueurs circle et square inside
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example1 {
list-style: circle;
}
.example2 {
list-style: square inside;
}
</style>
</head>
<body>
List 1
<ul class="example1">
<li>List Item1</li>
<li>List Item2</li>
<li>List Item3</li>
</ul>
List 2
<ul class="example2">
<li>List Item A</li>
<li>List Item B</li>
<li>List Item C</li>
</ul>
</body>
</html>Résultat
Exemple de définition d'un type de marqueur (lower-greek et lower-latin)
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
ul:nth-of-type(1) {
list-style: lower-greek;
}
ul:nth-of-type(2) {
list-style: lower-latin;
}
</style>
</head>
<body>
<h2>List-style property example</h2>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</body>
</html>Exemple de positionnement du marqueur (inside vs outside)
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.inside {
list-style: inside;
}
.outside {
list-style: outside;
}
li {
border: 1px solid #ccc;
}
</style>
</head>
<body>
<h2>List-style property example</h2>
<h3>List-style is positioned "inside":</h3>
<ul class="inside">
<li>Chocolate</li>
<li>Candies</li>
<li>Lollipops</li>
</ul>
<h3>List-style is positioned "outside":</h3>
<ul class="outside">
<li>Cold Drinks</li>
<li>Hot Drinks</li>
<li>Ice-Creams</li>
</ul>
</body>
</html>Exemple utilisant une image comme marqueur
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
ul {
list-style: url('/uploads/media/default/0001/01/03d3f916bd5c266dd5008d5c210478cc730437eb.png');
}
</style>
</head>
<body>
<h2>List-style property example</h2>
<ul>
<li>Chocolate</li>
<li>Candies</li>
<li>Lollipops</li>
</ul>
</body>
</html>Valeurs
| Valeur | Description |
|---|---|
| list-style-type | Permet de définir le type de marqueur de l'élément de liste. En savoir plus : propriété CSS list-style-type |
| list-style-position | Permet de définir l'emplacement du marqueur de l'élément de liste. En savoir plus : propriété CSS list-style-position |
| list-style-image | Permet de placer une image à la place du marqueur de l'élément de liste. En savoir plus : propriété CSS list-style-image |
| initial | Applique la valeur par défaut de la propriété. |
| inherit | Hérite la propriété de son élément parent. |