Un menu horizontal réactif

La notion de descendance en CSS

Notion de descendance

Imbrication de deux balisesLa notion de descendance en CSS est illustrée dans l'exercice de la page précédente, relatif à la fable de La Fontaine.

On y voit, en effet, deux balises <span> imbriquées.

L'expression "Monsieur du Corbeau" contient la rime "Corbeau". Le code HTML correspondant est du type suivant:

<span class="corbeau">
Monsieur du <span class="rimex">Corbeau</span>
</span>

La balise <span class="corbeau"> contient une autre balise <span class="rimex">.

À retenirEn CSS, on parle de descendance lorsqu'un élément (l'enfant) est contenu dans un autre élément (le parent).

Dans l'exemple ci-dessus, l'élément <span class="rimex">xxxxxxx</span> est un descendant de l'élément <span class="corbeau"> car il est contenu dans l'élément <span class="corbeau">.

Mais d'autres exemples de descendance sont déjà apparus dans les leçons précédentes.

Dans un document HTML, la balise <body> est (conseil: jette un coup d'oeil à une page de code HTML avant de répondre)
Un enfant
Un parent
Un enfant et un parent
Ni un enfant, ni un parent
Dans la structure
<ul>
    <li>bla bla bla</li>
    <li>bla bla bla</li>
</ul>
Les balises <li> sont
Des parents de <ul>
Des enfants de <ul>
Des parents et des enfants de <ul>
Ni des parents, ni des enfants de <ul>

Intérêt de la notion de descendance en CSS

Observe attentivement l'exemple de code ci-dessous. Peux-tu imaginer le résultat obtenu dans un navigateur?

<html>
    <head>
    <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
    <title>Une page de démonstration</title>
    <style type="text/css">
        body {color: red; font-style: italic}
        strong {color: green}
    </style>
    </head>
    <body>
        <h1>Le titre principal</h1
        <p>Le <strong>contenu</strong> de la page</p>
    </body>
</html>
Dans le code ci-dessus, quels sont les descendants de la balise <body> ?
<head> et <style>
<h1> et <p>
<h1>, <p> et <strong>
<h1> seulement
  • Recopie le code présenté ci-dessus dans l'onglet Source de KompoZer.
  • Observe le résultat.

Observations

  • L'ensemble du contenu du bloc <body> présente les caractères italiques imposés par la feuille de style (body {font-style: italic})
  • Seul le contenu de l'élément <strong> présente la couleur verte imposée par la feuille de style (strong {color: green})
  • Le reste du contenu de <body> présente la couleur rouge imposée par la feuille de style (body {color: red})
À retenIR

Les éléments "enfants" héritent des propriétés CSS de leurs parents.

Les propriétés des parents sont perdues lorsqu'elles sont redéfinies sur un enfant.

Oh là! Vous fatiguez déjà? Je pense que l'on doit mettre tout de suite un bémol à cette règle. L'élément <strong> n'est pas un enfant de <body> et pourtant, il est bien en italique.

Vous n'avez que partiellement raison.
L'élément <strong> est un enfant de <p>. Mais <p> possède lui-même la propriété "italique" héritée de son parent <body>.
Donc, <strong> hérite bien la propriété "italique" de son parent <p> (qui le tient lui-même de son parent <body>). Bref, c'est bien une affaire d'héritage.

Imbrication de deux balisesDans l'exemple de la fable de La Fontaine, pourquoi la rime "Corbeau" est-elle présentée sur fond noir ?
Parce qu'elle hérite de cette propriété de son parent <span class="corbeau">.
Parce que c'est une caractéristique que l'on a imposé aux "rimes".
Parce que c'est la couleur de fond par défaut du document.
Dans l'exemple de la fable de La Fontaine, pourquoi la rime "Corbeau" n'est-elle pas écrite en jaune?
L'image présentée ne correspond pas à la réalité. En fait, "Corbeau" est bien écrit en jaune. C'est une erreur dans la leçon. Le prof était fatigué.
Parce que la propriété "écriture en jaune" a été perdue. On a redéfini la couleur pour cet enfant.
Parce que l'ensemble du texte a été défini en couleur rouge.

Quand tu as répondu à toutes les questions et bien compris les réponses, passe à la page suivante. Page suivante


Dernière modification 04/11/2007
Ecrire