35
Des styles qui atteignent leur cible
L’héritage.est.très.utile.car.il.évite.d’ajouter.le.même.style.à.chaque.descendant.d’un.élément.. Si. la. propriété. que. vous. essayez. de. définir. est. une. propriété. héritée,. vous. pouvez.
. également.l’appliquer.à.l’élément.parent..Après.tout,.quelle.utilité.y.a-t-il.à.écrire.ceci :
p, div, h1, h2, h3, ul, ol, dl, li {color: black;}
alors.qu’on.peut.écrire.ceci ?
body {color: black;}
De.la.même.manière.que.la.cascade.peut.aider.à.simplifier.les.CSS,.l’héritage.bien.utilisé.
peut.aider.à.réduire.le.nombre.et.la.complexité.des.sélecteurs.dans.le.code..Si.de.nombreux.
éléments.héritent.différents.styles,.il.peut.cependant.être.difficile.de.déterminer.d’où.proviennent.les.styles..
Planification, organisation et gestion des feuilles de styles
Plus.les.sites.grossissent,.se.compliquent.et.se.sophistiquent.sur.le.plan.graphique,.plus.les.
CSS.deviennent.difficiles.à.gérer..À cette.section,.nous.allons.voir.comment.gérer.le.code,.
notamment.en.regroupant.les.styles.dans.des.sections.logiques.et.en.ajoutant.des.commentaires.pour.faciliter.la.lecture.du.code.
Application de styles aux documents
Vous. pouvez. ajouter. des. styles. directement. dans. l’en-tête. d’un. document. en. les. plaçant.
entre.des.balises.style,.mais.cette.méthode.n’est.pas.conseillée..Si.vous.créez.une.autre.
page.qui.utilise.les.mêmes.styles,.vous.êtes.alors.contraint.de.les.dupliquer.dans.celle-ci..Si.
vous.souhaitez.ensuite.changer.un.style,.il.faut.le.changer.à.deux.endroits.au.lieu.d’un..Les.
CSS.permettent.heureusement.de.conserver.tous.les.styles.dans.une.ou.plusieurs.feuilles.de.
styles.externes..Il.existe.deux.moyens.d’attacher.des.feuilles.de.styles.externes.à.une.page.
web :.les.lier.ou.les.importer..
L’importation. ne. se. restreint. pas. aux. limites. du. document. HTML,. puisque. vous. pouvez.
également.importer.une.feuille.de.styles.à.partir.d’une.autre.feuille.de.styles..Il.est.ainsi.
possible.de.lier.une.feuille.de.styles.de.base.dans.la.page.HTML.puis.d’y.importer.les.styles.
plus.compliqués.
@import url(/css/layout.css);
@import url(/css/typography.css);
@import url(/css/color.css);
Des styles qui atteignent leur cible
L’héritage.est.très.utile.car.il.évite.d’ajouter.le.même.style.à.chaque.descendant.d’un.élément.. Si. la. propriété. que. vous. essayez. de. définir. est. une. propriété. héritée,. vous. pouvez.
. également.l’appliquer.à.l’élément.parent..Après.tout,.quelle.utilité.y.a-t-il.à.écrire.ceci :
p, div, h1, h2, h3, ul, ol, dl, li {color: black;}
alors.qu’on.peut.écrire.ceci ?
body {color: black;}
De.la.même.manière.que.la.cascade.peut.aider.à.simplifier.les.CSS,.l’héritage.bien.utilisé.
peut.aider.à.réduire.le.nombre.et.la.complexité.des.sélecteurs.dans.le.code..Si.de.nombreux.
éléments.héritent.différents.styles,.il.peut.cependant.être.difficile.de.déterminer.d’où.proviennent.les.styles..
Planification, organisation et gestion des feuilles de styles
Plus.les.sites.grossissent,.se.compliquent.et.se.sophistiquent.sur.le.plan.graphique,.plus.les.
CSS.deviennent.difficiles.à.gérer..À cette.section,.nous.allons.voir.comment.gérer.le.code,.
notamment.en.regroupant.les.styles.dans.des.sections.logiques.et.en.ajoutant.des.commentaires.pour.faciliter.la.lecture.du.code.
Application de styles aux documents
Vous. pouvez. ajouter. des. styles. directement. dans. l’en-tête. d’un. document. en. les. plaçant.
entre.des.balises.style,.mais.cette.méthode.n’est.pas.conseillée..Si.vous.créez.une.autre.
page.qui.utilise.les.mêmes.styles,.vous.êtes.alors.contraint.de.les.dupliquer.dans.celle-ci..Si.
vous.souhaitez.ensuite.changer.un.style,.il.faut.le.changer.à.deux.endroits.au.lieu.d’un..Les.
CSS.permettent.heureusement.de.conserver.tous.les.styles.dans.une.ou.plusieurs.feuilles.de.
styles.externes..Il.existe.deux.moyens.d’attacher.des.feuilles.de.styles.externes.à.une.page.
web :.les.lier.ou.les.importer..
L’importation. ne. se. restreint. pas. aux. limites. du. document. HTML,. puisque. vous. pouvez.
également.importer.une.feuille.de.styles.à.partir.d’une.autre.feuille.de.styles..Il.est.ainsi.
possible.de.lier.une.feuille.de.styles.de.base.dans.la.page.HTML.puis.d’y.importer.les.styles.
plus.compliqués.
@import url(/css/layout.css);
@import url(/css/typography.css);
@import url(/css/color.css);