Héritage des propriétés CSS
Supposons que nous ayons un paragraphe, et à l'intérieur un
texte dans la balise i :
<p>
This is some <i>text</i> in paragraph.
</p>
Colorons les paragraphes en rouge :
p {
color: red;
}
En conséquence, non seulement le texte du paragraphe sera coloré,
mais aussi le texte de la balise i :
Le fait est que la propriété color
est héritée. Cela signifie que si
une balise parent a une couleur définie,
alors cette couleur sera appliquée aux descendants.
Ce ne sont pas toutes les propriétés CSS qui sont héritées, mais beaucoup (parmi celles que
vous connaissez déjà - toutes sont héritées).
Si on le souhaite, cependant, il est possible de surcharger la propriété du parent en définissant un sélecteur pour le descendant. Par exemple, donnons au paragraphe une couleur rouge et à l'italique une couleur bleue :
<p>
This is some <i>text</i> in paragraph.
</p>
p {
color: red;
}
i {
color: blue;
}
:
L'ordre des sélecteurs dans le code CSS dans ce cas
n'a pas d'importance. Si on interchange le sélecteur
i et le sélecteur p, tout fonctionnera
de la même manière :
<p>
This is some <i>text</i> in paragraph.
</p>
i {
color: blue;
}
p {
color: red;
}
:
En étudiant le code, dites de quelle couleur sera
le texte dans la balise b :
<p>
This is some <b>text</b> in paragraph.
</p>
p {
color: blue;
}
En étudiant le code, dites de quelle couleur sera
le texte dans la balise b :
<p>
This is some <b>text</b> in paragraph.
</p>
p {
color: blue;
}
b {
color: red;
}
En étudiant le code, dites de quelle couleur sera
le texte dans la balise b :
<p>
This is some <b>text</b> in paragraph.
</p>
b {
color: red;
}
p {
color: blue;
}
En étudiant le code, dites de quelle couleur sera
le texte dans la balise li :
<ul>
<li>text</li>
<li>text</li>
<li>text</li>
</ul>
ul {
color: blue;
}
En étudiant le code, dites de quelle couleur sera
le texte dans la balise li :
<ul>
<li>text</li>
<li>text</li>
<li>text</li>
</ul>
ul {
color: blue;
}
li {
color: red;
}
En étudiant le code, dites de quelle couleur sera
le texte dans la balise i :
<ul>
<li>text <i>italic</i> text</li>
<li>text <i>italic</i> text</li>
<li>text <i>italic</i> text</li>
</ul>
ul {
color: blue;
}
li {
color: red;
}
i {
color: green;
}
En étudiant le code, dites quelle taille aura
le texte dans la balise i :
<ul>
<li>text <i>italic</i> text</li>
<li>text <i>italic</i> text</li>
<li>text <i>italic</i> text</li>
</ul>
i {
font-size: 30px;
}
ul {
font-size: 20px;
}
li {
color: red;
font-weight: bold;
}
