CSS tulajdonságok öröklése

Tegyük fel, hogy van egy bekezdésünk, és benne valamilyen szöveg a i tagben:

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

Állítsuk a bekezdések színét pirosra:

cssp {
  color: red;
}

Ennek eredményeképpen nem csak a bekezdés szövege, hanem a i tag szövege is pirosra színeződik:

Mindez azon múlik, hogy a color tulajdonság öröklődik. Ez azt jelenti, hogy ha a szülő elemnek meg van adva valamilyen szín, akkor az a szín az utódokra is érvényes lesz. Nem minden CSS tulajdonság örökölődik, de sok (azok közül, amiket már ismersz - mind örökölődik).

Szükség esetén azonban felül lehet írni a szülő tulajdonságát az utód szelektorának megadásával. Például állítsuk a bekezdés színét pirosra, a dőlt betűkét pedig kékre:

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

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

Результат:

Ebben az esetben a szelektorok sorrendje a CSS kódban nem számít. Ha felcseréljük a i és a p szelektort, ugyanúgy fog működni:

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

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

Результат:

Задание 1

A kód tanulmányozása után mondd meg, milyen színű lesz a b tagben lévő szöveg:

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

cssp {
  color: blue;
}

Задание 2

A kód tanulmányozása után mondd meg, milyen színű lesz a b tagben lévő szöveg:

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

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

Задание 3

A kód tanulmányozása után mondd meg, milyen színű lesz a b tagben lévő szöveg:

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

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

Задание 4

A kód tanulmányozása után mondd meg, milyen színű lesz a li tagben lévő szöveg:

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

cssul {
  color: blue;
}

Задание 5

A kód tanulmányozása után mondd meg, milyen színű lesz a li tagben lévő szöveg:

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

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

Задание 6

A kód tanulmányozása után mondd meg, milyen színű lesz a i tagben lévő szöveg:

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

A kód tanulmányozása után mondd meg, mekkora lesz a i tagben lévő szöveg mérete:

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