Thuộc tính visibility chỉ định một phần tử có hiển thị hay không. Nó có thể nhận các giá trị như visible, hidden hoặc collapse. Khác với display: none, loại bỏ phần tử khỏi bố cục. visibility: hidden ẩn phần tử nhưng vẫn giữ chỗ của nó.
Syntax
visibility: visible|hidden|collapse|initial|inherit;
Property values
- visible: Đây là giá trị mặc định. Phần tử được hiển thị bình thường trên trang web.
- hidden: Phần tử không hiển thị và không chiếm bất kỳ không gian nào trong bố cục. Về cơ bản nó bị loại khỏi chế độ xem.
- collapse: Với các phần tử bảng, giá trị này ẩn hàng hoặc cột. Nó không chiếm không gian trong bố cục, tương tự như hidden. Thường được dùng với hàng hoặc cột trong bảng.
- inherit: Phần tử lấy giá trị thuộc tính từ phần tử cha. Nó kế thừa cài đặt hiển thị từ phần tử chứa.
- initial: Phần tử được đặt về giá trị mặc định của thuộc tính theo định nghĩa CSS. Với visibility, giá trị này thường là visible.
Syntax
visibility:hidden;
Example: Trong ví dụ này, chúng ta dùng CSS để tạo kiểu cho các phần tử. Lớp .geeks đặt visibility: visible;, làm cho đoạn văn hiển thị, còn <h1> có màu xanh lá cây và căn giữa văn bản <body>.
html<!DOCTYPE html>
<html>
<head>
<title>
CSS | visibility Property
</title>
<style>
h1 {
color: green;
}
.geeks {
visibility: visible;
}
body {
text-align: center;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>visibility:visible;</h2>
<p class="geeks">
A computer science portal for geeks
</p>
</body>
</html>
Output:
visibility: hidden
Thuộc tính này ẩn phần tử khỏi trang nhưng vẫn chiếm không gian trong tài liệu.
Syntax:
visibility:hidden;
Example: Trong ví dụ này, ta ẩn phần tử <p> với lớp .geeks dùng visibility: hidden;. Nó làm cho nó không hiển thị trong khi vẫn tạo kiểu <h1> màu xanh lá cây và căn giữa văn bản trong <body>.
html<!DOCTYPE html>
<html>
<head>
<title>
CSS | visibility Property
</title>
<style>
h1 {
color: green;
}
.geeks {
visibility: hidden;
}
body {
text-align: center;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>visibility:hidden;</h2>
<p class="geeks">
A computer science portal for geeks
</p>
</body>
</html>
Output:
visibility:collapse
Thuộc tính này chỉ được dùng cho các phần tử bảng. Nó được dùng để loại bỏ hàng và cột khỏi bảng. Nó không ảnh hưởng đến bố cục của bảng. Không gian của chúng vẫn dành cho nội dung khác.
Note: Thuộc tính này không dùng cho các phần tử khác ngoài phần tử bảng.
Syntax:
visibility:collapse;
Example: Trong ví dụ này, ta đặt visibility: collapse; trên <table> với lớp .geeks để ẩn viền và nội dung. Trang cũng tạo kiểu <h1> màu xanh lá cây và căn chỉnh các phần tử <p> trong <center>.
html<!DOCTYPE html>
<html>
<head>
<title>
CSS visibility Property
</title>
<style>
table.geeks {
visibility: collapse
}
table,
th,
td {
border: 1px solid red;
p {
color: green;
font-size: 25px;
}
</style>
</head>
<body>
<center>
<h1 style="color:green;">
GeeksForGeeks
</h1>
<h2>visibility:collapse;</h2>
<p>geeksforgeeks</p>
<table style="border:1px solid red;"
class="geeks">
<tr>
<th>geeks</th>
<th>for</th>
<th>geeks</th>
</tr>
</table>
<p>A computer science portal for geeks</p>
</center>
</body>
</html>
Output:
Supported browsers: Các trình duyệt được hỗ trợ bởi visibility Property được liệt kê dưới đây: