CSS omaduste pärimine

Oletagem, et meil on lõik ja selles mingi tekst siltides i:

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

Värvime lõigud punaseks:

cssp {
  color: red;
}

Tulemusena värvub mitte ainult lõigu tekst, vaid ka sildi i tekst:

Kõik on selles, et omadus color pärandub. See tähendab, et kui vanemsildil on määratud mingi värv, siis see värv on ka järglastel. Kõik CSS omadused ei pärine, aga paljud (nendest, mida te juba teate - kõik pärivad).

Soovi korral on võimalik siiski vanema omadust üle kirjutada, määrates järglase valija. Näiteks määrame lõigule punase värvi ja kaldkirjale sinise:

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

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

Результат:

Valijate järjekord CSS koodis sel juhul ei oma tähtsust. Kui vahetada omavahel valija i ja valija p, töötab kõik samamoodi:

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

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

Результат:

Задание 1

Pärast koodi uurimist, öelge mis värvi on tekst sildis b:

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

cssp {
  color: blue;
}

Задание 2

Pärast koodi uurimist, öelge mis värvi on tekst sildis b:

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

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

Задание 3

Pärast koodi uurimist, öelge mis värvi on tekst sildis b:

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

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

Задание 4

Pärast koodi uurimist, öelge mis värvi on tekst sildis li:

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

cssul {
  color: blue;
}

Задание 5

Pärast koodi uurimist, öelge mis värvi on tekst sildis li:

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

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

Задание 6

Pärast koodi uurimist, öelge mis värvi on tekst sildis 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

Pärast koodi uurimist, öelge mis suuruse on tekst sildis 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;
}