Accueil    CSS    Propriété list-style-type
 



style css list-style-type  Style CSS list-style-type

«  Partie précédente  |  Index  |  Partie suivante  »


La propriété list-style-type défini le marqueur qui sera utilisé devant les éléments composant la liste (élément html <ol> pour liste ordonnée ou <ul> pour liste non ordonnée).

Ce marqueur est souvent une image (disque, cercle, carré ...) pour les listes non ordonnées ou un chiffre (autoincrémenté) pour les listes ordonnées.

Il existe de nombreuses nomenclatures pour les numérotations, et si les images sont limitées il est tout de même possible d'utiliser une image personalisée avec la propriété list-style-image.



Propriétés pour le style list-style-type :




Propriété Définition Valeurs CSS
list-style-type Détermine le type de marqueur à appliquer pour la mise en page de la liste armenian, circle
cjk-ideographic, decimal,
decimal-leading-zero,
disc, georgian, hebrew,
hiragana, hiragana-iroha,
inherit, katakana,
katakana-iroha,
lower-alpha, lower-greek,
lower-latin, lower-roman,
none, square,
upper-alpha, upper-latin,
upper-roman
CSS 1


Exemple d'utilisation du style css list-style-type :





Sélectionnez la propriété list-style-type à appliquer à la liste :
<select onchange="ChangeListStyle(this.options[this.selectedIndex].value);">
   <option>armenian</option>
   <option>circle</option>
   ...
   <option>upper-latin</option>
   <option>upper-roman</option>
</select>


<ul id="ListeExemple" style="list-style-type:armenian;">
   <li>élément 1 de la liste</li>
   <li>élément 2 de la liste</li>
   <li>élément 3 de la liste</li>
   <li>élément 4 de la liste</li>
</ul>

le javascript associé est le suivant :

<script type="text/javascript">
function ChangeListStyle(valeur){
   document.getElementById('ListeExemple').style.listStyleType = valeur;
}
</script>



Sélectionnez la propriété list-style-type à appliquer à la liste :


  • élément 1 de la liste
  • élément 2 de la liste
  • élément 3 de la liste
  • élément 4 de la liste