Créer des effets sur les liens en css

a:link : couleur du lien
a:visited : couleur du lien visité
a:hover : changement de la couleur ou du style sur le lien au passage de la souris
text-decoration : décoration du lien
underline : ligne en dessous du lien
underline overline : ligne en dessous et au dessus du lien
Code :

<style type="text/css">
a:link {color: #000000 ; text-decoration: underline ;}
a:visited {color: #FF6699 ; }
a:hover { color: red ; text-decoration: underline overline ; }  
</style>

Le code CSS ci-dessus pour créer un effet sur les liens est ajouté dans le code ci-dessous qui est la suite du tuto sur la création d'un cadre centrale ou conteneur .

<html>
<head>
  <meta http-equiv="content-type"
content="text/html; charset=ISO-8859-1">
<title>Effet sur les liens</title> <style type="text/css"> a:link {color: #000000 ; text-decoration: underline ;} a:visited {color: #FF6699 ; } a:hover { color: red ; text-decoration: underline overline ; } #moncadre { width:800px; margin:auto; padding:10px; background-color:#FFFF00; border-left:1px solid #000000; /* couleur du cadre */ border-right:1px solid #000000; border-bottom:1px solid #000000; border-top:1px solid #000000; } .cadredumenugauche { float:left; text-align:left; width:150px; padding:10px; background-color:#FBFBFF; border:1px solid #000000; color:#666666; } .cadredumenudroite { float:right; text-align:left; width:150px; padding:10px; background-color:#FBFBFF; border:1px solid #000000; color:#666666; } #cadrehaut { height:100px; background-color:#FFCCCC; margin-bottom:10px; } #cadrecentrale { margin-left:180px; min-height:150px; margin-right:180px; border-left:1px dashed #000000; border-right:1px dashed #000000; border-bottom:1px dashed #000000; border-top:1px dashed #000000; background-color:#00FBFF; } </style> </head> <body> <div id="moncadre"> <div id="cadrehaut"></div> <div class="cadredumenugauche"> </div> <div class="cadredumenudroite"> </div> <div id="cadrecentrale"> </div> </div> </body> </html>

Voici quelques exemples supplémentaires :

a:link {color: black ; text-decoration: underline ;}
Lien de couleur noir avec un trait en dessous
a:hover { color: red ; text-decoration: underline overline ; }
Trait au dessus et au dessous du lien survolé
a:link { font-weight:bold ; color: black ;}
Lien noir en gras
a:hover { color: red ; text-decoration: none ; }
Lien survolé passant au rouge sans décoration
a:hover { color:red ; text-decoration: none ; background-color:yellow ; }
Lien survolé passant au rouge avec une couleur de fond jaune (comme dans le menu de gauche)
a:link {text-decoration: none ; color: RED ; border-bottom: 1px dotted #000000; }
Lien rouge souligné en pointillé noir
a:link {text-decoration: none ; border: 1px solid black;}
Lien sans décoration avec un cadre noir

Voir/déposer un commentaire (0) | Signaler un problème