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