CSS : Les liens hypertexte (a href)

Afin de mettre en formes les liens, vous pouvez combiner plusieurs propriétés CSS qui modifie la police ou le texte. Il existe aussi des pseudo-classes qui peuvent être utilisé sur les liens afin de modifier l'apparence suivant une action : lien cliqué, survolé, etc.

Ne pas souligner les liens hypertexte

Utilisez la propriété text-decoration pour retirer le soulignement des liens.

a.test{text-decoration:none;} /* Les liens avec la classe "test" n'auront pas de soulignement */

Avec cette propriété, vous pouvez aussi souligner, surligner ou barrer un lien.

Mettre en forme l'ensemble des liens

  • Lien par défaut
a:link {/*...*/}
  • Lien visité par défaut
a:visited {/*...*/}
  • Lien survolé par la souris par défaut
a:hover {/*...*/}
  • Lien cliqué par défaut
a:active {/*...*/}

Style sur une classe ou un id

Vous pouvez aussi modifier la mise en forme de liens ayant une classe ou un id

a.menu:visited{/*...*/} /* Les liens visités ayant la classe "menu" */
a#header:hover{/*...*/} /* Les liens survolés par la souris ayant l'id "header" */

Exemple(s)

a.lienExemple:link{text-decoration:none; color:#ff0000;}
a.lienExemple:visited{text-decoration:none; color:#ff00ff;font-weight:bold;}
a.lienExemple:hover{text-decoration:underline; color:#000000;}
a.lienExemple:active{text-decoration:none; color:#00ff00;font-style:italic;}

Cliquez ici pour essayer

 

Twitter Facebook Google Plus Email

Posté le 20-12-2009