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:
<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 -:
.block1 {
color: red;
}
.block2 {
color: green;
}
Cho đoạn mã sau:
<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.
Cho đoạn mã sau:
<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ư.
