HTML-də teqləri qruplaşdırmaq üçün div teqi

Əvvəlki dərsdə biz mətnin kiçik bir hissəsini vurğulamağa imkan verən span teqini təhlil etdik. Həmçinin, bir neçə teqi qruplaşdırmağa və sonra hamısına eyni anda bir şey tətbiq etməyə imkan verən xüsusi div teqi də var.

Nümunə olaraq, div teqlərindən istifadə edərək abzasları qruplaşdıraq:

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

Gəlin birinci qrupdakı elementlərə qırmızı rəng, ikinci qrupdakı elementlərə isə yaşıl rəng təyin edək:

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

Задание 1

Aşağıdakı kod verilmişdir:

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>

Birinci div-in məzmununu qırmızı, ikinci div-in məzmununu yaşıl, üçüncü div-in məzmununu isə mavi rəngə boyayın. Bunun üçün hər div-ə öz sinifini təyin edin.

Задание 2

Aşağıdakı kod verilmişdir:

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>

Birinci və üçüncü div-lərin məzmununu qırmızı, ikinci və dördüncü div-lərin məzmununu isə yaşıl rəngə boyayın. Bunun üçün birinci və üçüncü div-lərə bir sinif, ikinci və dördüncü div-lərə isə başqa bir sinif verin.