146
Maîtrise des CSS
text-decoration: none;
color: #333;
background-color: #c0c8d2;
font-weight: bold;
padding: 0.385em 0.692em 0.308em 0.692em;
}
Pour.finir,.définissez.un.état.de.survol.pour.les.liens.d’ancre..Les.dates.précédemment.sélectionnées.hériteront.aussi.de.ce.style.par.l’inclusion.d’une.classe.sélectionnée..Ici,.je.passe.
les.liens.en.blanc.sur.fond.bleu.et.je.leur.attribue.une.ombre.de.texte.subtile.
.cal tbody a:hover,
.cal tbody a:focus,
.cal tbody a:active,
.cal tbody .selected a:link,
.cal tbody .selected a:visited,
.cal tbody .selected a:hover,
.cal tbody .selected a:focus,
.cal tbody .selected a:active {
background-color: #6d8ab7;
color: white;
text-shadow: 1px 1px 2px #22456b;
}
Vous.remarquerez.que.les.dates.conservent.leur.apparence.biseautée.lors.du.survol..Si.vous.
souhaitez.donner.l’impression.que.la.case.de.la.date.s’enfonce,.changez.la.couleur.des.bordures.de.cellule.de.manière.à.assombrir.les.bordures.supérieure.et.gauche.et.à.éclaircir.les.
bordures.inférieure.et.droite..Notez.bien.que,.comme.ce.style.utilise.un.pseudo-sélecteur.
hover.sur.un.élément.qui.n’est.pas.une.ancre,.il.ne.s’affiche.pas.dans.Internet.Explorer 6..
Pour.qu’il.s’y.affiche,.ajoutez.des.bordures.aux.liens.à.la.place..
.cal tbody td:hover,
.cal tbody td.selected {
border-top: 1px solid #2a3647;
border-right: 1px solid #465977;
border-bottom: 1px solid #576e92;
border-left: 1px solid #466080;
}
Et.voilà.le.travail :.vous.avez.maintenant.un.superbe.sélecteur.de.date.analogue.à.celui.de.
la.Figure 7.3..
Mise en forme simple de formulaires
Les. formulaires. courts. et. assez. simples. sont. plus. faciles. à. remplir. lorsque. les. étiquettes.
apparaissent.au-dessus.des.éléments.de.formulaire.associés..Les.utilisateurs.peuvent.alors.
descendre.progressivement,.en.lisant.chaque.étiquette.et.en.complétant.l’élément.de.formulaire.qui.la.suit..Cette.méthode.fonctionne.bien.avec.les.formulaires.courts.qui.collectent.des.
informations.relativement.simples.et.prévisibles,.comme.des.informations.de.contact.(voir.
Figure 7.4)..