Vous êtes ici : Accueil >> CSS >> Base pour créer un site en CSS >> Créer des effets sur les liens en css

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

Catégorie CSS

Commentaire sur : Créer des effets sur les liens en css
Signaler une erreurSignaler une erreur

Créer un conteneur en cssCréer un conteneur en cssBase pour créer un site en CSSBase pour créer un site en CSS Créer plusieurs effets de style sur les liens avec du cssCréer plusieurs effets de style sur les liens avec du css