Héritage des propriétés CSS

Supposons que nous ayons un paragraphe, et à l'intérieur un texte dans la balise i :

html<p>
  This is some <i>text</i> in paragraph.
</p>

Colorons les paragraphes en rouge :

cssp {
  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 :

html<p>
  This is some <i>text</i> in paragraph.
</p>

cssp {
  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 :

html<p>
  This is some <i>text</i> in paragraph.
</p>

cssi {
  color: blue;
}
p {
  color: red;
}

Результат:

Задание 1

En étudiant le code, dites de quelle couleur sera le texte dans la balise b :

html<p>
  This is some <b>text</b> in paragraph.
</p>

cssp {
  color: blue;
}

Задание 2

En étudiant le code, dites de quelle couleur sera le texte dans la balise b :

html<p>
  This is some <b>text</b> in paragraph.
</p>

cssp {
  color: blue;
}
b {
  color: red;
}

Задание 3

En étudiant le code, dites de quelle couleur sera le texte dans la balise b :

html<p>
  This is some <b>text</b> in paragraph.
</p>

cssb {
  color: red;
}
p {
  color: blue;
}

Задание 4

En étudiant le code, dites de quelle couleur sera le texte dans la balise li :

html<ul>
  <li>text</li>
  <li>text</li>
  <li>text</li>
</ul>

cssul {
  color: blue;
}

Задание 5

En étudiant le code, dites de quelle couleur sera le texte dans la balise li :

html<ul>
  <li>text</li>
  <li>text</li>
  <li>text</li>
</ul>

cssul {
  color: blue;
}
li {
  color: red;
}

Задание 6

En étudiant le code, dites de quelle couleur sera le texte dans la balise i :

html<ul>
  <li>text <i>italic</i> text</li>
  <li>text <i>italic</i> text</li>
  <li>text <i>italic</i> text</li>
</ul>

cssul {
  color: blue;
}
li {
  color: red;
}
i {
  color: green;
}

Задание 7

En étudiant le code, dites quelle taille aura le texte dans la balise i :

html<ul>
  <li>text <i>italic</i> text</li>
  <li>text <i>italic</i> text</li>
  <li>text <i>italic</i> text</li>
</ul>

cssi {
  font-size: 30px;
}
ul {
  font-size: 20px;
}
li {
  color: red;
  font-weight: bold;
}