Cette propriété vous donne la possibilité de sélectionner une puce numérotée, graphique ou alphabétique pour vos listes.

 

Des puces pour une liste non ordonnée

ul.disc {list-style-type: disc}
ul.circle {list-style-type: circle}
ul.square {list-style-type: square}
ul.none {list-style-type: none}

Dans la page:
<ul class="disc">
<ul class="circle">
<ul class="square">
<ul class="none">

Des puces pour une liste en ordre

 

ol.decimal {list-style-type: decimal}
ol.lroman {list-style-type: lower-roman}
ol.uroman {list-style-type: upper-roman}
ol.lalpha {list-style-type: lower-alpha}
ol.ualpha {list-style-type: upper-alpha}

Dans la page:
<ol class="decimal">
<ol class="lroman">
<ol class="uroman">
<ol class="lalpha">
<ol class="ualpha">

Utiliser une image comme puce

ul
{
list-style-image: url('arrow.gif')
}

Positionner la liste à l'intérieur ou extérieur

J'ai rarement vu cette propriété utilisée

ul.inside
{
list-style-position: inside
}

ul.outside
{
list-style-position: outside
}
Dans la page:

<ul class="inside">
<ul class="outside">

Toutes les propriétés sur une seule déclaration

ul
{
list-style: square inside url('arrow.gif')
}

 

Propriété	Description	Valeurs
list-style	Permet de mettre toutes les propriétés sur une seule déclaration	list-style-type list-style-position list-style-image
list-style-image	Permet de remplacer la puce par une image	none url
list-style-position	Indique ou la puce sera positionnée	inside outside
list-style-type	Permet de sélectionner une sorte de puce	none disc circle square decimal decimal-leading-zero lower-roman upper-roman lower-alpha upper-alpha lower-greek lower-latin upper-latin hebrew armenian georgian cjk-ideographic hiragana katakana hiragana-iroha katakana-iroha
marker-offset		auto length

 

Css pour différent média