[Học CSS] Thẻ div và tạo bố cục trên website

Phạm Văn Siêng 24/09/2019, Cập nhật: 5 năm trước

Bài này thuộc phần 9 của 26 phần trong serie Học CSS cơ bản

Ở phần tìm hiểu về Inline và Block trước thì mình có nhắc qua thẻ

và đây là một thẻ phổ biến rất được sử dụng mà trong serie Học HTML của mình đã không nói đến. Thế thì tại sao mình lại nói đến trong serie Học CSS này?

Bởi vì thẻ

nếu bạn chỉ sử dụng trong HTML không thì có thể bạn sẽ chưa hiểu lắm về vai trò của nó dẫn đến việc hiểu sai, mà khi bạn làm việc với CSS thì đây là thẻ mà bạn có thể sẽ rất thích vì đơn giản là sử dụng quá nhiều. Tại sao được sử dụng nhiều thì đọc hết bài sẽ rõ.

Ý nghĩa của thẻ
?

Thẻ

là gì? Đây là cái thẻ mà nó là chữ viết tắt của division (nghĩa là khu trong tiếng Việt theo từ điển kỹ thuật chung) được sử dụng để tạo ra một khu vực kiểu block nào đó trên một website, hay bạn có thể hiểu là gom nhóm tập hợp các phần tử trên website vào một khu vực với thẻ

Tạo khu vực với thẻ

Ví dụ thường thì một website sẽ có 4 phần chính là header (hiển thị banner, logo), content (hiển thị nội dung), sidebar (cột bên cạnh nội dung) và footer (khu vực chân website). Vậy thì bây giờ mình có thể tạo ra 4 thẻ

với 4 id khác nhau nhằm chia khu vực ra. Trong mỗi khu vực mình có thể thêm nội dung riêng cho nó vào, ví dụ:

Ví dụ về div

Nội dung bài viết ở đây.

Và khi thêm một xíu CSS thì nó sẽ trở thành một bố cục thế này, đừng bận tâm quá về CSS vì mình sẽ hướng dẫn sau:

See the Pen Bygrgx by Thach Pham (@thachpham92) on CodePen.

Vậy đấy, ngắn gọn lại là nếu bạn cần gom nhóm nhiều thành phần trên website vào một khu vực thì có thể sử dụng thẻ

để làm. Mặc dù ở cuối serie này mình sẽ qua một số thẻ HTML5 để tạo bố cục trên website với chức năng y hệt thẻ

nhưng bây giờ bạn cứ dùng thẻ

thôi là được.

Xem tiếp bài trong serie

Phần trước: [Học CSS] Phần tử Block (khối) và Inline (nội dòng)Phần kế tiếp: [Học CSS] Box Model và các thuộc tính

Bài liên quan

[Học CSS] Position và Absolute – Relative
[Học CSS] Thực hành tạo layout đơn giản
[Học CSS] Chia cột với float và clear float
[Học CSS] Tùy biến loại phần tử với “display”
[Học CSS] Box Model và các thuộc tính
[Học CSS] Phần tử Block (khối) và Inline (nội dòng)

Content retrieved from:
https://thachpham.com/web-development/html-css/the-div-va-tao-bo-cuc-tren-website.html.

Phạm Văn Siêng 24/09/2019, Cập nhật: 5 năm trước

Ý KIẾN THÀNH VIÊN

Chưa có bình luận