Arv av CSS-egenskaper

La oss si at vi har et avsnitt, og i det er det noe tekst i taggen i:

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

La oss farge avsnittene i rødt:

cssp {
  color: red;
}

Som et resultat vil ikke bare avsnittets tekst bli farget, men også teksten i taggen i:

Hele poenget er at egenskapen color arves. Dette betyr at hvis forelderelementet har en bestemt farge, vil barnet ha samme farge. Ikke alle CSS-egenskaper arves, men mange (av de du allerede kjenner til - alle arves).

Om ønsket kan man imidlertid overstyre forelderens egenskap ved å sette en selektor for barnet. For eksempel, la oss sette rød farge på avsnittet, og blå farge på kursiv:

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

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

Результат:

Rekkefølgen på selektorene i CSS-koden har i så fall ingen betydning. Hvis du bytter om selektoren i og selektoren p, vil det fungere likt:

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

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

Результат:

Задание 1

Etter å ha studert koden, si hvilken farge teksten i taggen b vil ha:

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

cssp {
  color: blue;
}

Задание 2

Etter å ha studert koden, si hvilken farge teksten i taggen b vil ha:

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

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

Задание 3

Etter å ha studert koden, si hvilken farge teksten i taggen b vil ha:

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

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

Задание 4

Etter å ha studert koden, si hvilken farge teksten i taggen li vil ha:

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

cssul {
  color: blue;
}

Задание 5

Etter å ha studert koden, si hvilken farge teksten i taggen li vil ha:

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

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

Задание 6

Etter å ha studert koden, si hvilken farge teksten i taggen i vil ha:

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

Etter å ha studert koden, si hvilken størrelse teksten i taggen i vil ha:

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