Урок 56 із 239
23%
← Назад

Тег div для групування елементів у HTML

Дізнаємося, як за допомогою тега div об'єднувати кілька елементів і застосовувати до них спільні CSS-стилі.

Тег div для групування елементів у HTML

У попередньому уроці ми розглянули тег span, який використовується для оформлення невеликих фрагментів тексту. Якщо ж потрібно об'єднати кілька HTML-елементів в одну групу, використовується тег div.

Тег div сам по собі нічого не змінює. Його основне призначення — групувати елементи, щоб потім застосувати до всієї групи однакові CSS-стилі.

Наприклад, згрупуємо кілька абзаців у два блоки:

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

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

Тепер можна застосувати різні стилі до кожної групи:

.block1 {
  color: red;
}

.block2 {
  color: green;
}
❗ Важливо:

Усі елементи всередині div успадкують властивості, які успадковуються (наприклад color), якщо не перевизначити їх окремо.

Практичні завдання

📌 Завдання:
  1. №1
  3. Дано HTML-код:
  5. <div>
  6. <h2>Title</h2>
  7. <p>text</p>
  8. <p>text</p>
  9. </div>
  11. <div>
  12. <h2>Title</h2>
  13. <p>text</p>
  14. <p>text</p>
  15. <p>text</p>
  16. </div>
  18. <div>
  19. <h2>Title</h2>
  20. <p>text</p>
  21. <p>text</p>
  22. <p>text</p>
  23. <p>text</p>
  24. </div>
  26. Пофарбуйте вміст першого div у червоний колір, другого — у зелений, а третього — у синій. Для цього призначте кожному div власний клас.
💡 Показати підказку

Створіть три різні класи, призначте їх тегам div і задайте кожному класу свій колір.

✅ Показати відповідь
HTML:

<div class="red">
  ...
</div>

<div class="green">
  ...
</div>

<div class="blue">
  ...
</div>

CSS:

.red {
  color: red;
}

.green {
  color: green;
}

.blue {
  color: blue;
}
📌 Завдання:
  1. №2
  3. Дано HTML-код:
  5. <div>
  6. <h2>Title</h2>
  7. <p>text</p>
  8. <p>text</p>
  9. </div>
  11. <div>
  12. <h2>Title</h2>
  13. <p>text</p>
  14. <p>text</p>
  15. </div>
  17. <div>
  18. <h2>Title</h2>
  19. <p>text</p>
  20. <p>text</p>
  21. </div>
  23. <div>
  24. <h2>Title</h2>
  25. <p>text</p>
  26. <p>text</p>
  27. </div>
  29. Пофарбуйте вміст першого і третього div у червоний колір, а другого і четвертого — у зелений. Для цього використайте лише два класи.
💡 Показати підказку

Однаковий клас можна призначати будь-якій кількості елементів.

✅ Показати відповідь
HTML:

<div class="red">
  ...
</div>

<div class="green">
  ...
</div>

<div class="red">
  ...
</div>

<div class="green">
  ...
</div>

CSS:

.red {
  color: red;
}

.green {
  color: green;
}