Oorerving van CSS Eienskappe

Gestel ons het 'n paragraaf, en daarin is daar 'n stuk teks in die i-tag:

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

Kom ons maak die paragrawe rooi:

cssp {
  color: red;
}

As gevolg sal nie net die paragraaf se teks rooi word nie, maar ook die teks in die i-tag:

Die rede is dat die eienskap color geërf word. Dit beteken dat as die ouer-tag 'n sekere kleur het, dan sal die kinders dieselfde kleur hê. Nie alle CSS eienskappe word geërf nie, maar baie (van die wat jy reeds ken - word almal geërf).

Indien verlang, kan jy egter die ouer se eienskap oorheers deur 'n selektor vir die nageslag te spesifiseer. Byvoorbeeld, laat ons die paragraaf rooi maak en die kursief - blou:

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

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

Результат:

Die volgorde van selektore in die CSS-kode maak in so 'n geval nie saak nie. As jy die selektor i en die selektor p omruil, sal alles steeds werk op dieselfde manier:

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

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

Результат:

Задание 1

Deur die kode te bestudeer, sê watter kleur die teks in die b-tag sal hê:

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

cssp {
  color: blue;
}

Задание 2

Deur die kode te bestudeer, sê watter kleur die teks in die b-tag sal hê:

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

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

Задание 3

Deur die kode te bestudeer, sê watter kleur die teks in die b-tag sal hê:

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

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

Задание 4

Deur die kode te bestudeer, sê watter kleur die teks in die li-tag sal hê:

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

cssul {
  color: blue;
}

Задание 5

Deur die kode te bestudeer, sê watter kleur die teks in die li-tag sal hê:

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

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

Задание 6

Deur die kode te bestudeer, sê watter kleur die teks in die i-tag sal hê:

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

Deur die kode te bestudeer, sê watter grootte die teks in die i-tag sal hê:

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