CSS : Les liens hypertexte (a href)

Mise en forme des liens hypertexte

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