Nhóm các phần tử (span và div)
Các phần tử <span> and <div> được sử dụng để nhóm và cấu trúc một tài liệu, chúng thường được sử dụng cùng với các thuộc tính CSS là class và ID
Trong bài này chúng ta cùng xem xét hai phần tử <span> and <div> đóng vai trò quan trọng như thế nào trong việc sử dụng CSS.
Nhóm bằng <span>
Phần tử <span> là một phần tử trung lập, hay nói một cách khác lchúng là một phần tử rỗng, nó chẳng thêm gì vào tài liệu HTML cả. Nhưng đối với CSS, <span> có thể gán các đặc tính vào một đoạn văn bản trên trang web.
Hãy xem đoạn văn bên dưới:
<p>Ngủ sớm sẽ mang lại cho bạn sức khỏe, sự giàu có và minh mẫn.</p>
Giả sử bạn muốn nhấn mạnh những lợi ích của việc đi ngủ sớm trong đoạn văn trên bằng các chữ màu đỏ. Để thực hiện bạn hãy đánh dấu các chữ đó bằng <span>. Sau đó, mỗi phần tử span is bạn hãy thêm vào class, như ví dụ dưới đây
<p>Ngủ sớm sẽ mang lại cho bạn <span class="benefit">sức khỏe</span>, <span class="benefit">sự giàu có</span> và <span class="benefit">minh mẫn</span>.</p>
Định dạng class .benefit như sau:
span.benefit { color:red; }
Xem ví dụ
Dĩ nhiên bạn cũng có thể sử dụng id cho phần tử <span>. Nhưng hãy nhớ lại bài học trước, muốn như vậy bạn phải tạo ra 3 phần tử <span>– với các id khác nhau.
Nhóm bằng <div>
Nếu như <span> chỉ được sử dụng để nhóm từng đoạn trong một khối văn bản, thì <div> dùng để nhóm nhiều đoạn trong một khối.
Hãy xem ví dụ dưới đây:
<div id="democrats"> <li>Franklin D. Roosevelt</li> <li>Harry S. Truman</li> <li>John F. Kennedy</li> <li>Lyndon B. Johnson</li> <li>Jimmy Carter</li> <li>Bill Clinton</li> </div> <div id="republicans"> <li>Dwight D. Eisenhower</li> <li>Richard Nixon</li> <li>Gerald Ford</li> <li>Ronald Reagan</li> <li>George Bush</li> <li>George W. Bush</li> </div>
Và trong CSS ta sẽ định dạng 2 id như sau:
#democrats {
background: blue;
}
#republicans {
background: red;
}
Xem ví dụ
Trong ví dụ trên chúng ta chỉ sử dụng <div> and <span> để gán các đặc tính đơn giản nhừ màu chữ và màu nền. Cả hai phần tử trên còn có khả năng giúp bạn nhiều hơn nữa trong các bài học sau.
Tổng kết
Trong bài 7 và 8 bạn đã học các selectors id and class và các phần tử span và div.
Bạn có thể thêm nhóm hoặc xác định các đoạn văn bản, đây là các bước quan trọng để giúp bạn làm chủ CSS hoàn toàn sau này. Trong bài 9 chúng tôi sẽ giới thiệu với bạn mô hình hộp (box model), đây là một phần không kém quan trọng trong việc dàn các trang web.
