list-style-type

  • Raccourci de la révision : CSS/list-style-type
  • Titre de la révision : list-style-type
  • ID de la révision : 340977
  • Créé :
  • Créateur : FredB
  • Version actuelle ? Non
  • Commentaire

Contenu de la révision

{{ CSSRef() }} {{ outdated() }}

Résumé

La propriété CSS list-style-type définit l'apparence des puces des éléments d'une liste. Comme c'est le seul dont la valeur par défaut est display:list-item, c'est généralement un élément {{HTMLElement("li")}}, mais cela peut être n'importe quel élément avec cette valeur de la propriété {{cssxref("display")}}

  • {{Xref_cssinitial}} disc
  • S'applique à éléments avec de type display: list-item
  • {{Xref_cssinherited}} oui
  • Média {{Xref_cssvisual()}}
  • {{Xref_csscomputed}} comme spécifié

La couleur du marqueur sera la même que la couleur calculée de l'élément à laquelle il s'applique.

Syntaxe

list-style-type: <list-style-type> | {{cssxref("none")}} | {{cssxref("inherit")}}

Valeurs

none
Aucune puce n'est affichée.

<list-style-type> est l'une des valeurs suivantes :

disc
  • Un cercle plein (valeur par défaut)
circle
  • Un cercle évidé
square
  • Un carré plein
decimal
  • Nombre décimaux
  • Commençant à 1.
decimal-leading-zero
  • Nombres décimaux
  • Commençant par un 0
  • (e.g., 01, 02, 03, ... 98, 99)
lower-roman
  • Lowercase roman numerals
  • (i, ii, iii, iv, v, etc.)
upper-roman
  • Chiffres romains majuscules
  • (I, II, III, IV, V, etc.)
lower-greek
  • Grec classique minuscules
  • alpha, beta, gamma, ...
  • (α, β, γ, ...)
lower-alpha | lower-latin
  • Lettres minuscules ASCII
  • (a, b, c, ... z)
  • lower-latin n'est pas supporté dans IE7
  • Voir la section {{ anch("") }}
upper-alpha | upper-latin
  • Lettres ;ajuscules ASCII
  • (A, B, C, ... Z)
  • upper-latin n'est pas supporté dans IE7
armenian
  • Numérotation arménienne traditionnelle
  • (ayb/ayp, ben/pen, gim/keem, ...)
georgian
  • Numérotation géorgienne traditionnelle
  • (an, ban, gan, ... he, tan, in ...)

Valeurs CSS2, abandonnées dans CSS 2.1, mais supporté dans Gecko/Firefox et d'autres navigateurs

hebrew
  • Numérotation hébreue traditionnelle
cjk-ideographic
  • Chiffres idéographiques simples
  • (chinois-japonais-coréen)
hiragana
  • a, i, u, e, o, ka, ki, ...
  • (japonais)
katakana
  • A, I, U, E, O, KA, KI, ...
  • (japonais)
hiragana-iroha
  • i, ro, ha, ni, ho, he, to, ...
  • {{ interwiki('wikipedia', 'Iroha') }}
katakana-iroha
  • I, RO, HA, NI, HO, HE, TO, ...

Extensions Mozilla

Un ensemble de valeurs étendues proposé par Mozilla (Firefox) pour supporter des styles de listes dans d'autres langues.

arabic-indic
-moz-arabic-indic
  • Exemple
bengali
-moz-bengali
  • Exemple
cjk-earthly-branch
-moz-cjk-earthly-branch
  • Exemple
cjk-heavenly-stem
-moz-cjk-heavenly-stem
  • Exemple
devanagari
-moz-devanagari
  • Exemple
-moz-ethiopic-halehame
  • Exemple
-moz-ehiopic-halehame-am
  • Exemple
ethiopic-halehame-ti-er
-moz-ethiopic-halehame-ti-er
  • Exemple
ethiopic-halehame-ti-et
-moz-ethiopic-halehame-ti-et
  • Exemple
-moz-ethiopic-numeric
  • Exemple
gujarati
-moz-gujarati
  • Exemple
gurmukhi
-moz-gurmukhi
  • Exemple
hangul
-moz-hangul
  • Exemple
hangul-consonant
-moz-hangul-consonant
  • Exemple
-moz-japanese-formal
  • Exemple
-moz-japanese-informal
  • Exemple
kannada
-moz-kannada
  • Exemple
khmer
-moz-khmer
  • Exemple
lao
-moz-lao
  • Exemple
malayalam
-moz-malayalam
  • Exemple
myanmar
-moz-myanmar
  • Exemple
oriya
-moz-oriya
  • Exemple
persian
-moz-persian
  • Exemple
-moz-simp-chinese-formal
  • Exemple
-moz-simp-chinese-informal
  • Exemple
-moz-tamil
  • Exemple
telugu
-moz-telugu
  • Exemple
thai
-moz-thai
  • Exemple
-moz-trad-chinese-formal
  • Exemple
-moz-trad-chinese-informal
  • Exemple
urdu
-moz-urdu
  • Exemple

Exemples

{{ CSSLiveSample("list-style") }}

ol { list-style-type: upper-alpha; }

/* ou en utilisant la propriété raccourcie "list-style": */
ol { list-style: upper-alpha; }

Notes

  • Certains types de styles de listes nécéssite l'installation de polices de caractères pour être affichées comme attendu.
  • La spécification CSS ne définit pas comment les systèmes alphabétiques se comportent une fois tout l'alphabet utilisé. Par exemple, après 26 éléments, le rendu de upper-alpha est non-défini. Firefox et d'autres navigateurs continuent avec AA, AB, AC,... Pour les listes longues, il est recommandé d'utiliser des chiffres.
  • Les styles hebrew, cjk-ideographs, hiragana, katakana, hiragana-iroha et katakana-iroha sont spécifiées dans CSS2 et retirés dans CSS 2.1 à cause d'un manque d'implémentations. Il est attendu qu'ils fassent leur retour dans la spécification CSS3 Lists.

Spécifications

Spécification État Commentaires
{{ SpecName('CSS3 Lists', '#list-style-type', 'list-style-type') }} {{ Spec2('CSS3 Lists') }} Ajoute le support de {{ xref_cssstring() }} et ajoute les identifiants utilisés dans les règles @counter-style aux mots-clés.
Ces changements ne sont pas reflétés ici puisqu'aucun des navigateurs ne les a implémentés.
{{ SpecName('CSS2.1', 'generate.html#propdef-list-style-type', 'list-style-type') }} {{ Spec2('CSS2.1') }} Définition initiale.

Compatibilité des navigateurs

Voir également

{{ Référence_CSS:list-style() }}

Source de la révision

<p>{{ CSSRef() }} {{ outdated() }}</p>
<h2 id="R.C3.A9sum.C3.A9">Résumé</h2>
<p>La propriété CSS <code>list-style-type</code> définit l'apparence des puces des éléments d'une liste. Comme c'est le seul dont la valeur par défaut est <code>display:list-item</code>, c'est généralement un élément {{HTMLElement("li")}}, mais cela peut être n'importe quel élément avec cette valeur de la propriété {{cssxref("display")}}</p>
<ul class="cssprop">
  <li><dfn>{{Xref_cssinitial}} </dfn><code>disc</code></li>
  <li><dfn>S'applique à&nbsp;</dfn>éléments avec de type <code>display: list-item</code></li>
  <li><dfn>{{Xref_cssinherited}} </dfn>oui</li>
  <li><dfn>Média </dfn>{{Xref_cssvisual()}}</li>
  <li><dfn>{{Xref_csscomputed}} </dfn>comme spécifié</li>
</ul>
<p>La <a href="/fr/docs/CSS/valeur_de_couleur" title="/fr/docs/CSS/valeur_de_couleur">couleur</a> du marqueur sera la même que la couleur calculée de l'élément à laquelle il s'applique.</p>
<h2 id="Syntaxe">Syntaxe</h2>
<pre class="syntaxbox">
list-style-type: &lt;list-style-type&gt; | {{cssxref("none")}} | {{cssxref("inherit")}}
</pre>
<h2 id="Valeurs" name="Valeurs">Valeurs</h2>
<dl>
  <dt>
    none</dt>
  <dd>
    Aucune puce n'est affichée.</dd>
</dl>
<p><strong>&lt;list-style-type&gt;</strong> est l'une des valeurs suivantes :</p>
<dl style="font-size:90%;background:#eee;border:1px solid powderblue;padding:.5em 0 .5em .5em;-moz-column-width:20em;-moz-column-rule:1px solid powderblue;-webkit-columns:20em;-webkit-column-rule:1px solid powderblue;">
  <dt>
    disc</dt>
  <dd>
    <ul style="list-style-type: disc">
      <li>Un cercle plein (valeur par défaut)</li>
    </ul>
  </dd>
  <dt>
    circle</dt>
  <dd>
    <ul style="list-style-type: circle">
      <li>Un cercle évidé</li>
    </ul>
  </dd>
  <dt>
    square</dt>
  <dd>
    <ul style="list-style-type: square">
      <li>Un carré plein</li>
    </ul>
  </dd>
  <dt>
    decimal</dt>
  <dd>
    <ul style="list-style-type: decimal">
      <li>Nombre décimaux</li>
      <li>Commençant à 1.</li>
    </ul>
  </dd>
  <dt>
    decimal-leading-zero</dt>
  <dd>
    <ul style="list-style-type: decimal-leading-zero">
      <li>Nombres décimaux</li>
      <li>Commençant par un 0</li>
      <li>(e.g., 01, 02, 03, ... 98, 99)</li>
    </ul>
  </dd>
  <dt>
    lower-roman</dt>
  <dd>
    <ul style="list-style-type: lower-roman">
      <li>Lowercase roman numerals</li>
      <li>(i, ii, iii, iv, v, etc.)</li>
    </ul>
  </dd>
  <dt>
    upper-roman</dt>
  <dd>
    <ul style="list-style-type: upper-roman">
      <li>Chiffres romains majuscules</li>
      <li>(I, II, III, IV, V, etc.)</li>
    </ul>
  </dd>
  <dt>
    lower-greek</dt>
  <dd>
    <ul style="list-style-type: lower-greek">
      <li>Grec classique minuscules</li>
      <li>alpha, beta, gamma, ...</li>
      <li>(α, β, γ, ...)</li>
    </ul>
  </dd>
  <dt>
    lower-alpha | lower-latin</dt>
  <dd>
    <ul style="list-style-type: lower-alpha">
      <li>Lettres minuscules ASCII</li>
      <li>(a, b, c, ... z)</li>
      <li><code>lower-latin </code>n'est pas supporté dans IE7</li>
      <li>Voir la section {{ anch("") }}</li>
    </ul>
  </dd>
  <dt>
    upper-alpha | upper-latin</dt>
  <dd>
    <ul style="list-style-type: upper-alpha">
      <li>Lettres ;ajuscules ASCII</li>
      <li>(A, B, C, ... Z)</li>
      <li><code>upper-latin </code>n'est pas supporté dans IE7</li>
    </ul>
  </dd>
  <dt>
    armenian</dt>
  <dd>
    <ul style="list-style-type: armenian">
      <li>Numérotation arménienne traditionnelle</li>
      <li>(ayb/ayp, ben/pen, gim/keem, ...)</li>
    </ul>
  </dd>
  <dt>
    georgian</dt>
  <dd>
    <ul style="list-style-type: georgian">
      <li>Numérotation géorgienne traditionnelle</li>
      <li>(an, ban, gan, ... he, tan, in ...)</li>
    </ul>
  </dd>
</dl>
<h3 id="Valeurs_CSS2.2C_abandonn.C3.A9es_dans_CSS_2.1.2C_mais_support.C3.A9_dans_Gecko.2FFirefox_et_d'autres_navigateurs">Valeurs CSS2, abandonnées dans CSS 2.1, mais supporté dans Gecko/Firefox et d'autres navigateurs</h3>
<dl style="font-size:90%;background:#eee;border:1px solid powderblue; padding:.5em 0 .5em .5em;-moz-column-width:20em;-moz-column-rule:1px solid powderblue;-webkit-columns:20em;-webkit-column-rule:1px solid powderblue">
  <dt>
    hebrew</dt>
  <dd>
    <ul style="list-style-type: hebrew">
      <li>Numérotation hébreue traditionnelle</li>
    </ul>
  </dd>
  <dt>
    cjk-ideographic</dt>
  <dd>
    <ul style="list-style-type: cjk-ideographic">
      <li>Chiffres idéographiques simples</li>
      <li>(chinois-japonais-coréen)</li>
    </ul>
  </dd>
  <dt>
    hiragana</dt>
  <dd>
    <ul style="list-style-type: hiragana">
      <li>a, i, u, e, o, ka, ki, ...</li>
      <li>(japonais)</li>
    </ul>
  </dd>
  <dt>
    katakana</dt>
  <dd>
    <ul style="list-style-type: katakana">
      <li>A, I, U, E, O, KA, KI, ...</li>
      <li>(japonais)</li>
    </ul>
  </dd>
  <dt>
    hiragana-iroha</dt>
  <dd>
    <ul style="list-style-type: hiragana-iroha">
      <li>i, ro, ha, ni, ho, he, to, ...</li>
      <li>{{ interwiki('wikipedia', 'Iroha') }}</li>
    </ul>
  </dd>
  <dt>
    katakana-iroha</dt>
  <dd>
    <ul style="list-style-type: katakana-iroha">
      <li>I, RO, HA, NI, HO, HE, TO, ...</li>
    </ul>
  </dd>
</dl>
<h3 id="Extensions_Mozilla">Extensions Mozilla</h3>
<p>Un ensemble de valeurs étendues proposé par Mozilla (Firefox) pour supporter des styles de listes dans d'autres langues.</p>
<dl style="font-size:90%;background:#eee;border:1px solid powderblue;padding: .5em 0 .5em .5em;-moz-column-width:16em;-moz-column-rule:1px solid powderblue;-webkit-columns:16em;-webkit-column-rule:1px solid powderblue">
  <dt>
    arabic-indic</dt>
  <dt>
    -moz-arabic-indic</dt>
  <dd>
    <ul style="list-style-type:-moz-arabic-indic; list-style-type:arabic-indic">
      <li>Exemple</li>
    </ul>
  </dd>
  <dt>
    bengali</dt>
  <dt>
    -moz-bengali</dt>
  <dd>
    <ul style="list-style-type:-moz-bengali; list-style-type:bengali">
      <li>Exemple</li>
    </ul>
  </dd>
  <dt>
    cjk-earthly-branch</dt>
  <dt>
    -moz-cjk-earthly-branch</dt>
  <dd>
    <ul style="list-style-type:-moz-cjk-earthly-branch;list-style-type:cjk-earthly-branch">
      <li>Exemple</li>
    </ul>
  </dd>
  <dt>
    cjk-heavenly-stem</dt>
  <dt>
    -moz-cjk-heavenly-stem</dt>
  <dd>
    <ul style="list-style-type:-moz-cjk-heavenly-stem; list-style-type:cjk-heavenly-stem">
      <li>Exemple</li>
    </ul>
  </dd>
  <dt>
    devanagari</dt>
  <dt>
    -moz-devanagari</dt>
  <dd>
    <ul style="list-style-type:-moz-devanagari; list-style-type:devanagari">
      <li>Exemple</li>
    </ul>
  </dd>
  <dt>
    -moz-ethiopic-halehame</dt>
  <dd>
    <ul style="list-style-type: -moz-ethiopic-halehame">
      <li>Exemple</li>
    </ul>
  </dd>
  <dt>
    -moz-ehiopic-halehame-am</dt>
  <dd>
    <ul style="list-style-type: -moz-ethiopic-halehame-am">
      <li>Exemple</li>
    </ul>
  </dd>
  <dt>
    ethiopic-halehame-ti-er</dt>
  <dt>
    -moz-ethiopic-halehame-ti-er</dt>
  <dd>
    <ul style="list-style-type:-moz-ethiopic-halehame-ti-er; list-style-type:ethiopic-halehame-ti-er">
      <li>Exemple</li>
    </ul>
  </dd>
  <dt>
    ethiopic-halehame-ti-et</dt>
  <dt>
    -moz-ethiopic-halehame-ti-et</dt>
  <dd>
    <ul style="list-style-type:-moz-ethiopic-halehame-ti-et; list-style-type:ethiopic-halehame-ti-et">
      <li>Exemple</li>
    </ul>
  </dd>
  <dt>
    -moz-ethiopic-numeric</dt>
  <dd>
    <ul style="list-style-type: -moz-ethiopic-numeric">
      <li>Exemple</li>
    </ul>
  </dd>
  <dt>
    gujarati</dt>
  <dt>
    -moz-gujarati</dt>
  <dd>
    <ul style="list-style-type:-moz-gujarati; list-style-type:gujarati">
      <li>Exemple</li>
    </ul>
  </dd>
  <dt>
    gurmukhi</dt>
  <dt>
    -moz-gurmukhi</dt>
  <dd>
    <ul style="list-style-type:-moz-gurmukhi; list-style-type:gurmukhi">
      <li>Exemple</li>
    </ul>
  </dd>
  <dt>
    hangul</dt>
  <dt>
    -moz-hangul</dt>
  <dd>
    <ul style="list-style-type:-moz-hangul; list-style-type:hangul">
      <li>Exemple</li>
    </ul>
  </dd>
  <dt>
    hangul-consonant</dt>
  <dt>
    -moz-hangul-consonant</dt>
  <dd>
    <ul style="list-style-type:-moz-hangul-consonant; list-style-type:hangul-consonant">
      <li>Exemple</li>
    </ul>
  </dd>
  <dt>
    -moz-japanese-formal</dt>
  <dd>
    <ul style="list-style-type: -moz-japanese-formal">
      <li>Exemple</li>
    </ul>
  </dd>
  <dt>
    -moz-japanese-informal</dt>
  <dd>
    <ul style="list-style-type: -moz-japanese-informal">
      <li>Exemple</li>
    </ul>
  </dd>
  <dt>
    kannada</dt>
  <dt>
    -moz-kannada</dt>
  <dd>
    <ul style="list-style-type: -moz-kannada; list-style-type:kannada">
      <li>Exemple</li>
    </ul>
  </dd>
  <dt>
    khmer</dt>
  <dt>
    -moz-khmer</dt>
  <dd>
    <ul style="list-style-type:-moz-khmer; list-style-type:khmer">
      <li>Exemple</li>
    </ul>
  </dd>
  <dt>
    lao</dt>
  <dt>
    -moz-lao</dt>
  <dd>
    <ul style="list-style-type:-moz-lao;list-style-type:lao">
      <li>Exemple</li>
    </ul>
  </dd>
  <dt>
    malayalam</dt>
  <dt>
    -moz-malayalam</dt>
  <dd>
    <ul style="list-style-type:-moz-malayalam;list-style-type:malayalam">
      <li>Exemple</li>
    </ul>
  </dd>
  <dt>
    myanmar</dt>
  <dt>
    -moz-myanmar</dt>
  <dd>
    <ul style="list-style-type:-moz-myanmar;list-style-type:myanmar">
      <li>Exemple</li>
    </ul>
  </dd>
  <dt>
    oriya</dt>
  <dt>
    -moz-oriya</dt>
  <dd>
    <ul style="list-style-type:-moz-oriya; list-style-type:oriya">
      <li>Exemple</li>
    </ul>
  </dd>
  <dt>
    persian</dt>
  <dt>
    -moz-persian</dt>
  <dd>
    <ul style="list-style-type:-moz-persian; list-style-type:persian">
      <li>Exemple</li>
    </ul>
  </dd>
  <dt>
    -moz-simp-chinese-formal</dt>
  <dd>
    <ul style="list-style-type: -moz-simp-chinese-formal">
      <li>Exemple</li>
    </ul>
  </dd>
  <dt>
    -moz-simp-chinese-informal</dt>
  <dd>
    <ul style="list-style-type: -moz-simp-chinese-informal">
      <li style="list-style-type: -moz-simp-chinese-informal;">Exemple</li>
    </ul>
  </dd>
  <dt>
    -moz-tamil</dt>
  <dd>
    <ul style="list-style-type: -moz-tamil">
      <li>Exemple</li>
    </ul>
  </dd>
  <dt>
    telugu</dt>
  <dt>
    -moz-telugu</dt>
  <dd>
    <ul style="list-style-type:-moz-telugu; list-style-type:telugu">
      <li>Exemple</li>
    </ul>
  </dd>
  <dt>
    thai</dt>
  <dt>
    -moz-thai</dt>
  <dd>
    <ul style="list-style-type:-moz-thai; list-style-type:thai">
      <li>Exemple</li>
    </ul>
  </dd>
  <dt>
    -moz-trad-chinese-formal</dt>
  <dd>
    <ul style="list-style-type: -moz-trad-chinese-formal">
      <li>Exemple</li>
    </ul>
  </dd>
  <dt>
    -moz-trad-chinese-informal</dt>
  <dd>
    <ul style="list-style-type: -moz-trad-chinese-informal">
      <li>Exemple</li>
    </ul>
  </dd>
  <dt>
    urdu</dt>
  <dt>
    -moz-urdu</dt>
  <dd>
    <ul style="list-style-type:-moz-urdu;list-style-type:urdu">
      <li>Exemple</li>
    </ul>
  </dd>
</dl>
<h2 id="Exemples">Exemples</h2>
<p>{{ CSSLiveSample("list-style") }}</p>
<pre class="eval">
ol { list-style-type: upper-alpha; }

/* ou en utilisant la propriété raccourcie "list-style": */
ol { list-style: upper-alpha; }
</pre>
<h2 id="Notes">Notes</h2>
<ul>
  <li>Certains types de styles de listes nécéssite l'installation de polices de caractères pour être affichées comme attendu.</li>
  <li>La spécification CSS ne définit pas comment les systèmes alphabétiques se comportent une fois tout l'alphabet utilisé. Par exemple, après 26 éléments, le rendu de <code>upper-alpha</code> est non-défini. Firefox et d'autres navigateurs continuent avec AA, AB, AC,... Pour les listes longues, il est recommandé d'utiliser des chiffres.</li>
  <li>Les styles<code> hebrew</code>, <code>cjk-ideographs</code>, <code>hiragana</code>, <code>katakana</code>, <code>hiragana-iroha</code> et <code>katakana-iroha</code> sont spécifiées dans CSS2 et retirés dans CSS 2.1 à cause d'un manque d'implémentations. Il est attendu qu'ils fassent leur retour dans la spécification CSS3 Lists.</li>
</ul>
<h2 id="Sp.C3.A9cifications">Spécifications</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Spécification</th>
      <th scope="col">État</th>
      <th scope="col">Commentaires</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{ SpecName('CSS3 Lists', '#list-style-type', 'list-style-type') }}</td>
      <td>{{ Spec2('CSS3 Lists') }}</td>
      <td>Ajoute le support de {{ xref_cssstring() }} et ajoute les identifiants utilisés dans les règles <code>@counter-style</code> aux mots-clés.<br />
        <em>Ces changements ne sont pas reflétés ici puisqu'aucun des navigateurs ne les a implémentés.</em></td>
    </tr>
    <tr>
      <td>{{ SpecName('CSS2.1', 'generate.html#propdef-list-style-type', 'list-style-type') }}</td>
      <td>{{ Spec2('CSS2.1') }}</td>
      <td>Définition initiale.</td>
    </tr>
  </tbody>
</table>
<h2 id="Compatibilit.C3.A9_des_navigateurs">Compatibilité des navigateurs</h2>
<h2 id="Voir_.C3.A9galement">Voir également</h2>
<p>{{ Référence_CSS:list-style() }}</p>
Revenir à cette révision