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>

Essayez-vous-même!

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>

Essayez-vous-même!

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.