Tag div untuk Pengelompokan Tag dalam HTML

Dalam pelajaran sebelumnya, kita telah membahas tag span yang membolehkan kita menyerlahkan sebahagian teks. Terdapat juga tag khas div yang membolehkan pengelompokan beberapa tag untuk kemudian melakukan sesuatu secara serentak ke atas mereka.

Sebagai contoh, mari kita kumpulkan perenggan menggunakan tag div:

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

Mari tetapkan warna merah untuk elemen dari kumpulan pertama, dan warna hijau untuk elemen dari kumpulan kedua:

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

Задание 1

Diberi kod berikut:

html<div>
  <h2>Tajuk</h2>
  <p>
    teks
  </p>
  <p>
    teks
  </p>
</div>
<div>
  <h2>Tajuk</h2>
  <p>
    teks
  </p>
  <p>
    teks
  </p>
  <p>
    teks
  </p>
</div>
<div>
  <h2>Tajuk</h2>
  <p>
    teks
  </p>
  <p>
    teks
  </p>
  <p>
    teks
  </p>
  <p>
    teks
  </p>
</div>

Warnakan kandungan div pertama dengan merah, kandungan div kedua - dengan hijau, dan kandungan div ketiga - dengan biru. Tetapkan kelas yang berbeza untuk setiap div.

Задание 2

Diberi kod berikut:

html<div>
  <h2>Tajuk</h2>
  <p>
    teks
  </p>
  <p>
    teks
  </p>
</div>
<div>
  <h2>Tajuk</h2>
  <p>
    teks
  </p>
  <p>
    teks
  </p>
</div>
<div>
  <h2>Tajuk</h2>
  <p>
    teks
  </p>
  <p>
    teks
  </p>
</div>
<div>
  <h2>Tajuk</h2>
  <p>
    teks
  </p>
  <p>
    teks
  </p>
</div>

Warnakan kandungan div pertama dan ketiga dengan merah, kandungan div kedua dan keempat - dengan hijau. Untuk ini, berikan satu kelas untuk div pertama dan ketiga, dan kelas lain untuk div kedua dan keempat.