Propriété CSS list-style

❮ Précédent Suivant ❯

La propriété CSS list-style est une propriété raccourcie à l'aide de laquelle on peut définir toutes les propriétés list-style (list-style-image, list-style-position, list-style-type) à la fois.

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 va tomber en cascade et sera appliqué aux éléments de liste.

S'il y a une propriété manquant des propriétés mentionnées ci-dessus, cela va automatiquement la définir à l'initiale.

Valeur initiale	disc outside none
Appliquée à	Éléments de liste.
Héritée	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

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .example1{
      list-style: circle;
      }
      .example2{
      list-style: square inside;
      }
    </style>
  </head>
  <body>
    Liste 1
    <ul class="example1">
      <li>Élément de liste1</li>
      <li>Élément de liste2</li>
      <li>Élément de liste3</li>
    </ul>
    Liste 2
    <ul class="example2">
      <li>Élément de liste A</li>
      <li>Élément de liste B</li>
      <li>Élément de liste C</li>
    </ul>
  </body>
</html>

Essayez-vous-même!

Essayons un autre exemple, où le type de la liste est spécifié.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du 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>Exemple de la propriété list-style</h2>
    <ul>
      <li>Élément</li>
      <li>Élément</li>
      <li>Élément</li>
    </ul>
    <ul>
      <li>Élément</li>
      <li>Élément</li>
      <li>Élément</li>
    </ul>
  </body>
</html>

Essayez-vous-même!

Un autre exemple, où la position de la liste est spécifiée.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .inside { 
      list-style: inside; 
      }
      .outside { 
      list-style: outside; 
      }
      li { 
      border: 1px solid #ccc; 
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété list-style</h2>
    <h3>List-style est positionnée "inside":</h3>
    <ul class="inside">
      <li>Chocolat</li>
      <li>Sucreries</li>
      <li>Sucettes</li>
    </ul>
    <h3>List-style is positioned "outside":</h3>
    <ul class="outside">
      <li>Boissons gazeuses</li>
      <li>Boissons chauds</li>
      <li>Glaciers</li>
    </ul>
  </body>
</html>

Essayez-vous-même!

Un autre exemple, où une image est définie comme un style de liste.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      ul {
      list-style: url('/uploads/media/default/0001/01/03d3f916bd5c266dd5008d5c210478cc730437eb.png');
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété list-style </h2>
    <ul>
      <li>Chocolat</li>
      <li>Sucreries</li>
      <li>Sucettes</li>
    </ul>
  </body>
</html>

Essayez-vous-même!

Valeurs

Valeur	Description
list-style-type	Utilisée pour définir le type du créateur de l'élément de liste. Voyez plus ici: Propriété CSS list-style-type
list-style-position	Utilisée pour définir où le créateur de l'élément de liste sera placé. Voyez plus ici: Propriété CSS list-style-position
list-style-image	Utilisée pour placer une image au lieu du créateur de l'élément de liste. Voyez plus ici: Propriété CSS list-style-image
initial	Définit la valeur initiale.
inherit	Hérite la propriété de l'élément parent.