HTML div žymė žymų grupavimui

Ankstesnėje pamokoje nagrinėjome žymę span, kuri leidžia kaip nors paryškinti teksto dalį. Taip pat yra speciali žymė div, kuri leidžia sugrupuoti kelias žymes, kad vėliau su jomis būtų galima ką nors daryti vienu metu.

Tarkime, pavyzdžiui, naudodami žymes div sugrupuosime pastraipas:

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

Priskirkime elementams iš pirmos grupės raudoną spalvą, o elementams iš antros grupės - žalią:

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

Задание 1

Duotas toks kodas:

html<div>
  <h2>Pavadinimas</h2>
  <p>
    tekstas
  </p>
  <p>
    tekstas
  </p>
</div>
<div>
  <h2>Pavadinimas</h2>
  <p>
    tekstas
  </p>
  <p>
    tekstas
  </p>
  <p>
    tekstas
  </p>
</div>
<div>
  <h2>Pavadinimas</h2>
  <p>
    tekstas
  </p>
  <p>
    tekstas
  </p>
  <p>
    tekstas
  </p>
  <p>
    tekstas
  </p>
</div>

Nudažykite pirmojo divo turinį raudona spalva, antrojo divo turinį - žalia, o trečiojo divo turinį - žydra. Kiekvienam divui priskirkite savo klasę.

Задание 2

Duotas toks kodas:

html<div>
  <h2>Pavadinimas</h2>
  <p>
    tekstas
  </p>
  <p>
    tekstas
  </p>
</div>
<div>
  <h2>Pavadinimas</h2>
  <p>
    tekstas
  </p>
  <p>
    tekstas
  </p>
</div>
<div>
  <h2>Pavadinimas</h2>
  <p>
    tekstas
  </p>
  <p>
    tekstas
  </p>
</div>
<div>
  <h2>Pavadinimas</h2>
  <p>
    tekstas
  </p>
  <p>
    tekstas
  </p>
</div>

Nudažykite pirmojo ir trečiojo divų turinį raudona spalva, antrojo ir ketvirtojo divų turinį - žalia. Tam pirmam ir trečiam divui duokite vieną klasę, o antram ir ketvirtam - kitą klasę.