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;

Voir la source

Sélectionnez

<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;

Voir la source

Sélectionnez

<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');

Voir la source

Sélectionnez

<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;

Voir la source

Sélectionnez

<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>