Tag div pro skupinu tagů v HTML

V předchozí lekci jsme probrali tag span, který umožňuje nějak zvýraznit část textu. Existuje také speciální tag div, který umožňuje seskupit několik tagů, aby se s nimi pak dalo najednou něco udělat.

Nechť například pomocí tagů div seskupíme odstavce:

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

Nastavme prvkům z první skupiny červenou barvu, a prvkům z druhé skupiny - zelenou:

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

Задание 1

Je dán následující kód:

html<div>
  <h2>Nadpis</h2>
  <p>
    text
  </p>
  <p>
    text
  </p>
</div>
<div>
  <h2>Nadpis</h2>
  <p>
    text
  </p>
  <p>
    text
  </p>
  <p>
    text
  </p>
</div>
<div>
  <h2>Nadpis</h2>
  <p>
    text
  </p>
  <p>
    text
  </p>
  <p>
    text
  </p>
  <p>
    text
  </p>
</div>

Obarvěte obsah prvního divu na červenou barvu, obsah druhého divu - na zelenou, a obsah třetího divu - na modrou. Nastavte pro to každému divu svou třídu.

Задание 2

Je dán následující kód:

html<div>
  <h2>Nadpis</h2>
  <p>
    text
  </p>
  <p>
    text
  </p>
</div>
<div>
  <h2>Nadpis</h2>
  <p>
    text
  </p>
  <p>
    text
  </p>
</div>
<div>
  <h2>Nadpis</h2>
  <p>
    text
  </p>
  <p>
    text
  </p>
</div>
<div>
  <h2>Nadpis</h2>
  <p>
    text
  </p>
  <p>
    text
  </p>
</div>

Obarvěte obsah prvního a třetího divu na červenou barvu, obsah druhého divu a čtvrtého - na zelenou. Pro to prvnímu a třetímu divu dejte jednu třídu, a druhému a čtvrtému - jinou třídu.