Modifier les puces dans le CSS

Comme promis, voici un petit tutoriel CSS pour modifier l'aspect des puces d'un blog.
Tout d'abord il faut aller dans le CSS (si vous vous demandez ce qu'est le CSS, il faut aller faire un petit tour par là: Mais c'est quoi le CSS).

Pour changer la couleur d'une puce :
Remplacer #FFFFFF par la couleur hexadécimale de votre choix.
li {color:#FFFFFF; }

Pour avoir une forme particulière de puce :
Rond :
li { list-style-type: disc; }

Carré :
li { list-style-type: square; }

Cercle :
li { list-style-type: circle; }

Pour mettre un ordre :
Numéro :
li { list-style-type: decimal; }

Nombre romain en minuscule :
li { list-style-type: lower-roman; }

Nombre romain en majuscule :
li { list-style-type: upper-roman; }

Lettre majuscule :
li { list-style-type: upper-alpha; }

Lettre minuscule :
li { list-style-type: lower-alpha; }

Et le plus intéressant : avec une image de votre choix (jpg, gif, gif animé, png...)
li { list-style-image : url(http://www.urldelapuce.png) ; }

Pour changer l'affichage d'une puce au passage de la souris (roll-over) :
Il suffit de faire le même code que précédemment, mais en ajoutant la définition « hover »
li:hover { ... ; }

Quelques exemples :


Maintenant nous allons appliquer ces informations avec quelques exemples :



Je souhaite que mes puces soient blanches et carrées. Fixes au passage de la souris :


li { list-style-type: square; color:#FFFFFF; }

Exemple de ce blog : http://photo.graph.over-blog.com





Je souhaite faire un blog avec des puces représentées par l'image de mon choix et qu'elles restent fixes au passage de ma souris :

li {list-style-image: url(http://wwwwmonsite.com/puce.png);}

Exemple emprunté sur le site http://luluetberlu.over-blog.com







Je souhaite que mes puces soient une liste avec des chiffres romains en majuscules rouges et qu'au passage de la souris les puces se transforment en image de mon choix :

li { list-style-type: upper-roman; color :#FF0000 ;}
li:hover {list-style-image: url(http://wwwwmonsite.com/puce.png);}