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>

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>

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.