Vous avez besoin d'un site web pour votre activité mais vous êtes nul en programmation ... MyWebsite est fait pour vous.

* Offre 1&1 MyWebsite « 1 mois d’essai gratuit » : pendant le mois d’essai gratuit, résiliation possible à tout moment, sans frais.

* Cette publicité ne s'affiche qu'une fois par jour et s'ouvre dans une nouvelle fenêtre.

Vous êtes ici : Accueil >> CSS >> Base pour créer un site en CSS >> Créer plusieurs effets de style sur les liens avec du css

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 .

Catégorie CSS

Commentaire sur : Créer plusieurs effets de style sur les liens avec du css
Signaler une erreurSignaler une erreur

Créer des effets sur les liens en cssCréer des effets sur les liens en cssBase pour créer un site en CSSBase pour créer un site en CSS Feuille de style externeFeuille de style externe