30 Oct

Span và div trong CSS 5.00/5 (100.00%) 1 vote

Span và div trong CSS

Ở bài trước, chúng ta đã biết cách ứng dụng class và id trong CSS.

Bài hôm nay, chúng ta sẽ cùng nhau tìm hiểu về lợi ích của hai thẻ HTML trong việc viết CSS, đó chính là:

Span và div

  • Nhóm phần tử với thẻ <span>

Thẻ <span> trong HTML thật ra chỉ là một thẻ trung hòa, nó chỉ dùng để “đánh dấu” chứ không hề thêm hay bớt bất cứ thứ gì vào file HTML.

Nhưng nhờ tính chất “đánh dấu” đó làm nó trở thành một công cụ hữu dụng giúp chúng ta dễ dàng dùng CSS để định dạng.

Chúng ta hãy xem ví dụ sau:

Tạo một file spanvadiv.html có nội dung như sau

Yêu cầu ở đây là hai chữ span và div phải được in đậm lên. Đây là lúc chúng ta cần dùng đến thẻ <span>.

File trên được chỉnh sửa như sau:

Khi đó, chúng ta chỉ cần tạo file spanvadiv.css như sau:

Thế là xong!

  • Nhóm khối phần tử với thẻ <div>

Tương tự như thẻ <span>, thẻ <div> trong HTML cũng có mục đích nhóm các phần tử lại để tiện lợi cho việc định dạng CSS.

Điểm khác biệt là <span> dùng để nhóm một khối phần tử còn <div> có thể nhóm một hoặc nhiều khối phần tử.

Chúng ta sẽ sử dụng lại source code của bài class và id để làm ví dụ.

Nội dung như sau:

Và file spanvadiv.css sẽ là:

Thật là đơn giản phải không nào 😀

Như vậy là chúng ta đã biết được cách thức nhóm các phần tử bằng span và div giúp cho việc code CSS dễ dàng hơn nhiều.

Hi vọng mọi người dễ dàng tiếp thu và vận dụng hơn!

Hẹn mọi người ở các bài tiếp theo của series Học CSS này

-NHT-

Các từ khóa liên quan: span và div, span và div trong css, nhóm phần tử bằng span và div

Thông tin
Ngày tháng