path: root/files/fr/css/premiers_pas/fonctionnement_de_css/index.html

---
title: Fonctionnement de CSS
slug: CSS/Premiers_pas/Fonctionnement_de_CSS
tags:
  - CSS
  - 'CSS:Premiers_pas'
translation_of: Learn/CSS/First_steps/How_CSS_works
---
<p> </p>

<p>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.</p>

<h3 id="Information_:_fonctionnement_de_CSS" name="Information_:_fonctionnement_de_CSS">Information : fonctionnement de CSS</h3>

<p>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 :</p>

<ul>
 <li>Au premier stade, Mozilla convertit le langage de balisage et le CSS dans un<em>DOM</em> (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.</li>
</ul>

<ul>
 <li>Au second stade, Mozilla affiche le DOM.</li>
</ul>

<p>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.</p>

<p>Un DOM a une structure sous forme d'arbre. Chaque balise et morceau de texte figurant dans le langage de balisage devient un<em>nœud</em> dans la structure arborescente. Les nœuds DOM n'en contiennent pas d'autres, au lieu de cela ils peuvent être<em>parents</em> de nœuds<em>enfants</em> .</p>

<p>Les nœuds correspondant à des balises sont aussi appelés<em>éléments</em> .</p>

<table style="background-color: #fffff4; border: 1px solid #36b; margin-bottom: 1em; padding: 1em;">
 <caption>Exemple</caption>
 <tbody>
  <tr>
   <td>Dans votre document exemple, la balise <code>&lt;P&gt;</code> et sa balise de fermeture <code>&lt;/P&gt;</code> forment un conteneur :
    <div style="width: 24em;">
    <pre class="eval">
&lt;P&gt;
  &lt;STRONG&gt;C&lt;/STRONG&gt;ascading
  &lt;STRONG&gt;S&lt;/STRONG&gt;tyle
  &lt;STRONG&gt;S&lt;/STRONG&gt;heets
&lt;/P&gt;
</pre>
    </div>

    <p>Dans le DOM, le nœud P correspondant est un parent. Ses enfants sont les nœuds <small>STRONG</small> et les nœuds de texte. Les nœuds <small>STRONG</small> sont eux-mêmes parents, avec des nœuds de texte comme enfants :</p>

    <div style="width: 24em; color: #47c; white-space: pre; padding: 0 0 0 2em;">
    <p><span style="color: black;">P</span> ├─<span style="color: black;">STRONG</span> │ │ │ └─"<span style="color: black;">C</span>" │ ├─"<span style="color: black;">ascading</span>" │ ├─<span style="color: black;">STRONG</span> │ │ │ └─"<span style="color: black;">S</span>" │ ├─"<span style="color: black;">tyle</span>" │ ├─<span style="color: black;">STRONG</span> │ │ │ └─"<span style="color: black;">S</span>" │ └─"<span style="color: black;">heets</span>"</p>
    </div>
   </td>
  </tr>
 </tbody>
</table>

<p>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.</p>

<h3 id="Action_:_Analyse_d.27un_DOM" name="Action_:_Analyse_d.27un_DOM">Action : Analyse d'un DOM</h3>

<p>Pour analyser un DOM, il est nécessaire d'utiliser un logiciel spécial. Ici, nous utiliserons l'<a href="/fr/docs/Inspecteur_DOM">Inspecteur DOM</a> (DOMi) de Mozilla pour analyser un DOM.</p>

<p>Utilisez votre navigateur Mozilla pour ouvrir votre document exemple.</p>

<p>Depuis la barre de menu de votre navigateur, choisissez Outils – Inspecteur DOM, ou éventuellement Outils – Développement Web – Inspecteur DOM.</p>

<table style="background-color: #f4f4f4; border: 1px solid #36b; padding: 1em;">
 <caption>Plus de détails</caption>
 <tbody>
  <tr>
   <td>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.
    <p>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.</p>
   </td>
  </tr>
 </tbody>
</table>

<p><br>
 Dans le DOMi, dépliez les nœuds de votre document en cliquant sur leurs flèches.</p>

<p><strong>Note : </strong> Les espaces dans votre fichier HTML font que le DOMi affichera certains nœuds de texte vides, que vous pouvez ignorer.</p>

<p>Le résultat peut ressembler à ceci, selon les nœuds que vous avez dépliés :</p>

<table style="border: 2px outset #36b; padding: 0 0 0 2em;">
 <tbody>
  <tr>
   <td>
    <div style="width: 30em; background-color: transparent; margin: 0px; border: 0px; padding: 0px; color: gray; white-space: pre;">
    <p>│ <span style="font-size: 133%;">▼</span>╴<span style="color: black;">P</span> │ │ │ <span style="font-size: 133%;">▼</span>╴<span style="color: black;">STRONG</span> │ │ └<span style="color: darkblue;">#text</span> │ ├╴<span style="color: darkblue;">#text</span> │ <span style="font-size: 133%;">▶</span>╴<span style="color: black;">STRONG</span> │ │</p>
    </div>
   </td>
  </tr>
 </tbody>
</table>

<p>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.</p>

<p>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é.</p>

<p> </p>

<table style="background-color: #ffe; border: 1px solid #36b; padding: 1em;">
 <caption>Challenge</caption>
 <tbody>
  <tr>
   <td>Dans le DOMi, cliquez sur un nœud <small>STRONG</small>.
    <p>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.</p>
   </td>
  </tr>
 </tbody>
</table>

<p> </p>

<h4 id="Pour_continuer" name="Pour_continuer">Pour continuer</h4>

<p>Si vous avez des difficultés à comprendre cette page, ou si vous avez des commentaires, contribuez à sa <a>page de discussion</a>.</p>

<p>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.</p>

<p>La page suivante explique plus en détails ces interactions : <strong><a href="/fr/docs/CSS/Premiers_pas/Cascade_et_h%c3%a9ritage">Cascade et héritage</a></strong>.</p>