- CSS cơ bản
- CSS là gì? Hướng dẫn cách học CSS hiệu quả
- Thẻ DIV trong HTML là gì?
- Tìm hiểu thẻ SPAN trong HTML
- Thuộc tính Float và Clear trong CSS
- Chia cột trong HTML và CSS
- Thiết kế website bằng HTML và CSS đơn giản
- Thuộc tính Display trong CSS [inline block]
- CSS nâng cao
- Thuộc tính Display Flex trong Css
- CSS Grid Layout và cách sử dụng
- @keyframes trong CSS3
- Hiệu ứng Animation trong CSS3
- Thuộc tính Transform trong Css3
- Sử dụng @Media trong CSS để tạo Responsive
- Hướng dẫn sử dụng Before và After trong CSS
- Hiệu ứng Animation trong CSS3
- Home
- Web Development
- HTML & CSS
- Thẻ DIV trong HTML là gì?
Thẻ DIV trong HTML là gì?
Một phần tử quan trọng khi thiết kế bố cục trang web trong HTML là thẻ DIV. Nếu bạn đang tìm hiểu về nó hãy tham khảo bài viết thẻ DIV trong HTML là gì dưới đây.
Thẻ DIV trong HTML là gì?
Thẻ div là phần tử khối, mặc định nó không được định dạng gì cả. Nó dùng để tạo ra một khu vực kiểu block để chứa hoặc gom nhóm các phần tử khác thành một khối.
Một ví dụ đơn giản nhất khi bạn truy cập vào trang web bất kỳ sẽ thấy rằng bố cục thường được chia thành Header, Content, Sidebar và Footer.
Trong Header sẽ có logo, banner, menu
Trong Content sẽ chứa các bài viết
Trong Sidebar là cột bên cạnh nội dung
Footer là chân trang website
Mặc định thẻ DIV sẽ không được định dạng gì khi viết mã HTML. Bạn sẽ thực hành ví dụ sau đây:
Đây là phần Header
Đây là phần Content
Đây là phần Sidebar
Đây là phần Footer
Khi chạy đoạn mã thì bạn sẽ chưa thấy gì phải không nào! Bây giờ thêm mã CSS vào xem kết quả thế nào nhé!
Mã CSS thêm vào cặp thẻ
.header { height: 100px; width: 100%; background: green; } .content { height: 100px; width: 70%; background: blue; float: left; } .sidebar { height: 100px; width: 30%; background: yellow; float: right; } .footer { height: 100px; width: 100%; background: orange; clear: both; }Wow kết quả đã hoàn toàn thay đổi rồi phải không nào!
Kết luận: Như vậy là bạn đã hiểu về thẻ DIV trong HTML rồi đấy. Hiểu đơn giản là nó sẽ dùng để gom nhóm các thành phần khác vào chung 1 khu vực để khi thêm mã CSS vào sẽ dễ dàng hơn.
Đọc thêm: Tìm hiểu thẻ SPAN trong HTML
- Học CSS
- HTML & CSS
Bình luận! Hủy
Xin lưu ý rằng tất cả các bình luận đều được kiểm duyệt theo chính sách bảo mật và tất cả các liên kết đều là nofollow. KHÔNG sử dụng từ khóa trong trường tên. Hãy để lại một cuộc trò chuyện cá nhân và ý nghĩa. *
Bình luận
Tên *
Email *
Trang web
Δ
Đọc thêm
Hiệu ứng Animation trong CSS3
Trong thiết kế giao diện Front-end cho website để đẹp và gây ấn tượng người ta thường sử dụng Animation. Bài viết này giới thiệu về hiệu ứng chuyển động Animation trong CSS3 kết hợp
Thuộc tính Display trong CSS [inline block]
Một trong thuộc tính gây khó khăn cho người mới khi sử dụng CSS đó là Display. Bài viết này sẽ giúp hiểu rõ hơn về thuộc tính Display trong CSS và cách sử dụng
Thuộc tính z-index trong CSS
Trong thiết kế giao diện website thuộc tính z-index cũng được áp dụng. Nhưng để hiểu rõ hơn về z index trong CSS và HTML mời bạn đọc chi tiết bài viết này. Mục Lục
Thuộc tính Position trong CSS sử dụng như thế nào?
Chắc hẳn khi học CSS một trong những thuộc tính khiến người học khó hiểu nhất đó là Position. Bài viết này sẽ giúp bạn hiểu hơn về các thuộc tính Position trong CSS và
Thuộc tính Float và Clear trong CSS
Khi dàn trang cho trang web bằng HTML và CSS bạn sẽ gặp phải một vấn đề đó là các phần tử nằm chồng chéo lên nhau hoặc không theo ý muốn của bạn. Chính
Các thẻ cơ bản trong HTML thường sử dụng
HTML là ngôn ngữ tạo khung xương cho trang web với cú pháp tương đối dễ dàng. Hầu như ai cũng có thể học HTML trong vài ngày nhưng để ứng dụng được cần một