Tagul div pentru grupare de tag-uri în HTML

În lecția precedentă am analizat tagul span, care permite evidențierea unui fragment de text. Există și un tag special div, care permite gruparea mai multor tag-uri pentru a face apoi cu ele ceva simultan.

Să luăm ca exemplu gruparea paragrafelor cu ajutorul tag-urilor div:

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

Să atribuim elementelor din primul grup culoarea roșie, iar elementelor din al doilea grup - verde:

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

Задание 1

Este dat următorul cod:

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

Colorați conținutul primului div în roșu, conținutul celui de-al doilea div - în verde, iar conținutul celui de-al treilea div - în albastru. Atribuiți fiecărui div câte o clasă proprie pentru aceasta.

Задание 2

Este dat următorul cod:

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

Colorați conținutul primului și al treilea div în roșu, conținutul celui de-al doilea și al patrulea div - în verde. Pentru aceasta, primului și celui de-al treilea div dați-le o clasă, iar celui de-al doilea și al patrulea - altă clasă.