La propriété list-style est une propriété raccourcie qui permet de définir list-style-type, list-style-image et list-style-position.

/* Type */
list-style: square;

/* Image */
list-style: url('../img/etoile.png');

/* Position */
list-style: inside;

/* type | position */
list-style: georgian inside;

/* type | image | position */
list-style: lower-roman url('../img/etoile.png') outside;

list-style: none;

/* Valeurs globales */
list-style: inherit;
list-style: initial;
list-style: unset;

Valeur initialepour chaque propriété individuelle de la propriété raccourcie :
Applicabilitééléments de liste
Héritéeoui
Médiavisuel
Valeur calculéepour chaque propriété individuelle de la propriété raccourcie :
Type d'animationdiscrète
Ordre canoniquel'ordre d'apparition dans la grammaire formelle des valeurs

Note : Cette propriété s'applique aux éléments d'une liste (c'est-à-dire aux éléments pour lesquels display: list-item;}}). Par défaut, cela inclut les éléments <li>. Cette propriété peut être héritée par les éléments et si on veut donc gérer une liste de façon uniforme, on pourra appliquer la propriété à l'élément parent (qui correspond en général à <ol> ou à <ul>).

Syntaxe

Valeurs

Cette propriété raccourcie peut prendre un, deux ou trois mots-clés, dans n'importe quel ordre. Si list-style-type et list-style-image sont tous les deux définis, list-style-type sera utilisé si l'image est indisponible.

<'list-style-type'>
Voir list-style-type
<'list-style-image'>
Voir list-style-image
<'list-style-position'>
Voir list-style-position
none
Aucun style n'est utilisé.

Syntaxe formelle

<'list-style-type'> || <'list-style-position'> || <'list-style-image'>

Exemples

CSS

.un {
  list-style: circle;
}

.deux {
  list-style: square inside;
}

HTML

Liste 1
<ul class="un">
  <li>Élément 1</li>
  <li>Élément 2</li>
  <li>Élément 3</li>
</ul>
Liste 2
<ul class="deux">
  <li>Élément A</li>
  <li>Élément B</li>
  <li>Élément C</li>
</ul>

Résultat

Spécifications

Spécification État Commentaires
CSS Lists and Counters Module Level 3
La définition de 'list-style' dans cette spécification.
Version de travail Aucun changement.
CSS Level 2 (Revision 1)
La définition de 'list-style' dans cette spécification.
Recommendation Définition initiale.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Edge Internet Explorer Opera Safari
Support simple 1.0 1.0 (1.7 ou moins) (Oui) 4.0 7.0 1.0
Fonctionnalité Android Firefox Mobile (Gecko) Edge IE Phone Opera Mobile Safari Mobile
Support simple 1.0 1.0 (1) (Oui) 6.0 6.0 1.0

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight, Sebastianz, louuis, teoli, FredB, Mgjbot, Fredchat, Kyodev, VincentN
 Dernière mise à jour par : SphinxKnight,