Glossaire des propriétés CSS

list-style-type : permet de définir le type de la liste.

Syntaxe : disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none | inherit

Compatibilité : IE complète 8 - partielle 7, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : IE 8 et précédents ne supporte les valeurs : decimal-leading-zero, lower-greek, lower-latin, upper-latin, armenian, georgian et inherit que si un doctype est déclaré.

Version CSS : 1

• Pour les listes non ordonnées (<ul>) :
  • disc (par défaut) : un disque noir ;
  • circle : un cercle ;
  • square : un carré ;
  • none : aucune puce ne sera utilisée.
• Pour les listes ordonnées (<ol>) :
  • decimal : des nombres 1, 2, 3, 4, 5... (par défaut) ;
  • decimal-leading-zero : des nombres commençant par zéro (01, 02, 03, 04, 05...) ;
  • upper-roman : numérotation romaine, en majuscules (I, II, III, IV, V...) ;
  • lower-roman : numérotation romaine, en minuscules (i, ii, iii, iv, v...) ;
  • upper-alpha : numérotation alphabétique, en majuscules (A, B, C, D, E...) ;
  • lower-alpha : numérotation alphabétique, en minuscules (a, b, c, d, e...) ;
  • lower-greek : numérotation grecque, en minuscules ;
  • none : aucune.

list-style-type: disc;
list-style-type: square;
list-style-type: upper-roman;

<style type="text/css">
    .list1 {
        list-style-type: disc;
    }
 
    .list2 {
        list-style-type: square;
    }
 
    .list3 {
        list-style-type: upper-roman;
    }
</style>
<div>
    <ul class="list1">
        <li>Article 1</li>
        <li>Article 2</li>
        <li>Article 3</li>
    </ul>
    <ul class="list2">
        <li>Article 1</li>
        <li>Article 2</li>
        <li>Article 3</li>
    </ul>
    <ol class="list3">
        <li>Article 1</li>
        <li>Article 2</li>
        <li>Article 3</li>
    </ol>
</div>

list-style-position : permet de définir la position de la puce lorsque le contenu est sur plusieurs lignes.

Syntaxe : inside | outside | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

• inside : sans retrait ;
• outside : avec retrait (par défaut).

list-style-position: inside;
list-style-position: outside;

<style type="text/css">
    .list-pos1 {
        list-style-position: inside;
    }
 
    .list-pos2 {
        list-style-position: outside;
    }
</style>
<div style="width: 400px;">
    <ul class="list-pos1">
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
        et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
        ut aliquip ex ea commodo consequat.</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 
        et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
        ut aliquip ex ea commodo consequat.</li>
    </ul>
    <ul class="list-pos2">
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 
        et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi 
        ut aliquip ex ea commodo consequat.</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore 
        et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi 
        ut aliquip ex ea commodo consequat.</li>
    </ul>
</div>

list-style-image : permet de mettre une image en guise de puce.

Syntaxe : <uri> | none | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

list-style-image: url('./images/puce.gif');

<style type="text/css">
    .list-img {
        list-style-image: url('./images/puce.gif');
    }
</style>
<div>
    <ul class="list-img">
        <li>article 1</li>
        <li>article 2</li>
        <li>article 3</li>
    </ul>
</div>

list-style : permet de définir les valeurs de list-style-type, list-style-position et list-style-image en une seule fois. Vous n'êtes pas obligé de mettre toutes les valeurs et l'ordre n'a pas d'importance.

Syntaxe : [ 'list-style-type' || 'list-style-position' || 'list-style-image' ] | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

list-style: inside square;

<style type="text/css">
    .list-style {
        list-style: inside square;
    }
</style>
<div>
    <ul class="list-style">
        <li>article 1</li>
        <li>article 2</li>
        <li>article 3</li>
    </ul>
</div>