Créer plusieurs effets de style sur les liens avec du css

Cette page vous montre comment avoir plusieurs effets de soulignement des liens sur une meme page . Elle fait suite au "tuto" sur Comment créer un soulignement ou un style sur les liens en utilisant le CSS .
Code:

<style type="text/css">
.cadredumenugauche a:link {color: red ; text-decoration: underline overline ;}
.cadredumenugauche a:hover {border: 1px solid #000000; color: #00FBFF}
  </style>

Le code CSS ci-dessus permet de donner un style sur les liens du menu gauche de cette exemple . Dans le code ci-dessous, qui est la suite du tuto Comment créer  un effet sur les liens en css  , j'indique dans mon "style" qui 'il faut appliquer quelques règles uniquement aux liens du cadre du menu  de gauche (  .cadredumenugauche ) .
.cadredumenugauche a:link {...} : permet d'appliquer un ou des effets sur les liens du cadredumenugauche uniquement .
.cadredumenugauche a:hover {...} : permet d'appliquer un ou des effets sur les liens survolés du cadredumenugauche uniquement .
Les éléments en gras du code ci-dessous vous montre " qui s'applique à quoi " !

<html>
<head>
  <meta http-equiv="content-type"
content="text/html; charset=ISO-8859-1">
<title>Effets sur les liens</title> <style type="text/css"> .cadredumenugauche a:link {color: red ; text-decoration: underline overline ;} .cadredumenugauche a:hover {border: 1px solid #000000; color: #00FBFF} 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; /* cadre menu */ color:#666666; } .cadredumenudroite { float:right; text-align:left; width:150px; padding:10px; background-color:#FBFBFF; border:1px solid #000000; /* cadre menu */ 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; /* couleur du cadre */ 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"><a href="index.php">mon lien</a></div> <div class="cadredumenudroite"></div> <div id="cadrecentrale"></div> </div> </body> </html>

Note: Je vous rappelle qu'il est préférable de mettre toute la partie du code CSS dans un fichier externe que vous nommerez " style.css " en supprimant les balises <style type="text/css"> et </style> .
Pour appeler le code se trouvant dans le fichier " style.css " , il suffit de rajouter ce code :
<style type="text/css">
<link href="style.css" rel="stylesheet" type="text/css">
</style>

 entre les balises <head> et </head> de toutes pages .

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