HTML CĂN BẢN
HTML5
CANVAS
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT

Cách dùng thẻ div trong HTML để tạo các khối giao diện

Trong bài này mình sẽ hướng dẫn cách sử dụng thẻ div và một số thuộc tính CSS liên quan. Qua đó, bạn sẽ biết cách tạo các khối trên giao diện của một trang web.

Thẻ div đóng vai trò rất quan trọng, nó được dùng để tạo vỏ bọc cho một vị trí (block) trên giao diện. Trước đây, khi chưa có các thẻ header, footer, article.. thì lập trình viên sử dụng thẻ div để tạo ra các khối giao diện trên header, footer. Bây giờ thì khác, bạn có thể sử dụng thẻ div hoặc các thẻ mới được bổ sung đó để thay thế.

Nhưng xét cho cùng thì các thẻ mới này cũng không có gì đặc biệt. Bản chất nó cũng giống như thẻ div mà thôi, chỉ là đưa ra một cái tên mới để nhìn vào bổ cục HTML là người ta có thể phán đoán ra vị trí chính xác của nó trên giao diện.

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

1. Tính chất của thẻ div trong HTML

Thẻ div trong HTML là một thẻ bình thường, được hiển thị mặc định ở dạng block. Vì vậy, ta thường sử dụng nó để tạo các block trên giao diện của trang web.

Chiều dài mặc định của thẻ div là 100%, nghĩa là nó kéo dài full từ bên trái sang bên phải, miền được giới hạn bởi khoảng trống mà các thẻ HTML bên ngoài tạo thành. Thẻ div không có một thuộc tính điều chỉnh cách hiển thị nào cả, mà ta phải kết hợp với CSS để thay đổi nếu cần.

Cú pháp thẻ div như sau:

<div>
    ... Nội dung bên trong
</div>

Bạn cũng có thể tạo nhiều thẻ div lồng nhau như sau:

<div>
    <div>
        <div>
            ... Nội dung bên trong
        </div>
    </div>
</div>

Đương nhiên là lạm dụng quá nhiều thẻ HTML trong một giao diện sẽ ảnh hưởng đến tốc độ tải trang, SEO .. và nhiều yếu tố khác. Vì vậy, với những người làm frontend kinh nghiệm thì họ sẽ rất hạn chế sử dụng quá nhiều cấp HTML.

2. Cách tạo một khối div trên giao diện HTML

Để sử dụng thành thạo thì bạn phải biết cách kết hợp với các thuộc tính CSS để tùy chỉnh phần hiển thị mặc định của thẻ div.

Thay đổi background cho thẻ div

Khá đơn giản, ta chỉ cần sử dụng thuộc tính background trong CSS là được.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            div{
                background: yellow;
            }
        </style>
    </head>
    <body>
        <div>
           CHÀO MỪNG BẠN ĐẾN VỚI THẺ DIV
        </div>
    </body>
</html>

Thiết lập chiều cao và chiều rộng cho thẻ div

Sử dụng thuộc tính height width là ta có thể thay đổi được chiều cao và chiều rộng của thẻ div.

Demo RUN
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            div{
                background: yellow;
                height: 300px;
                width: 400px;
            }
        </style>
    </head>
    <body>
        <div>
           CHÀO MỪNG BẠN ĐẾN VỚI THẺ DIV
        </div>
    </body>
</html>

Tạo đường viền cho thẻ div

Để tạo đường viền thì ta sử dụng thuộc tính border trong CSS nhé.

Demo RUN
div{
    background: yellow;
    height: 300px;
    width: 400px;
    border: solid 1px red
}

Thay đổi khoảng trống giữa nội dung và đường viền

Bạn hãy chạy các ví dụ trên thì sẽ thấy nội dung bên trong thẻ div sát đường viền. Bây giờ mình sẽ sử dụng thuộc tính padding trong CSS để tạo ra khoảng không giữa chúng nhé.

Demo RUN
div{
    background: yellow;
    height: 300px;
    width: 400px;
    border: solid 1px red;
    padding: 30px;
}

Thiết lập canh giữa màn hình cho thẻ div

Nếu bạn muốn thẻ div hiển thị canh giữa so với hai bên lề thì hãy sử dụng thuộc tính margin nhé.

Demo RUN
div{
    background: yellow;
    height: 300px;
    width: 400px;
    border: solid 1px red;
    padding: 30px;
    margin: 0px auto;
}

Trong đó 0px là khoảng cách ở phía trên và phía dưới, còn auto là khoảng cách tự động giữa bên trái và bên phải. Vì mình đặt auto nên nó sẽ tự động canh giữa. Hãy chạy ví dụ để xem kết quả nhé.

Đưa về bên trái hoặc bên phải với float

Thuộc tính float trong CSS sẽ giúp ta canh trái hoặc canh phải cho thẻ div đó.

  • float:left => canh trái
  • float:right => canh phải
Canh trái RUN
div{
    background: yellow;
    height: 300px;
    width: 400px;
    border: solid 1px red;
    padding: 30px;
    float:left
}
Canh phải RUN
div{
    background: yellow;
    height: 300px;
    width: 400px;
    border: solid 1px red;
    padding: 30px;
    float:right
}

Quá đơn giản phải không các bạn. Bài này mình chỉ muốn giới thiệu thẻ div và một số thao tác thường sử dụng nhất thôi nhé. Những bài tiếp theo mình sẽ áp dụng nó vào việc xây dựng layout.

Bình luận

Cùng chuyên mục:

Tạo menu một cấp bằng HTML đơn giản

Tạo menu một cấp bằng HTML đơn giản

Để làm menu 1 cấp thì có rất nhiều giải pháp. Bạn có thể sử…

Tạo HTML danh sách bài viết đơn giản

Tạo HTML danh sách bài viết đơn giản

Mục đích mình đưa ra bài tập này là giúp các bạn hiểu được cách…

Tạo bổ cục layout HTML đơn giản

Tạo bổ cục layout HTML đơn giản

Qua bài học này bạn sẽ biết cách tạo một file style riêng để ..

Phân biệt ID và Class trong HTML

Phân biệt ID và Class trong HTML

Mỗi thẻ HTML đều có những thuộc tính riêng và khác nhau. Tuy nhiền ..

Phân biệt thẻ HTML Block và Inline

Phân biệt thẻ HTML Block và Inline

Có bao giờ bạn thắc mắc rằng, tại sao nội dung ...

Thuộc tính style trong HTML

Thuộc tính style trong HTML

Do chúng ta chưa học CSS nên mình sẽ không nói ...

Thẻ title trong HTML

Thẻ title trong HTML

Cách sử dụng thẻ html ...

Thẻ style trong HTML

Thẻ style trong HTML

Style là một thẻ HTML bình thường, nó có công dụng là xác ...

Thẻ base trong HTML

Thẻ base trong HTML

Cách sử dụng thẻ html ...

Thẻ link trong HTML

Thẻ link trong HTML

Cách sử dụng thẻ html ...

Thẻ meta trong HTML

Thẻ meta trong HTML

Cách sử dụng thẻ html ...

Thẻ script trong HTML

Thẻ script trong HTML

Cách sử dụng thẻ html ...

Thẻ noscript trong HTML

Thẻ noscript trong HTML

Cách sử dụng thẻ html ...

Thẻ select trong HTML

Thẻ select trong HTML

Cách sử dụng thẻ html ...

Thẻ input trong HTML

Thẻ input trong HTML

Cách sử dụng thẻ html ...

Thẻ textarea trong HTML

Thẻ textarea trong HTML

Cách sử dụng thẻ html ...

Thẻ button trong HTML

Thẻ button trong HTML

Cách sử dụng thẻ html ...

Thẻ option trong HTML

Thẻ option trong HTML

Cách sử dụng thẻ html ...

Thẻ optgroup trong HTML

Thẻ optgroup trong HTML

Cách sử dụng thẻ html ...

Thẻ fieldset trong HTML

Thẻ fieldset trong HTML

Cách sử dụng thẻ html ...

Top