w3docs logo

Propriété CSS list-style-type

La propriété CSS list-style-type définit le type de la puce d'un élément de liste.

Un créateur de liste peut avoir trois types: glyphs (cercle, disque, carré), systèmes de numérotation, et systèmes alphabétiques.

La couleur de créateur sera la même que la couleur calculée de l'élément à lequel elle est appliquée. Vous pouvez choisir les couleurs d'ici.

Valeur initiale disc
Appliquée à Éléments de liste.
Héritée Oui.
Animable Non.
Version CSS1
Syntaxe DOM object.style.listStyleType = "armenian";

Syntaxe

list-style-type: disc | armenian | circle | cjk-ideographic | decimal | decimal-leading-zero | georgian | hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha | lower-alpha | lower-greek | lower-latin | lower-roman | none | square | upper-alpha | upper-latin | upper-roman | initial | inherit;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      ul.list-styles{ 
      list-style-type: square;
      }
      ul.list-styles2 {
      list-style-type: hebrew;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété list-style-type </h2>
    <ul class="list-styles">
      <li>Apéritifs</li>
      <li>Plat principal</li>
      <li>Salades</li>
    </ul>
    <ul class="list-styles2">
      <li>Boissons gazeuses</li>
      <li>Boissons chaudes</li>
      <li>Glaciers</li>
    </ul>
  </body>
</html>

Un autre exemple avec des listes ordonnées:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      ul.a {list-style-type: circle;}
      ul.b {list-style-type: square;}
      ol.c {list-style-type: upper-roman;}
      ol.d {list-style-type: lower-alpha;}
      ol.e {list-style-type: armenian;}
      ol.f {list-style-type: decimal;}
      ol.g {list-style-type: cjk-ideographic;}
      ol.h {list-style-type: decimal-leading-zero;}
      ol.i {list-style-type: georgian;}
      ol.j {list-style-type: hebrew;}
      ol.k {list-style-type: hiragana;}
      ol.l {list-style-type: hiragana-iroha;}
      ol.m {list-style-type: katakana;}
      ol.n {list-style-type: katakana-iroha;}
      ol.o {list-style-type: lower-greek;}
      ol.p {list-style-type: lower-latin;}
      ol.q {list-style-type: lower-roman;}
      ol.r {list-style-type: none;}
      ol.s {list-style-type: upper-alpha;}
      ol.t {list-style-type: upper-latin;}
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété list-style-type </h2>
    <p>Exemples de listes non-ordonnées:</p>
    <h3>Cercle</h3>
    <ul class="a">
      <li>New York</li>
      <li>Las Vegas</li>
      <li>Washington</li>
    </ul>
    <h3>Carré</h3>
    <ul class="b">
      <li>San Francisco</li>
      <li>Los Angeles</li>
      <li>Miami</li>
    </ul>
    <p>Exemples de listes ordonnées:</p>
    <h3>Upper-roman</h3>
    <ol class="c">
      <li>Barcelona</li>
      <li>Madrid</li>
      <li>London</li>
    </ol>
    <h3>Lower-alpha</h3>
    <ol class="d">
      <li>Dubai</li>
      <li>Anu Dhabi</li>
      <li>Qatar</li>
    </ol>
    <h3>Armenian</h3>
    <ol class="e">
      <li>Yerevan</li>
      <li>Paris</li>
      <li>Rome</li>
    </ol>
    <h3>Decimal</h3>
    <ol class="f">
      <li>Sydney</li>
      <li>Honk Kong</li>
      <li>Moscow</li>
    </ol>
    <h3>Cjk-ideographic</h3>
    <ol class="g">
      <li>Kiev</li>
      <li>Saint-Petersburg</li>
      <li>Tula</li>
    </ol>
    <h3>Decimal-leading-zero</h3>
    <ol class="h">
      <li>Bangkok</li>
      <li>Gyumri</li>
      <li>Valencia</li>
    </ol>
    <h3>Georgian</h3>
    <ol class="i">
      <li>Madrid</li>
      <li>Barcelona</li>
      <li>Prague</li>
    </ol>
    <h3>Hebrew</h3>
    <ol class="j">
      <li>Jerusalem</li>
      <li>Toronto</li>
      <li>Prague</li>
    </ol>
    <h3>Hiragana</h3>
    <ol class="k">
      <li>Cairo</li>
      <li>Tokyo</li>
      <li>Athens</li>
    </ol>
    <h3>Hiragana-iroha</h3>
    <ol class="l">
      <li>Tehran</li>
      <li>Tavriz</li>
      <li>Tel Aviv</li>
    </ol>
    <h3>Katakana</h3>
    <ol class="m">
      <li>Munich</li>
      <li>Berlin</li>
      <li>Bavaria</li>
    </ol>
    <h3>Katakana-iroha</h3>
    <ol class="n">
      <li>Brussels</li>
      <li>Istanbul</li>
      <li>Sydney</li>
    </ol>
    <h3>Lower-greek</h3>
    <ol class="o">
      <li>Seville</li>
      <li>Granada</li>
      <li>Venice</li>
    </ol>
    <h3>Lower-latin</h3>
    <ol class="p">
      <li>Budapest</li>
      <li>Vienna</li>
      <li>Amsterdam</li>
    </ol>
    <h3>Lower-roman</h3>
    <ol class="q">
      <li>Buenos Aires</li>
      <li>Rio de Janeiro</li>
      <li>San Paolo</li>
    </ol>
    <h3>None</h3>
    <ol class="r">
      <li>Vilnius</li>
      <li>Tallin</li>
      <li>Riga</li>
    </ol>
    <h3>Upper-alpha</h3>
    <ol class="s">
      <li>Montreal</li>
      <li>Melbourne</li>
      <li>Edinburgh</li>
    </ol>
    <h3>Upper-latin</h3>
    <ol class="t">
      <li>Dublin</li>
      <li>Mexico</li>
      <li>Florence</li>
    </ol>
  </body>
</html>

Valeurs

Valeur Description
disc Crée un marqueur comme un cercle rempli. C'est la valeur initiale de cette propriété.
armenian Crée un marqueur comme une numérotation traditionelle arménienne.
circle Crée un marqueur comme un cercle.
cjk-ideographic Crée un marqueur qui sont numéros idéographiques simples.
decimal Crée un marqueur comme un numéro.
decimal-leading-zero Crée comme un numéro avec un zéro non significatif tel que 01,02,05...
georgian Crée un marqueur comme une numérotation traditionelle géorgienne.
hebrew Crée un marqueur comme une numérotation traditionelle hébraïque.
hiragana Crée un marqueur comme une numérotation traditionelle Hiragana.
hiragana-iroha Crée un marqueur comme une numérotation traditionelle Hiragana iroha.
katakana Crée un marqueur comme une numérotation traditionelle Katakana.
katakana-iroha Crée un marqueur comme une numérotation traditionelle Katakana iroha.
lower-alpha Crée un marqueur comme lower-alpha tel que as a,b,c,d...
lower-greek Crée un marqueur comme lower-greek.
lower-latin Crée un marqueur comme lower-latin tel que a,b,c,d...
lower-roman Crée un marqueur comme lower-roman tel que i,ii,iii,iv...
none Signifie que le marqueur ne sera pas affiché.
square Crée un marqueur comme comme un carré.
upper-alpha Crée un marqueur comme upper-alpha tel que A,B,C,D...
upper-latin Crée un marqueur comme upper-latin tel que A,B,C,D...
upper-roman Crée un marqueur comme upper-roman tel que I,II,III,IV,V...
initial Définit la valeur initiale.
inherit Hérite la propriété de l'élément parent.

Support de Navigateurs

chrome firefox safari opera
1.0+ 1.0+ 1.0+ 3.5+

Pratiquez vos connaissances

Quels types de listes peuvent être créés avec la propriété list-style-type en CSS ?
Trouvez-vous cela utile?