CSS savybių paveldėjimas

Tarkime, kad turime pastraipą, o joje kažkoks tekstas i žymėje:

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

Nudažykime pastraipas raudona spalva:

cssp {
  color: red;
}

Rezultate bus nudažytas ne tik pastraipos tekstas, bet ir i žymės tekstas:

Esmė ta, kad color savybė paveldima. Tai reiškia, kad jei tėvinė žymė turi nustatytą kokią nors spalvą, tai tokią spalvą turės ir palikuonys. Ne visos CSS savybės yra paveldimos, bet daugelis (iš tų, kurias jūs jau žinote - visos yra paveldimos).

Norint, tačiau, galima perrašyti tėvo savybę, nustatant palikuonio selektorių. Pavyzdžiui, pastraipai nustatykime raudoną spalvą, o kursyvui - mėlyną:

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

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

Результат:

Selektorių tvarka CSS kode šiuo atveju neturi reikšmės. Jei sukeisti vietomis i selektorių ir p selektorių, viskas veiks taip pat:

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

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

Результат:

Задание 1

Išnagrinėję kodą, pasakykite kokią spalvą turės tekstas b žymėje:

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

cssp {
  color: blue;
}

Задание 2

Išnagrinėję kodą, pasakykite kokią spalvą turės tekstas b žymėje:

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

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

Задание 3

Išnagrinėję kodą, pasakykite kokią spalvą turės tekstas b žymėje:

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

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

Задание 4

Išnagrinėję kodą, pasakykite kokią spalvą turės tekstas li žymėje:

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

cssul {
  color: blue;
}

Задание 5

Išnagrinėję kodą, pasakykite kokią spalvą turės tekstas li žymėje:

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

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

Задание 6

Išnagrinėję kodą, pasakykite kokią spalvą turės tekstas i žymėje:

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

Išnagrinėję kodą, pasakykite kokį dydį turės tekstas i žymėje:

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