Теги div барои гурӯҳбандии тегҳо дар HTML

Дар дарси гузашта мо теги span-ро баррасӣ кардем, ки имконияти чӣ гуна барчаста кардани порае матнро медиҳад. Инчунин теги махсуси div вуҷуд дорад, ки имконияти гурӯҳбандии чанд тегро медиҳад, то баъд аз он якбора чизе бо онҳо анҷом диҳем.

Бигзор барои намуна бо ёрии тегҳои div мо абзацҳоро гурӯҳбандӣ кунем:

html<div class="block1">
  <p>
    матн
  </p>
  <p>
    матн
  </p>
</div>
<div class="block2">
  <p>
    матн
  </p>
  <p>
    матн
  </p>
</div>

Биёед барои унсурҳои гурӯҳи аввал рангдиҳии сурхро таъин кунем, ва барои унсурҳои гурӯҳи дуюм - сабзро:

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

Задание 1

Коди зерин дода шудааст:

html<div>
  <h2>Унвон</h2>
  <p>
    матн
  </p>
  <p>
    матн
  </p>
</div>
<div>
  <h2>Унвон</h2>
  <p>
    матн
  </p>
  <p>
    матн
  </p>
  <p>
    матн
  </p>
</div>
<div>
  <h2>Унвон</h2>
  <p>
    матн
  </p>
  <p>
    матн
  </p>
  <p>
    матн
  </p>
  <p>
    матн
  </p>
</div>

Мундариҷаи диви аввалро ба сурх ранг кунед, мундариҷаи диви дуюмро - ба сабз, ва мундариҷаи диви сеюмро - ба кабуд. Барои ин ба ҳар див класи худро диҳед.

Задание 2

Коди зерин дода шудааст:

html<div>
  <h2>Унвон</h2>
  <p>
    матн
  </p>
  <p>
    матн
  </p>
</div>
<div>
  <h2>Унвон</h2>
  <p>
    матн
  </p>
  <p>
    матн
  </p>
</div>
<div>
  <h2>Унвон</h2>
  <p>
    матн
  </p>
  <p>
    матн
  </p>
</div>
<div>
  <h2>Унвон</h2>
  <p>
    матн
  </p>
  <p>
    матн
  </p>
</div>

Мундариҷаи диви аввал ва сеюмро ба сурх ранг кунед, мундариҷаи диви дуюм ва чаҳорумро - ба сабз. Барои ин ба диви аввал ва сеюм як класс, ва ба диви дуюм ва чаҳорум - дигари классро диҳед.