CSS īpašību mantošana

Pieņemsim, ka mums ir rindkopa, un tajā ir kāds teksts tagā i:

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

Izkrāsosim rindkopas sarkanā krāsā:

cssp {
  color: red;
}

Rezultātā izkrāsosies ne tikai rindkopas teksts, bet arī teksta tags i:

Visa lieta ir tajā, ka īpašība color tiek mantota. Tas nozīmē, ka, ja vecāka elementam ir iestatīts kāds krāsa, tāda pati krāsa būs arī pēctečiem. Ne visas CSS īpašības tiek mantotas, bet daudzas (no tām, kuras jūs jau zināt - visas tiek mantotas).

Tomēr, ja vēlas, var pārrakstīt vecāka īpašību, iestatot selektoru pēctecim. Piemēram, dosim rindkopai sarkano krāsu, bet kursīvam - gaiši zilo:

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

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

Результат:

Selektoru secība CSS kodā šajā gadījumā nav nozīmes. Ja apmainīsiet vietām selektoru i un selektoru p, viss darbosies tāpat:

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

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

Результат:

Задание 1

Izpētījuši kodu, sakiet, kādu krāsu būs teksts tagā b:

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

cssp {
  color: blue;
}

Задание 2

Izpētījuši kodu, sakiet, kādu krāsu būs teksts tagā b:

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

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

Задание 3

Izpētījuši kodu, sakiet, kādu krāsu būs teksts tagā b:

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

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

Задание 4

Izpētījuši kodu, sakiet, kādu krāsu būs teksts tagā li:

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

cssul {
  color: blue;
}

Задание 5

Izpētījuši kodu, sakiet, kādu krāsu būs teksts tagā li:

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

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

Задание 6

Izpētījuši kodu, sakiet, kādu krāsu būs teksts tagā 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

Izpētījuši kodu, sakiet, kādu izmēru būs teksts tagā 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;
}