Un.document.valide.et.bien.structuré.fournit.les.fondations.sur.lesquelles.les.styles.peuvent.
s’appliquer..Pour.pouvoir.mettre.en.forme.un.élément.HTML.donné.avec.des.CSS,.il.vous.
faut.un.moyen.de.le.cibler..Dans.les.CSS,.la.partie.de.la.règle.de.style.qui.réalise.cette.opération.est.appelée.le.sélecteur.
•. Au.cours.de.ce.chapitre,.vous.découvrirez :
•. les.sélecteurs.courants ;.
•. les.sélecteurs.avancés ;
•. les.nouveaux.sélecteurs.CSS 3 ;
•. les.merveilleux.concepts.de.spécificité.et.de.cascade ;
•. comment.planifier.et.gérer.les.feuilles.de.styles ;
•. comment.commenter.le.code.
Les sélecteurs courants
Les.sélecteurs.les.plus.courants.sont.les.sélecteurs.de.type.et.les.sélecteurs.descendants..Les.
premiers.sont.utilisés.pour.cibler.un.type.d’élément.particulier,.comme.un.élément.de.paragraphe.ou.de.titre..Vous.devez.simplement.spécifier.le.nom.de.l’élément.que.vous.souhaitez.
mettre.en.forme..Les.sélecteurs.de.type.sont.parfois.aussi.appelés.sélecteurs.d’élément.ou.
sélecteurs.simples.
p {color: black;}
h1 {font-weight: bold;}
Les.sélecteurs.descendants.permettent.de.cibler.les.descendants.d’un.élément.ou.d’un.groupe.
d’éléments. donnés.. Ils. sont. indiqués. par. un. espace. entre. deux. autres. sélecteurs.. Dans.
l’exemple.suivant,.seuls.les.éléments.de.paragraphe.qui.sont.des.descendants.d’un.élément.blockquote.se.voient.appliquer.un.retrait..Tous.les.autres.paragraphes.restent.ne.sont.pas.affectés..
blockquote p {padding-left: 2em;}
Ces. deux. types. de. sélecteurs. sont. particulièrement. intéressants. pour. appliquer. des. styles.
génériques.qui.se.retrouvent.dans.l’ensemble.d’un.site..Pour.être.plus.spécifique.et.cibler.
des.éléments.particuliers,.vous.pouvez.utiliser.des.sélecteurs.d’ID.et.de.classe,.qui.ciblent.
les.éléments.possédant.l’ID.ou.le.nom.de.classe.correspondant..Les.sélecteurs.d’ID.s’identifient. à. l’aide. d’un. caractère. dièse,. ceux. de. classe,. à. l’aide. d’un. point.. Dans. l’exemple.
suivant,.la.première.règle.passe.en.gras.le.texte.du.paragraphe.d’introduction.et.la.seconde.
passe.la.date.en.gris :
#intro {font-weight: bold;}
.date-posted {color: #ccc;}
2
Des styles qui atteignent
leur cible
s’appliquer..Pour.pouvoir.mettre.en.forme.un.élément.HTML.donné.avec.des.CSS,.il.vous.
faut.un.moyen.de.le.cibler..Dans.les.CSS,.la.partie.de.la.règle.de.style.qui.réalise.cette.opération.est.appelée.le.sélecteur.
•. Au.cours.de.ce.chapitre,.vous.découvrirez :
•. les.sélecteurs.courants ;.
•. les.sélecteurs.avancés ;
•. les.nouveaux.sélecteurs.CSS 3 ;
•. les.merveilleux.concepts.de.spécificité.et.de.cascade ;
•. comment.planifier.et.gérer.les.feuilles.de.styles ;
•. comment.commenter.le.code.
Les sélecteurs courants
Les.sélecteurs.les.plus.courants.sont.les.sélecteurs.de.type.et.les.sélecteurs.descendants..Les.
premiers.sont.utilisés.pour.cibler.un.type.d’élément.particulier,.comme.un.élément.de.paragraphe.ou.de.titre..Vous.devez.simplement.spécifier.le.nom.de.l’élément.que.vous.souhaitez.
mettre.en.forme..Les.sélecteurs.de.type.sont.parfois.aussi.appelés.sélecteurs.d’élément.ou.
sélecteurs.simples.
p {color: black;}
h1 {font-weight: bold;}
Les.sélecteurs.descendants.permettent.de.cibler.les.descendants.d’un.élément.ou.d’un.groupe.
d’éléments. donnés.. Ils. sont. indiqués. par. un. espace. entre. deux. autres. sélecteurs.. Dans.
l’exemple.suivant,.seuls.les.éléments.de.paragraphe.qui.sont.des.descendants.d’un.élément.blockquote.se.voient.appliquer.un.retrait..Tous.les.autres.paragraphes.restent.ne.sont.pas.affectés..
blockquote p {padding-left: 2em;}
Ces. deux. types. de. sélecteurs. sont. particulièrement. intéressants. pour. appliquer. des. styles.
génériques.qui.se.retrouvent.dans.l’ensemble.d’un.site..Pour.être.plus.spécifique.et.cibler.
des.éléments.particuliers,.vous.pouvez.utiliser.des.sélecteurs.d’ID.et.de.classe,.qui.ciblent.
les.éléments.possédant.l’ID.ou.le.nom.de.classe.correspondant..Les.sélecteurs.d’ID.s’identifient. à. l’aide. d’un. caractère. dièse,. ceux. de. classe,. à. l’aide. d’un. point.. Dans. l’exemple.
suivant,.la.première.règle.passe.en.gras.le.texte.du.paragraphe.d’introduction.et.la.seconde.
passe.la.date.en.gris :
#intro {font-weight: bold;}
.date-posted {color: #ccc;}
2
Des styles qui atteignent
leur cible