24
Maîtrise des CSS
Nombreux.sont.les.programmeurs.CSS.qui.ont.tendance.à.s’appuyer.excessivement.sur.les.
sélecteurs.de.classe.et.d’ID..S’ils.souhaitent.mettre.en.forme.les.titres.d’une.manière.dans.
la.zone.de.contenu.principale.et.d’une.autre.dans.la.zone.de.contenu.secondaire,.ils.créent.
souvent.deux.classes.et.appliquent.l’une.à.un.titre.et.l’autre.à.l’autre.titre..Il.est.pourtant.bien.
plus.simple.d’utiliser.une.combinaison.de.sélecteurs.de.type,.de.sélecteurs.descendants,.de.
sélecteurs.d’ID.ou.de.sélecteurs.de.classe :
#main-content h2 {font-size: 1.8em;}
#secondaryContent h2 {font-size: 1.2em;}
...
...
Cet. exemple. est. très. simple. et. facilement. compréhensible,. mais. vous. seriez. surpris. du.
nombre.d’éléments.que.vous.pouvez.cibler.à.l’aide.des.quatre.seuls.sélecteurs.précédents..
Si.vous.vous.retrouvez.à.ajouter.beaucoup.de.classes.superflues.à.un.document,.c’est.probablement.le.signe.qu’il.est.mal.structuré..Au.lieu.de.cela,.réfléchissez.à.la.manière.dont.
ces.éléments.diffèrent.les.uns.des.autres..Vous.constaterez.souvent.que.la.seule.véritable.
différence.tient.à.l’endroit.où.ils.apparaissent.dans.la.page..Au.lieu.de.leur.attribuer.différentes.classes,.pensez.à.appliquer.une.classe.ou.un.ID.à.l’un.de.leurs.parents,.puis.ciblez-les.
à.l’aide.d’un.sélecteur.descendant.
Pseudo-classes
Il.peut.arriver.que.vous.souhaitiez.appliquer.un.style.à.un.élément.en.fonction.d’un.autre.
critère.que.celui.de.la.structure.du.document.(par.exemple,.l’état.d’un.lien.ou.d’un.élément.
de.formulaire)..Cela.est.possible.en.utilisant.un.sélecteur.de.pseudo-classe.
/* affiche tous les liens non visités en bleu */
a:link {color:blue;}
/* affiche tous les liens visités en vert */
a:visited {color:green;}
/* affiche les liens en rouge quand on les survole ou les active.
l’état focus est ajouté pour la prise en charge du clavier */
a:hover, a:focus, a:active {color:red;}
/* affiche en rouge les lignes de tableau survolées */
tr:hover {background-color: red;}
/* affiche les éléments de saisie en jaune s’ils sont activés */
input:focus {background-color:yellow;}
Maîtrise des CSS
Happy Birthday Andy
24/3/2009
Nombreux.sont.les.programmeurs.CSS.qui.ont.tendance.à.s’appuyer.excessivement.sur.les.
sélecteurs.de.classe.et.d’ID..S’ils.souhaitent.mettre.en.forme.les.titres.d’une.manière.dans.
la.zone.de.contenu.principale.et.d’une.autre.dans.la.zone.de.contenu.secondaire,.ils.créent.
souvent.deux.classes.et.appliquent.l’une.à.un.titre.et.l’autre.à.l’autre.titre..Il.est.pourtant.bien.
plus.simple.d’utiliser.une.combinaison.de.sélecteurs.de.type,.de.sélecteurs.descendants,.de.
sélecteurs.d’ID.ou.de.sélecteurs.de.classe :
#main-content h2 {font-size: 1.8em;}
#secondaryContent h2 {font-size: 1.2em;}
Articles
...
Latest news
...
Cet. exemple. est. très. simple. et. facilement. compréhensible,. mais. vous. seriez. surpris. du.
nombre.d’éléments.que.vous.pouvez.cibler.à.l’aide.des.quatre.seuls.sélecteurs.précédents..
Si.vous.vous.retrouvez.à.ajouter.beaucoup.de.classes.superflues.à.un.document,.c’est.probablement.le.signe.qu’il.est.mal.structuré..Au.lieu.de.cela,.réfléchissez.à.la.manière.dont.
ces.éléments.diffèrent.les.uns.des.autres..Vous.constaterez.souvent.que.la.seule.véritable.
différence.tient.à.l’endroit.où.ils.apparaissent.dans.la.page..Au.lieu.de.leur.attribuer.différentes.classes,.pensez.à.appliquer.une.classe.ou.un.ID.à.l’un.de.leurs.parents,.puis.ciblez-les.
à.l’aide.d’un.sélecteur.descendant.
Pseudo-classes
Il.peut.arriver.que.vous.souhaitiez.appliquer.un.style.à.un.élément.en.fonction.d’un.autre.
critère.que.celui.de.la.structure.du.document.(par.exemple,.l’état.d’un.lien.ou.d’un.élément.
de.formulaire)..Cela.est.possible.en.utilisant.un.sélecteur.de.pseudo-classe.
/* affiche tous les liens non visités en bleu */
a:link {color:blue;}
/* affiche tous les liens visités en vert */
a:visited {color:green;}
/* affiche les liens en rouge quand on les survole ou les active.
l’état focus est ajouté pour la prise en charge du clavier */
a:hover, a:focus, a:active {color:red;}
/* affiche en rouge les lignes de tableau survolées */
tr:hover {background-color: red;}
/* affiche les éléments de saisie en jaune s’ils sont activés */
input:focus {background-color:yellow;}