<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<style type="text/css">
a.menu1 {
text-decoration:none ; /* supprime le soulignement des liens */
display:block ; /* Crée un retour à la ligne à
la fin de chaque bouton */
margin-top:5px ; /* Crée un marge de 5 pixels en haut des boutons
*/
text-align:center; /* centre le texte de chaque bouton */
width:200px ; /* fixe la largeur de chaque bouton à 200 pixel
*/
border-style:ridge ; /* défini le style de l'encadrement des
boutons */
border-width:3px ; /* fixe la largeur de l'encadrement des boutons à
3 px */
padding:2px;} /* défini la marge intérieur des boutons
à 2px */
a.menu1:hover {color:#FFFF00 ; /* change la couleur de la police lors
du survol par la souris */
background-color:#0000FF ; } /* change la couleur du fonds lors du survol
par la souris */
</style>
</head>
<body>
<a class="menu1" href="">Accueil</a>
<a class="menu1" href="">Articles</a>
<a class="menu1" href="">Liens</a>
<a class="menu1" href="">Écrire</a>
</body>
</html>
COMMENTAIRES
Il s'agit d'un système de boutons très simple :
- A chaque bouton correspond un lien.
- Au naturel, il n'y a aucune couleur de fond définie pour les boutons. C'est l'objet de la redéfinition de la balise a {..}.
- Lors d'un survol (a:hover), on change la couleur du fond et de la police.
- On peut écrire les styles ci-contre a {style} et a:hover {style}, et non a.menu1 {style} et a.menu1:hover {style}. Simplement, dans ce cas, ce sont TOUS les liens de la page qui seront traités comme ces boutons.
- Si on veut restreindre cet effet de survol (roll-hover) à certains liens, on crée alors une classe (ici la classe .menu1) et on l'affecte aux seuls liens que l'on souhaite styler.
- On peut aussi multiplier les syles (.menu2, .menu3, .menu4, ....), et donc les menus et leurs apparences.