Construire un menu en CSS
CHAPITRE 12
167
Ces valeurs se lisant dans le sens horaire en partant du haut, cette bordure, de style
plein, sera en haut et à gauche épaisse d’un pixel et gris clair (#cecece), mais épaisse
de deux pixels et gris foncé (#4a4a4a) en bas et à droite. Comme précédemment, la
pseudo-classe :hover inverse tout : couleurs et épaisseurs.
Synthèse des déclarations de style écrites jusqu’à présent, représentée figure 12-7 :
border-width: 2px 1px 1px 2px;
border-color: #4a4a4a #cecece #cecece #4a4a4a;
ul#menu {
margin: 0;
padding: 0;
font: bold 1em Georgia, Times, serif;
list-style-type: none;
}
#menu a {
display: block;
margin: 5px 0;
color: green;
text-decoration: none;
line-height: 25px;
width: 120px;
border: 1px solid black;
background: #fc0;
text-align: center;
border-width: 1px 2px 2px 1px;
border-color: #cecece #4a4a4a #4a4a4a #cecece;
border-style: solid;
}
#menu a:hover, #menu a:focus {
border-width: 2px 1px 1px 2px;
border-color: #4a4a4a #cecece #cecece #4a4a4a;
}
Figure 12–7
Des boutons en relief