Arv af CSS egenskaber

Lad os sige, at vi har et afsnit, og i det er der noget tekst i tagget i:

html<p>
  Dette er noget <i>tekst</i> i et afsnit.
</p>

Lad os farve afsnittene i rød:

cssp {
  color: red;
}

Som et resultat vil ikke kun afsnittets tekst blive farvet, men også teksten i tagget i:

Hele pointen er, at egenskaben color arves. Det betyder, at hvis en forældretag har en bestemt farve, så vil dens afkom også have denne farve. Ikke alle CSS-egenskaber arves, men mange gør (af dem, du allerede kender - arves alle).

Ved ønske kan man dog tilsidesætte forælderens egenskab ved at angive en selektor for afkommet. For eksempel, lad os give afsnittet rød farve og kursiv - blå:

html<p>
  Dette er noget <i>tekst</i> i et afsnit.
</p>

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

Результат:

Rækkefølgen af selektorer i CSS-koden har i dette tilfælde ikke nogen betydning. Hvis man ombytter selektoren i og selektoren p, vil det fungere på samme måde:

html<p>
  Dette er noget <i>tekst</i> i et afsnit.
</p>

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

Результат:

Задание 1

Efter at have studeret koden, sig hvilken farve teksten i tagget b vil have:

html<p>
  Dette er noget <b>tekst</b> i et afsnit.
</p>

cssp {
  color: blue;
}

Задание 2

Efter at have studeret koden, sig hvilken farve teksten i tagget b vil have:

html<p>
  Dette er noget <b>tekst</b> i et afsnit.
</p>

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

Задание 3

Efter at have studeret koden, sig hvilken farve teksten i tagget b vil have:

html<p>
  Dette er noget <b>tekst</b> i et afsnit.
</p>

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

Задание 4

Efter at have studeret koden, sig hvilken farve teksten i tagget li vil have:

html<ul>
  <li>tekst</li>
  <li>tekst</li>
  <li>tekst</li>
</ul>

cssul {
  color: blue;
}

Задание 5

Efter at have studeret koden, sig hvilken farve teksten i tagget li vil have:

html<ul>
  <li>tekst</li>
  <li>tekst</li>
  <li>tekst</li>
</ul>

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

Задание 6

Efter at have studeret koden, sig hvilken farve teksten i tagget i vil have:

html<ul>
  <li>tekst <i>kursiv</i> tekst</li>
  <li>tekst <i>kursiv</i> tekst</li>
  <li>tekst <i>kursiv</i> tekst</li>
</ul>

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

Задание 7

Efter at have studeret koden, sig hvilken størrelse teksten i tagget i vil have:

html<ul>
  <li>tekst <i>kursiv</i> tekst</li>
  <li>tekst <i>kursiv</i> tekst</li>
  <li>tekst <i>kursiv</i> tekst</li>
</ul>

cssi {
  font-size: 30px;
}
ul {
  font-size: 20px;
}
li {
  color: red;
  font-weight: bold;
}