Tagu div për grupimin e tagjeve në HTML

Në mësimin e mëparshëm shqyrtuam tagun span, i cili lejon të theksohet një pjesë e tekstit. Ekziston gjithashtu një tag i veçantë div, i cili lejon grupimin e disa tagjeve, në mënyrë që më pas të bëhet diçka me të gjitha njëherësh.

Le të përdorim si shembull tagjet div për të grupuar paragrafët:

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

Le t'u caktojmë elementeve nga grupi i parë ngjyrën e kuqe, dhe elementeve nga grupi i dytë - ngjyrën e gjelbër:

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

Задание 1

Është dhënë kodi vijues:

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

Ngjyrosni përmbajtjen e div-it të parë në të kuqe, përmbajtjen e div-it të dytë - në të gjelbër, dhe përmbajtjen e div-it të tretë - në të kaltër. Për këtë, caktoni secilit div klasën e vet.

Задание 2

Është dhënë kodi vijues:

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

Ngjyrosni përmbajtjen e div-it të parë dhe të tretë në të kuqe, përmbajtjen e div-it të dytë dhe të katërt - në të gjelbër. Për këtë, div-it të parë dhe të tretë jepni një klasë, ndërsa div-it të dytë dhe të katërt - një klasë tjetër.