HTML/CSS | Thuộc tính visibility

Học HTML, CSS từ Zero Tới Hero

• Khái quát thuộc tính visibility
• Các giá trị của visibility
• visibility: visible
• visibility: hidden

Khái quát thuộc tính visibility

Trong CSS, thuộc tính visibility quyết định một phần tử được ẩn hay hiện trên trang web.

Cú pháp:

<style>
.show{
    visibility: visible;
}
</style>

<p>First paragraph</p>
<p class="show">Second paragraph</p>
<p>Third paragraph</p>

First paragraph

Second paragraph

Third paragraph

Các giá trị của visibility

Thuộc tính visibility có 2 giá trị: visible và hidden.

visibility: visible

Thuộc tính visibility có giá trị mặc định là visible. Mặc định, các phần tử đã được hiển thị, nên khi set visibility: visible cũng sẽ không có sự thay đổi nào.

visibility: hidden

Sử dụng visibility: hidden, phần tử sẽ bị ẩn đi khỏi trang web nhưng vẫn chiếm không gian trên trang web. Lúc này, người dùng không thể nhìn thấy và không thể tương tác (click, bôi đen, v.v) được với phần tử nữa.

Ví dụ:

<style>
.hide{
    visibility: hidden;
}
</style>

<p>First paragraph</p>
<p class="hide">Second paragraph</p>
<p>Third paragraph</p>

First paragraph

Second paragraph

Third paragraph

Sẽ có một bài học riêng hướng dẫn phân biệt giữa visibility: hidden, display: none và opacity: 0.

Tóm tắt

• Trong CSS, thuộc tính visibility quyết định một phần tử được ẩn hay hiện trên trang web.
• Thuộc tính visibility có 2 giá trị: giá trị mặc định là visible, giá trị còn lại là hidden.
• Sử dụng visibility: hidden, phần tử sẽ bị ẩn đi khỏi trang web nhưng vẫn chiếm không gian trên trang web.