Hướng dẫn display trong html5

• Trang chủ
• Hướng dẫn học
• Hướng dẫn học CSS
• display

display

Thuộc tính display : Xác định sự hiển thị cho thành phần, chuyển đổi thành phần từ dạng dạng này sang dạng khác.

Thuộc tính display có rất nhiều dạng, trong phạm vi bài học chỉ đề cập đến các dạng thường dùng sau:

• display: block
• display: inline
• display: none

Chuẩn bị

Tạo file HTML và CSS có cấu trúc thư mục và nội dung như sau:

Cấu trúc thư mục

• Html

  • index.html

  • css

    • style.css

Click vào dấu [+] để xem cấu trúc.

HTML viết

Thành phần A.

Thành phần B.

thẻ inline a thẻ inline span

Do Thành phần A và Thành phần B sử dụng thẻ

, nên nó thuộc dạng block.

Do thẻ inline a sử dụng thẻ , thẻ inline span sử dụng thẻ nên nó thuộc dạng inline.

Hiển thị trình duyệt khi chưa có CSS

CSS

Để dễ hình dung thuộc tính display, ta sẽ cho các thành phần định dạng như sau:

* {
    margin: 0;
    padding: 0;
}

p.first {
    background: #f3f3cf;
}

p.second {
    background: #e0e0fc;
}

p.third a {
    background: #befcc9;
}

p.third span {
    background: #fbdefd;
}

Hiển thị trình duyệt khi chưa sử dụng float

Download phần chuẩn bị

Tới đây ta đã xong bước chuẩn bị, bắt đầu thôi.

display: block

Thuộc tính display: block;: hiển thị thành phần thành dạng block.

Ta thêm nội dung display: block; cho Thẻ inline a và thẻ inline span:

* {
    margin: 0;
    padding: 0;
}

p.first {
    background: #f3f3cf;
}

p.second {
    background: #e0e0fc;
}

p.third a {
    background: #befcc9;
    display: block;
}

p.third span {
    background: #fbdefd;
    display: block;
}

Hiển thị trình duyệt khi sử dụng display: block;

Ta thấy hai thành phần Thẻ inline a và thẻ inline span đã trở thành thành phần block.

display: inline

Thuộc tính display: inline;: hiển thị thành phần thành dạng inline.

Ta thêm nội dung display: inline; cho Thành phần A và Thành phần B:

* {
    margin: 0;
    padding: 0;
}

p.first {
    background: #f3f3cf;
    display: inline;
}

p.second {
    background: #e0e0fc;
    display: inline;    
}

p.third a {
    background: #befcc9;
}

p.third span {
    background: #fbdefd;
}

Hiển thị trình duyệt khi sử dụng display: inline;

Ta thấy Thành phần A và Thành phần B đã trở thành thành phần inline.

display: none

Thuộc tính display: none;: không hiển thị thành phần.

Ta thêm nội dung display: none; cho Thành phần B:

* {
    margin: 0;
    padding: 0;
}

p.first {
    background: #f3f3cf;
}

p.second {
    background: #e0e0fc;
    display: none;    
}

p.third a {
    background: #befcc9;
}

p.third span {
    background: #fbdefd;
}

Hiển thị trình duyệt khi sử dụng display: none;

Ta thấy Thành phần B đã không hiển thị.

tag {
    display: giá trị;
}

HỌC WEB CHUẨN : 
Kiến thức nhỏ cho web hiện đại

Reply 9 0 Chia sẻ