<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 */
background-color:#CC0000 ; /* couleur du bouton */
color:white ; /* couleur du texte */
font-size:15px ; /*taille du texte */
margin:0px ; /* la marge extérieur autour des boutons est =0
(les boutons se touchent) */
padding:4px; /* la marge intérieur autour des boutons est de
4 pixels*/
border:1px solid; /* il y a une bordure solide de 1 pixel autour de
chaque bouton */
border-color:red black black red ; /* couleurs des 4 cotés des
bordures, dans le sens des aiguilles d'une montre */
text-align:center; /* centre le texte de chaque bouton */
width:200px } /* fixe la largeur de chaque bouton à 200 pixel
*/
a.menu1:hover {
border-top:2px solid brown; /* change la couleur et l'épaisseur
de la bordure haute lors du survol par la souris */
border-bottom:2px solid #CC0005 ; /* change la couleur et l'épaisseur
de la bordure basse lors du survol */
padding:3px 4px 3px 4px } /* diminue la marge intérieure haute
et basse du bouton survolé, pour compenser l'augmentation de la taille
de la bordure */
</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.
- Lors d'un survol (a:hover), on change la couleur des marges hautes et basses, pour créer un effet d'enfoncement, de relief.
- 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.