Accueil    CSS    Propriété List-style-image
 



style css list-style-image  Style CSS list-style-image

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


La propriété list-style-image permet de remplacer les marqueurs existants (définis par la propriété list-style-type) par une image personnalisée.

Il suffit de faire référence à l'image par la syntaxe :
list-style-image: url("image-puce.png")

Il faut bien prendre en compte la taille de l'image qui doit être adaptée à ce type de mise en forme (entre 10 et 15 pixels environ).



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




Propriété Définition Valeurs CSS
list-style-image Remplace le marqueur de la liste par une image personnalisée URL CSS 1


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





Exemple de liste avec une image personnalisée comme marqueur :

<ul style="list-style-image:url(exemples/puce-verte.png); width:200px;">
   <li style="padding:3px;">élément 1 de la liste</li>
   <li style="padding:3px;">élément 2 de la liste</li>
   <li style="padding:3px;">élément 3 de la liste</li>
   <li style="padding:3px;">élément 4 de la liste</li>
</ul>


Exemple de liste avec une image personalisée comme marqueur :

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