Div-tag til gruppering af tags i HTML

I den forrige lektion gennemgik vi tagget span, som giver mulighed for at fremhæve en lille tekststykke. Der er også et specielt tag div, som giver mulighed for at gruppere flere tags for derefter at gøre noget samtidigt med dem.

Lad os for eksempel ved hjælp af div-tags gruppere afsnit:

html<div class="block1">
  <p>
    tekst
  </p>
  <p>
    tekst
  </p>
</div>
<div class="block2">
  <p>
    tekst
  </p>
  <p>
    tekst
  </p>
</div>

Lad os give elementerne fra den første gruppe rød farve, og elementerne fra den anden gruppe - grøn:

css.block1 {
  color: red;
}
.block2 {
  color: green;
}

Задание 1

Følgende kode er givet:

html<div>
  <h2>Titel</h2>
  <p>
    tekst
  </p>
  <p>
    tekst
  </p>
</div>
<div>
  <h2>Titel</h2>
  <p>
    tekst
  </p>
  <p>
    tekst
  </p>
  <p>
    tekst
  </p>
</div>
<div>
  <h2>Titel</h2>
  <p>
    tekst
  </p>
  <p>
    tekst
  </p>
  <p>
    tekst
  </p>
  <p>
    tekst
  </p>
</div>

Farv indholdet af den første div i rød farve, indholdet af den anden div - i grøn, og indholdet af den tredje div - i blå. Tilføj for hver div sin egen klasse.

Задание 2

Følgende kode er givet:

html<div>
  <h2>Titel</h2>
  <p>
    tekst
  </p>
  <p>
    tekst
  </p>
</div>
<div>
  <h2>Titel</h2>
  <p>
    tekst
  </p>
  <p>
    tekst
  </p>
</div>
<div>
  <h2>Titel</h2>
  <p>
    tekst
  </p>
  <p>
    tekst
  </p>
</div>
<div>
  <h2>Titel</h2>
  <p>
    tekst
  </p>
  <p>
    tekst
  </p>
</div>

Farv indholdet af den første og tredje div i rød farve, indholdet af den anden div og fjerde - i grøn. For at gøre dette, giv den første og tredje div en klasse, og den anden og fjerde - en anden klasse.