CSS-ominaisuuksien periytyminen

Oletetaan, että meillä on kappale, ja siinä on tekstiä tagissa i:

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

Asetetaan kappaleiden väri punaiseksi:

cssp {
  color: red;
}

Lopputuloksessa ei värity vain kappaleen teksti, vaan myös i-tagin teksti:

Kyse on siitä, että color-ominaisuus periytyy. Tämä tarkoittaa, että jos vanhemman tagille on asetettu tietty väri, sama väri tulee olemaan sen lapsilla. Kaikki CSS-ominaisuudet eivät periydy, mutta monet (niistä, jotka tiedät jo - kaikki periytyvät).

Halutessa voidaan kuitenkin ylikirjoittaa vanhemman ominaisuus asettamalla lapsen valitsija. Esimerkiksi asetetaan kappaleelle punainen väri ja kursiiville sininen:

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

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

Результат:

Valitsijoiden järjestyksellä CSS-koodissa ei tässä tapauksessa ole väliä. Jos i-valitsija ja p-valitsija vaihdetaan paikkoja, se toimii edelleen samalla tavalla:

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

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

Результат:

Задание 1

Tutki koodia ja kerro minkä värinen teksti tagissa b tulee olemaan:

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

cssp {
  color: blue;
}

Задание 2

Tutki koodia ja kerro minkä värinen teksti tagissa b tulee olemaan:

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

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

Задание 3

Tutki koodia ja kerro minkä värinen teksti tagissa b tulee olemaan:

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

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

Задание 4

Tutki koodia ja kerro minkä värinen teksti tagissa li tulee olemaan:

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

cssul {
  color: blue;
}

Задание 5

Tutki koodia ja kerro minkä värinen teksti tagissa li tulee olemaan:

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

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

Задание 6

Tutki koodia ja kerro minkä värinen teksti tagissa i tulee olemaan:

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

Tutki koodia ja kerro minkä kokoinen teksti tagissa i tulee olemaan:

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