Propriété list-style CSS
La propriété CSS list-style est une propriété abrégée pour les propriétés de liste suivantes :
Vous pouvez définir toutes les propriétés dans cet ordre : 1- list-style-type, 2- list-style-position, 3- list-style-image.
La propriété list-style peut être définie sur un élément de liste ou sur la liste des éléments (<ul> ou <ol>) et ce style sera appliqué en cascade aux éléments de liste de cette liste.
INFO
Si l'une des propriétés ci-dessus est manquante, elle sera automatiquement définie sur la valeur par défaut.
| Valeur initiale | disc outside none |
|---|---|
| S'applique à | Éléments de liste. |
| Hérité | Oui. |
| Animable | Non. |
| Version | CSS1 |
| Syntaxe DOM | object.style.listStyle = "none"; |
Syntaxe
Syntaxe de la propriété CSS list-style
list-style: list-style-type list-style-position list-style-image | initial | inherit;Exemple de la propriété list-style :
Exemple de la propriété CSS list-style avec les valeurs square inside et circle
<!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 la propriété list-style où le type de liste est spécifié :
Exemple de la propriété CSS list-style avec les valeurs 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 la propriété list-style où la position de la liste est spécifiée :
Exemple de la propriété CSS list-style avec les valeurs inside et 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 de la propriété list-style où une image est définie comme style de liste :
Exemple de la propriété CSS list-style avec la valeur list-style-image
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
ul {
list-style: url('https://fr.w3docs.com/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 ici : 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 ici : 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 ici : Propriété CSS list-style-image |
| initial | Définit la valeur par défaut de la propriété. |
| inherit | Hérite la propriété de son élément parent. |
Pratique
Quels sont les types de la propriété CSS list-style ?