Thẻ div để nhóm các thẻ trong HTML

Trong bài học trước, chúng ta đã phân tích thẻ span, cho phép đánh dấu một phần nào đó của văn bản. Ngoài ra còn có một thẻ đặc biệt div, cho phép nhóm nhiều thẻ lại với nhau để sau đó có thể thực hiện điều gì đó đồng thời với chúng.

Ví dụ, chúng ta hãy sử dụng các thẻ div để nhóm các đoạn văn:

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

Hãy đặt màu đỏ cho các phần tử từ nhóm đầu tiên, và màu xanh lá cây cho các phần tử từ nhóm thứ hai -:

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

Задание 1

Cho đoạn mã sau:

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>

Hãy tô màu nội dung của div đầu tiên thành đỏ màu, nội dung của div thứ hai - thành xanh lá cây, và nội dung của div thứ ba - thành xanh da trời. Để làm điều này, hãy đặt cho mỗi div một class riêng.

Задание 2

Cho đoạn mã sau:

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>

Hãy tô màu nội dung của div đầu tiên và div thứ ba thành màu đỏ, nội dung của div thứ hai và div thứ tư - thành màu xanh lá cây. Để làm điều này, hãy đặt một class cho div thứ nhất và div thứ ba, và một class khác cho div thứ hai và div thứ tư.