Overerving van CSS-eigenschappen

Stel we hebben een paragraaf, en daarin een stuk tekst in de tag i:

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

Laten we de paragrafen een rode kleur geven:

cssp {
  color: red;
}

Als resultaat wordt niet alleen de tekst van de paragraaf gekleurd, maar ook de tekst van de tag i:

Het punt is dat de eigenschap color wordt geërfd. Dit betekent dat als de bovenliggende tag een bepaalde kleur heeft, deze kleur ook voor de onderliggende tags geldt. Niet alle CSS-eigenschappen worden geërfd, maar veel (van degene die je al kent - worden allemaal geërfd).

Indien gewenst, kan men echter de eigenschap van de ouder overschrijven, door een selector voor de onderliggende tag te specificeren. Laten we bijvoorbeeld voor de paragraaf een rode kleur instellen, en voor cursief - blauw:

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

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

Результат:

De volgorde van de selectors in de CSS-code maakt in dit geval niet uit. Als je de selector i en de selector p omwisselt, zal het hetzelfde werken:

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

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

Результат:

Задание 1

Bestudeer de code en zeg welke kleur de tekst in de tag b zal hebben:

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

cssp {
  color: blue;
}

Задание 2

Bestudeer de code en zeg welke kleur de tekst in de tag b zal hebben:

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

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

Задание 3

Bestudeer de code en zeg welke kleur de tekst in de tag b zal hebben:

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

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

Задание 4

Bestudeer de code en zeg welke kleur de tekst in de tag li zal hebben:

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

cssul {
  color: blue;
}

Задание 5

Bestudeer de code en zeg welke kleur de tekst in de tag li zal hebben:

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

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

Задание 6

Bestudeer de code en zeg welke kleur de tekst in de tag i zal hebben:

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

Bestudeer de code en zeg welke grootte de tekst in de tag i zal hebben:

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;
}