Le style des puces
Il s'agit de choisir le type de puces, voici les différentes possibilités
| disc | disque plein, valeur par défaut |
| armenian | nombres en écriture arménienne |
| circle | cercle |
| cjk-ideographic | nombres idéographiques |
| decimal | nombres décimaux |
| decimal-leading-zero | nombres décimaux avec zéro en première position |
| georgian | nombres en écriture géorgienne |
| hebrew | nombres hébreux |
| hiragana | nombres hiragana |
| hiragana-iroha | nombres hiragana-iroha |
| katakana | nombres katakana |
| katakana-iroha | nombres katakana-iroha |
| lower-alpha | lettres minuscules |
| lower-greek | mettres minuscules grecques |
| lower-latin | idem mower-alpha |
| lower-roman | idem mower-alpha |
| none | pas de puce |
| square | carré |
| upper-alpha | lettres majuscules |
| upper-latin | lettres majuscules |
| upper-roman | lettres majuscules |
| inherit | puces héritées de son parent direct |
Démo
<style>
.maliste {
list-style-type:upper-roman;
}
</style>
</head>
<body>
<h2>Un exemple, trois apôtres bien connus</h2>
<ul class="maliste">
<li>Pierre</li>
<li>André</li>
<li>Jacques</li>
</ul>
</body>
Utiliser une image comme puce
Il s'agit de choisir une image comme puce.
Démo
<style>
.maliste {
list-style-image:url(../../image/trex4_pt.jpg);
}
</style>
</head>
<body>
<h2>Un exemple, trois apôtres bien connus</h2>
<ul class="maliste">
<li>Pierre</li>
<li>André</li>
<li>Jacques</li>
</ul>
</body>
Position des puces
Deux valeurs possibles: outside (la valeur par défaut) et inside (provoque u retrait à gauche)
Démo
<style>
.maliste {
list-style-image:url(../../image/trex4_pt.jpg);
list-style-position: inside;
}
</style>
</head>
<body>
<h2>Un exemple, trois apôtres bien connus</h2>
<ul class="maliste">
<li>Pierre</li>
<li>André</li>
<li>Jacques</li>
</ul>
</body>
Regroupement des propriétés
Il faut préciser dans l'ordre:list-style-type, list-style-position, list-style-image.
Comme d'habitude, si une propriété est absente, la valeur par défaut est appliquée.
Si toutes les propriétés sont présentes, la première propriété sera appliquée si on ne trouve pas l'image précisée dans la troisième propriété.
Démo
<style>
.maliste {
list-style:decimal inside url(../../image/trex4_pt.jpg);
}
</style>
</head>
<body>
<h2>Un exemple, trois apôtres bien connus</h2>
<ul class="maliste">
<li>Pierre</li>
<li>André</li>
<li>Jacques</li>
</ul>
</body>
