- Code: Tout sélectionner
<HEAD> <style type="text/css">
<!--
A { color:#000000; text-decoration:none; }
A:hover { color:#FF0000;text-decoration:underline;}
-->
</style>
</HEAD>
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[/surligner-x]; : ici, on indique qu'ils se souligneront.
DĂ©finir des classes de liens :
Reprennons le code precedent et rajoutons quelques lignes :
- Code: Tout sélectionner
<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 :
- Code: Tout sélectionner
<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 !
