Cette page explique comment CSS fonctionne dans votre navigateur. Vous analyserez votre document de démonstration, révélant les détails de son style.
Information : fonctionnement de CSS
Lorsque Mozilla affiche un document, il doit combiner le contenu du document avec ses informations de style. Ainsi, il traite le document en deux étapes :
- Au premier stade, Mozilla convertit le langage de balisage et le CSS dans unDOM (modèle objet de document). Le DOM représente le document dans la mémoire de l'ordinateur. Il combine le contenu du document et son style.
- Au second stade, Mozilla affiche le DOM.
Un langage de balisage utilise des balises pour définir la structure du document. Un élément peut en contenir d'autres, entre sa balise de début et sa balise de fin.
Un DOM a une structure sous forme d'arbre. Chaque balise et morceau de texte figurant dans le langage de balisage devient unnœud dans la structure arborescente. Les nœuds DOM n'en contiennent pas d'autres, au lieu de cela ils peuvent êtreparents de nœudsenfants .
Les nœuds correspondant à des balises sont aussi appeléséléments .
Dans votre document exemple, la balise <P> et sa balise de fermeture </P> forment un conteneur :
<P> <STRONG>C</STRONG>ascading <STRONG>S</STRONG>tyle <STRONG>S</STRONG>heets </P> Dans le DOM, le nœud P correspondant est un parent. Ses enfants sont les nœuds STRONG et les nœuds de texte. Les nœuds STRONG sont eux-mêmes parents, avec des nœuds de texte comme enfants : P ├─STRONG │ │ │ └─"C" │ ├─"ascading" │ ├─STRONG │ │ │ └─"S" │ ├─"tyle" │ ├─STRONG │ │ │ └─"S" │ └─"heets" |
La compréhension du DOM aide à créer, déboguer et maintenir votre CSS, car le DOM est l'endroit où CSS et le document se rencontrent.
Action : Analyse d'un DOM
Pour analyser un DOM, il est nécessaire d'utiliser un logiciel spécial. Ici, nous utiliserons l'Inspecteur DOM (DOMi) de Mozilla pour analyser un DOM.
Utilisez votre navigateur Mozilla pour ouvrir votre document exemple.
Depuis la barre de menu de votre navigateur, choisissez Outils – Inspecteur DOM, ou éventuellement Outils – Développement Web – Inspecteur DOM.
| Si votre navigateur Mozilla n'a pas de DOMi, vous pouvez réinstaller votre navigateur en vérifiant que vous installez le composant Outils de développement. Revenez ensuite à ce tutoriel.
Si vous ne désirez pas installer le DOMi, vous pouvez passer cette section et vous rendre directement à la page suivante. Cette section peut être passée sans problème pour comprendre le reste du tutoriel. |
Dans le DOMi, dépliez les nœuds de votre document en cliquant sur leurs flèches.
Note : Les espaces dans votre fichier HTML font que le DOMi affichera certains nœuds de texte vides, que vous pouvez ignorer.
Le résultat peut ressembler à ceci, selon les nœuds que vous avez dépliés :
|
│ ▼╴P │ │ │ ▼╴STRONG │ │ └#text │ ├╴#text │ ▶╴STRONG │ │ |
Lorsque vous sélectionnez un nœud, vous pouvez utiliser le panneau de droite du DOMi pour en savoir plus sur celui-ci. Par exemple, lorsque vous sélectionnez un nœud de texte, DOMi affichera son texte dans le panneau de droite.
Lorsque vous sélectionnez un nœud d'élément, DOMi l'analyse et fournit une grande quantité d'informations dans le panneau de droite. Les informations de style sont juste une petite partie de ce qui peut y être affiché.
| Dans le DOMi, cliquez sur un nœud STRONG.
Utilisez le panneau de droite pour découvrir à quel endroit la couleur du nœud est mise en rouge, et à quel endroit son apparence est rendue plus grasse que le texte normal. |
Pour continuer
Si vous avez des difficultés à comprendre cette page, ou si vous avez des commentaires, contribuez à sa page de discussion.
Si vous avez relevé le challenge, vous avez vu que les informations de style venant de plusieurs endroits interagissent pour créer le style final d'un élément.
La page suivante explique plus en détails ces interactions : Cascade et héritage.