CSS - Hiển thị: Làm cho các phần tử xuất hiện và biến mất
Xin chào các bạn đang học lập trình web! Hôm nay, chúng ta sẽ cùng khám phá thế giới kỳ diệu của CSS visibility. Là người dạy máy tính gần gũi của bạn, tôi rất vui được hướng dẫn các bạn trong hành trình này. Cuối cùng của bài hướng dẫn này, bạn sẽ có thể làm cho các phần tử biến mất và xuất hiện như một pháp sư CSS thực thụ!
CSS Visibility là gì?
Trước khi chúng ta bắt đầu挥舞 wand CSS của mình, hãy hiểu rõ visibility là gì. Nói một cách đơn giản, CSS visibility kiểm soát việc một phần tử có hiển thị hay ẩn trên trang web. Đó giống như đang chơi hide and seek với các phần tử HTML của bạn!
Các giá trị có thể sử dụng
Hãy cùng xem xét các giá trị khác nhau mà chúng ta có thể sử dụng với thuộc tính visibility:
| Giá trị | Mô tả |
|---|---|
| visible | Phần tử hiển thị (đây là mặc định) |
| hidden | Phần tử ẩn, nhưng vẫn chiếm không gian |
| collapse | Được sử dụng chủ yếu cho các phần tử bảng, chúng ta sẽ xem xét này! |
| inherit | Kế thừa tính hiển thị từ phần tử cha |
Áp dụng cho
Thuộc tính visibility có thể được áp dụng cho tất cả các phần tử HTML. Đúng vậy, bạn đã nghe đúng - tất cả! Từ div đến paragraph, hình ảnh đến bảng, bạn gọi tên nó, và visibility sẽ thực hiện phép thuật của mình.
Cú pháp DOM
Bây giờ, hãy xem cách chúng ta có thể sử dụng visibility trong CSS:
element {
visibility: value;
}Đơn giản phải không? Thay thế 'element' bằng phần tử HTML bạn muốn nhắm đến, và 'value' bằng một trong các giá trị visibility mà chúng ta đã thảo luận trước đó.
CSS visibility - giá trị 'visible'
Hãy bắt đầu với giá trị mặc định, 'visible'. Dưới đây là một ví dụ:
<div class="visible-box">Bạn có thấy tôi không?</div>
<style>
.visible-box {
width: 200px;
height: 100px;
background-color: lightblue;
visibility: visible;
}
</style>Trong ví dụ này, chúng ta đã tạo một hộp có màu xanh lam nhạt với văn bản "Bạn có thấy tôi không?". Tính hiển thị được đặt là 'visible', có nghĩa là... bạn đoán đúng rồi, hộp sẽ hiển thị! Đây là hành vi mặc định, vì vậy ngay cả khi chúng ta không chỉ định tính hiển thị, kết quả sẽ vẫn như vậy.
CSS visibility - giá trị 'hidden'
Bây giờ, hãy làm cho mọi thứ biến mất! Dưới đây là cách chúng ta sử dụng giá trị 'hidden':
<div class="hidden-box">Bây giờ bạn thấy tôi...</div>
<div class="visible-box">Bây giờ bạn không thấy tôi!</div>
<style>
.hidden-box {
width: 200px;
height: 100px;
background-color: lightpink;
visibility: hidden;
}
.visible-box {
width: 200px;
height: 100px;
background-color: lightgreen;
}
</style>Trong ví dụ này, chúng ta có hai hộp. Hộp đầu tiên được đặt là 'hidden', vì vậy nó sẽ không hiển thị trên trang. Tuy nhiên - và điều này rất quan trọng - nó vẫn chiếm không gian! Hộp thứ hai sẽ xuất hiện ngay sau không gian vô hình của hộp đầu tiên.
Điều này khác với display: none, amely loại bỏ phần tử khỏi bố cục hoàn toàn. Hãy nghĩ của 'hidden' như một chiếc áo choàng vô hình - phần tử vẫn ở đó, bạn chỉ không thể thấy nó!
CSS visibility - giá trị 'collapse'
Giá trị 'collapse' là một chút đặc biệt. Nó chủ yếu được sử dụng cho các phần tử bảng. Hãy cùng xem nó trong hành động:
<table>
<tr>
<td>Tôi可见!</td>
<td class="collapsed">Tôi đã bị gộp!</td>
<td>Tôi cũng可见!</td>
</tr>
</table>
<style>
table {
border-collapse: collapse;
}
td {
border: 1px solid black;
padding: 5px;
}
.collapsed {
visibility: collapse;
}
</style>Trong ví dụ này, ô giữa của hàng bảng của chúng ta được đặt là 'collapse'. Điều này có nghĩa là nó sẽ bị ẩn, và không gian mà nó sẽ chiếm sẽ được lấp đầy bởi các ô xung quanh. Đó như thể ô đó không tồn tại!
CSS visibility - Gộp trên các phần tử không phải bảng
Bây giờ, bạn có thể tự hỏi, "Nếu tôi sử dụng 'collapse' trên một phần tử không phải bảng,会发生什么?" Good question! Hành vi có thể thay đổi giữa các trình duyệt, nhưng nhìn chung, nó sẽ hoạt động tương tự như 'hidden'. Hãy thử nó:
<div class="normal">Tôi là một div bình thường</div>
<div class="collapsed">Tôi là một div đã bị gộp</div>
<div class="normal">Tôi là một div bình thường khác</div>
<style>
.normal {
background-color: lightyellow;
margin: 5px;
padding: 5px;
}
.collapsed {
background-color: lightcoral;
margin: 5px;
padding: 5px;
visibility: collapse;
}
</style>Trong hầu hết các trình duyệt, div 'collapsed' sẽ hành xử như thể nó có visibility: hidden. Nó sẽ không hiển thị, nhưng vẫn chiếm không gian.
CSS visibility - Hiệu ứng chuyển đổi
Đây là phần thú vị! Chúng ta có thể sử dụng CSS transitions để tạo ra các hiệu ứng hiển thị mượt mà. Hãy xem thử:
<div class="magic-box">Di chuột qua tôi!</div>
<style>
.magic-box {
width: 200px;
height: 100px;
background-color: lavender;
visibility: visible;
opacity: 1;
transition: opacity 0.5s, visibility 0.5s;
}
.magic-box:hover {
visibility: hidden;
opacity: 0;
}
</style>Trong ví dụ này, khi bạn di chuột qua hộp, nó sẽ mờ dần và biến mất. Khi bạn di chuột ra, nó sẽ mờ dần trở lại. Chúng ta đã kết hợp visibility với opacity để tạo ra hiệu ứng này. Đ Cooler, phải không?
Và thế là bạn đã học được tất tần tật về CSS visibility. Nhớ rằng, với quyền lực lớn comes great responsibility. Sử dụng kỹ năng visibility mới của bạn một cách khôn ngoan, và trang web của bạn sẽ cảm ơn bạn!
Trước khi chúng ta kết thúc, đây là một câu đùa nhỏ cho bạn: Tại sao phần tử CSS lại đi trị liệu? Nó có quá nhiều vấn đề ẩn! ?
Chúc các bạn lập trình vui vẻ, và hy vọng các phần tử của bạn luôn hiển thị khi bạn muốn!
Credits: Image by storyset