14 août 2010

Modifier la couleur des puces dans une liste

Voici une astuce pour égayer vos listes. Je vous rappelle que les puces sont les petits ronds (ou carrés) devant chaque élément d'une liste.

Lorsque vous faîtes une liste avec puce :
  • puce 1
  • puce 2
  • puce 3
En mode html, cette liste apparaîtra ainsi
<ul>
    <li>puce 1</li>
    <li>puce 2</li>
    <li>puce 3</li>
</ul>
Pour mettre une puce de même couleur sur toutes les lignes

Vous allez rajouter ce qui est en rouge
<ul style="color:#ff0000;">
    <li>puce 1</li>
    <li>puce 2</li>
    <li>puce 3</li>
</ul>
ce qui donne
  • puce 1
  • puce 2
  • puce 3
Vous constatez que les écrits ont aussi changé de couleur.

Si vous désirez remettre les écrits dans la couleur d'origine, vous rajoutez ce qui est en bleu
<ul style="color:ff0000;">
    <li><font color="#000033">puce 1</font></li>
    <li><font color="#000066">puce 2</font></li>
    <li><font color="#000099">puce 3</font></li>
</ul>
et vous obtenez
  • puce 1
  • puce 2
  • puce 3
Pour une mettre une puce de couleur différente à chaque ligne
Vous rajoutez ce qui est en vert
<ul style="color: ff0000;">
    <li ><font color="#000000">puce 1</font></li></ul>
<ul style="color: ffff00;">
    <li ><font color="#ff0000">puce 2</font></li></ul>
<ul style="color: ffffff;">
    <li "><font color="#ffff00">puce 3</font></li></ul>
ce qui donne
  • puce 1
  • puce 2
  • puce 3

Aucun commentaire:

Enregistrer un commentaire

1/ Choisissez Nom/URL comme profil pour poster, si vous hésitez
2/ Si vous désirez une aide personnalisée, pensez à laisser l'adresse de votre blog, ce qui me permettra de tester.
3/ Vous pouvez vous abonner par email pour suivre les réponses de cet article (lien sous la zone de rédaction du commentaire)