W3Docs

Apparence

Français

Propriété CSS list-style-type ​

La propriété CSS list-style-type est utilisée pour spécifier le type d’un élément de liste.

Un marqueur de liste peut avoir trois types : des glyphes (circle, disc, square), des systèmes de numérotation et des systèmes alphabétiques.

La couleur du marqueur sera la même que la couleur calculée de l’élément auquel il s’applique. Vous pouvez choisir des couleurs ici.

Seuls les éléments <li> et <summary> ont la valeur "list-item" de la propriété display. Nous pouvons appliquer la propriété list-style-type à tout élément dont display est défini sur list-item. Cette propriété peut être définie sur un élément parent (généralement <ol> ou <ul>).

Initial Valuedisc
Applies toList items.
InheritedYes.
AnimatableNo.
VersionCSS1
DOM Syntaxobject.style.listStyleType = "armenian";

Syntaxe ​

Syntaxe de la propriété CSS list-style-type

css
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 de la propriété list-style-type : ​

Exemple de la propriété CSS list-style-type avec les valeurs square et hebrew

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      ul.list-styles {
        list-style-type: square;
      }
      ul.list-styles2 {
        list-style-type: hebrew;
      }
    </style>
  </head>
  <body>
    <h2>List-style-type property example</h2>
    <ul class="list-styles">
      <li>Appetizers</li>
      <li>Main Course</li>
      <li>Salads</li>
    </ul>
    <ul class="list-styles2">
      <li>Cold Drinks</li>
      <li>Hot Drinks</li>
      <li>Ice-Creams</li>
    </ul>
  </body>
</html>
Try it Yourself »

Résultat ​

CSS list-style-type Property

Exemple de la propriété list-style-type avec la valeur "disc" : ​

Exemple de la propriété list-style-type avec la valeur "disc" :

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .text {
        list-style-type: disc;
      }
    </style>
  </head>
  <body>
    <h1> 
      Example of the list-style-type property with "disc" value.
    </h1>
    <ul class="text">
      <li>Barcelona</li>
      <li>Madrid</li>
      <li>London</li>
    </ul>
  </body>
</html>
Try it Yourself »

Exemple de la propriété list-style-type avec la valeur "decimal" : ​

Exemple de la propriété list-style-type avec la valeur "decimal" :

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .text {
        list-style-type: decimal;
      }
    </style>
  </head>
  <body>
    <h1> 
      Example of the list-style-type property 
    </h1>
    <ul class="text">
      <li>Barcelona</li>
      <li>Madrid</li>
      <li>London</li>
    </ul>
  </body>
</html>
Try it Yourself »

Exemple de la propriété list-style-type avec des listes ordonnées : ​

Exemple de la propriété CSS list-style-type avec circle, square, upper-roman, lower-alpha, armenian, decimal, cjk-ideographic, georgian, upper-alpha et d’autres valeurs

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the 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>List-style-type property example</h2>
    <p>Examples of unordered lists:</p>
    <h3>Circle</h3>
    <ul class="a">
      <li>New York</li>
      <li>Las Vegas</li>
      <li>Washington</li>
    </ul>
    <h3>Square</h3>
    <ul class="b">
      <li>San Francisco</li>
      <li>Los Angeles</li>
      <li>Miami</li>
    </ul>
    <p>Examples of ordered lists:</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>
Try it Yourself »

Valeurs ​

ValueDescriptionPlay it
discCrée un marqueur sous forme de cercle plein. C’est la valeur par défaut de cette propriété.Play it »
armenianCrée un marqueur sous forme de numérotation arménienne traditionnelle.Play it »
circleCrée un marqueur sous forme de cercle.Play it »
cjk-ideographicCrée un marqueur qui est une numérotation idéographique simple.Play it »
decimalCrée un marqueur sous forme de nombre.Play it »
decimal-leading-zeroCrée un marqueur sous forme de nombre avec un zéro initial, par exemple 01, 02, 05...Play it »
georgianCrée un marqueur sous forme de numérotation géorgienne traditionnelle.Play it »
hebrewCrée un marqueur sous forme de numérotation hébraïque traditionnelle.Play it »
hiraganaCrée un marqueur sous forme de numérotation hiragana traditionnelle.Play it »
hiragana-irohaCrée un marqueur sous forme de numérotation hiragana iroha traditionnelle.Play it »
katakanaCrée un marqueur sous forme de numérotation katakana traditionnelle.Play it »
katakana-irohaCrée un marqueur sous forme de numérotation katakana iroha traditionnelle.Play it »
lower-alphaCrée un marqueur sous forme de lower-alpha, par exemple a, b, c, d...Play it »
lower-greekCrée un marqueur sous forme de lower-greek.Play it »
lower-latinCrée un marqueur sous forme de lower-latin, par exemple a, b, c, d...Play it »
lower-romanCrée un marqueur sous forme de lower-roman, par exemple i, ii, iii, iv...Play it »
noneSignifie que le marqueur ne sera pas affiché.Play it »
squareCrée un marqueur sous forme de carré.Play it »
upper-alphaCrée un marqueur sous forme de upper-alpha, par exemple A, B, C, D...Play it »
upper-latinCrée un marqueur sous forme de upper-latin, par exemple A, B, C, D...Play it »
upper-romanCrée un marqueur sous forme de upper-roman, par exemple I, II, III, IV, V...Play it »
initialFait en sorte que la propriété utilise sa valeur par défaut.Play it »
inheritHérite de la propriété de son élément parent.

Practice ​

What does the list-style-type property in CSS specify?

Trouvez-vous cela utile?

Aperçu dual-run — comparez avec les routes Symfony en production.