|
 Le soulignement des liens avec les CSS
Je reçois beaucoup de courrier me demandant comment faire pour qu'un lien ne soit jamais souligné, ou encore pour qu'un lien non-souligné le devienne au passage de la souris. D'où cette page ;)
Définir le style de tous les liens de votre page :
Il vous suffit d'inserer ces lignes entre les balises <HEAD> et </HEAD> :
<style type="text/css">
<!--
A { color:#000000; text-decoration:none; }
A:hover { color:#FF0000;text-decoration:underline;}
-->
</style>
|
|
Entre les accolades située apres le A, vous trouvez:
color:#000000; : ceci definit la couleur de tous les liens de la page. Ici, ils seront noirs.
text-decoration:none; : ici, on indique que les liens ne seront pas soulignés.
Entre les accolades située apres le A:hover, vous trouvez les attributs du style des liens au passage de la souris :
color:#FF0000; : ceci indique que les liens passeront au rouge au passage de la souris.
text-decoration:underline; : ici, on indique qu'ils se souligneront.
Définir des classes de liens :
Reprennons le code precedent et rajoutons quelques lignes :
<style type="text/css">
<!--
A { color:#000000; text-decoration:none; }
A:hover { color:#FF0000; text-decoration:underline; }
A.menu { color:#0000FF; text-decoration:none; }
A:hover.menu { color:#FFFF00; text-decoration:underline; }
-->
</style>
|
|
Nous venons de definir une nouvelle classe de lien, la classe "menu". Cela signifie que tous les liens de votre pages garderont le style que nous avons definit dans la premiere partie, sauf les liens de la classe "menu".
Pour definir un lien comme faisant partie d'une classe, il vous suffit de rajouter quelques caractères dans votre code HTML :
<a href="mapage.html" class="menu">Le lien</a>
|
|
Et voila, ce lien sera bleu et non souligné et passera au jaune souligné au passage de la souris !
Annotations des visiteurs :
|
 De Arkangel - le 25-07-2006
Le top est d'ajouter un background couleur ou image sur le lien pour un effet encore plus top :
un exemple :
a
{
display: block;
padding: 0.25em 0.5em 0.25em 0.75em;
border-left: 1em solid #AAB;
background: #CCD;
text-decoration: none;
}
a:link { color: #448; }
a:visited { color: #667; }
a:hover
{
border-color: #FE3;
color: #FFF;
background: #332;
}
Pour définir une image en fond il suffit de mettre dans le css background-image:url(monimage.gif);
exemple :a:hover
{
border-color: #FE3;
color: #FFF;
background: #332;
background-image:url(monimage.gif);
}
}
| De Tdeny - le 14-04-2005
<head>
<style type="text/css">
A { color:green; text-decoration:overline; }
A:link {background-color:red; }
A:visited { color:darkblue; }
A:hover { color:red; text-decoration:underline; }
A:active { color:yellow;background-color:black; }
</style>
</head>
<body>
<a href="#">cliquez ici</a>
</body>
Avec ceci, l'on peut constater plusieurs choses.
- Avec le cascading, il est inutile de répéter ce qui est défini dans le A.
- Les pseudo-classes doivent être disposées dans cet ordre, faute de quoi elles ne marchent plus.
- Il peut y avoir des problèmes d'interférence entre le A et le A:link.
Maintenant si vous définissez vos style comme ceci :
<head>
<style type="text/css">
A { color:blue; text-decoration:overline; }
A.menu:link {background-color:red; }
A.menu:visited {color:yellow; }
A.menu:hover {color:green;background-color:red;}
A:hover {color:red; text-decoration:underline; }
A:active { color:white;background-color:black; }
</style>
</head>
<body>
<a class="menu" href="#">cliquez ici</a>
...Vous verrez des mélanges, comme j'ai vu la couleur yellow du menu visité au background black du lien actif.
|
|
>> Poster une annotation sur cette astuce
Retour à la liste des trucs et astuces
|
|
