Oznaka div za združevanje oznak v HTML

V prejšnji lekciji smo obravnavali oznako span, ki omogoča določeno označevanje delčka besedila. Obstaja tudi posebna oznaka div, ki omogoča združevanje več oznak, da lahko z njimi naredimo nekaj hkrati.

Na primer, z oznakami div združimo odstavke:

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

Elementom iz prve skupine dodelimo rdečo barvo, elementom iz druge skupine - zeleno:

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

Задание 1

Podana je naslednja koda:

html<div>
  <h2>Naslov</h2>
  <p>
    besedilo
  </p>
  <p>
    besedilo
  </p>
</div>
<div>
  <h2>Naslov</h2>
  <p>
    besedilo
  </p>
  <p>
    besedilo
  </p>
  <p>
    besedilo
  </p>
</div>
<div>
  <h2>Naslov</h2>
  <p>
    besedilo
  </p>
  <p>
    besedilo
  </p>
  <p>
    besedilo
  </p>
  <p>
    besedilo
  </p>
</div>

Barvajte vsebino prvega div-ja v rdečo barvo, vsebino drugega div-ja - v zeleno, in vsebino tretjega div-ja - v modro. Vsakemu div-ju dodelite svoj razred.

Задание 2

Podana je naslednja koda:

html<div>
  <h2>Naslov</h2>
  <p>
    besedilo
  </p>
  <p>
    besedilo
  </p>
</div>
<div>
  <h2>Naslov</h2>
  <p>
    besedilo
  </p>
  <p>
    besedilo
  </p>
</div>
<div>
  <h2>Naslov</h2>
  <p>
    besedilo
  </p>
  <p>
    besedilo
  </p>
</div>
<div>
  <h2>Naslov</h2>
  <p>
    besedilo
  </p>
  <p>
    besedilo
  </p>
</div>

Barvajte vsebino prvega in tretjega div-ja v rdečo barvo, vsebino drugega div-ja in četrtega - v zeleno. Za to prvemu in tretjemu div-ju dajte en razred, drugemu in četrtemu - drug razred.