Bài 11 HTML - 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.

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>

... Nội dung bên trong

</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 và width là ta có thể thay đổi được chiều cao và chiều rộng của thẻ div.

<!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é.

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é.

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é.

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

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

Canh phải

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.