CSS Visibility – Thuộc tính Visibility trong CSS

CSS Visibility là một thuộc tính được sử dụng để chỉ định xem một phần tử có hiển thị trên trang web hay không. Lưu ý rằng một phần tử ẩn cũng chiếm không gian trên trang. Bằng cách sử dụng thuộc tính display, bạn có thể tạo các phần tử ẩn mà không chiếm không gian trên trang.

Lập Trình Viên mời bạn cùng tham khảo chi tiết nội dung bên dưới. Bài viết này nằm trong chuyên đề hướng dẫn CSS từ cơ bản đến nâng cao tại dự án Phát Triển Website.

CSS Visibility là gì ?

Thuộc tính CSS Visibility là một thuộc tính của CSS được sử dụng để điều khiển việc hiển thị của một phần tử trên trang web. Thuộc tính này có 4 giá trị khác nhau: visible, hidden, collapse và initial.

Khi set giá trị visible, phần tử sẽ hiển thị bình thường trên trang. Khi set giá trị hidden, phần tử sẽ không hiển thị trên trang, nhưng vẫn chiếm không gian trên trang.

Giá trị collapse được áp dụng chỉ cho các phần tử bảng. Nó được sử dụng để loại bỏ một hàng hoặc cột nhất định trong bảng, nhưng không ảnh hưởng đến cấu trúc bảng. Không gian chiếm bởi hàng hoặc cột sẽ có sẵn cho nội dung khác. Nếu collapse được sử dụng trên các phần tử khác, nó render như là “hidden”.

Giá trị initial được sử dụng để đặt lại thuộc tính này về giá trị mặc định. Giá trị inherit được sử dụng để kế thừa thuộc tính này từ phần tử cha.

CSS Visibility là một trong những thuộc tính quan trọng của CSS, do đó được áp dụng rộng rãi trong thiết kế web. Những người muốn điều khiển việc hiển thị của một phần tử trên trang web và tạo ra các phần tử ẩn mà không chiếm không gian trên trang, thường sử dụng thuộc tính này.

Hướng dẫn CSS Visibility

Để sử dụng thuộc tính CSS Visibility, bạn có thể áp dụng những giá trị sau đây vào mã HTML của mình:

visible

visible là giá trị mặc định của thuộc tính CSS Visibility. Nó chỉ định rằng phần tử sẽ được hiển thị bình thường trên trang web.

Ví dụ:

<div style="visibility: visible;">
    Nội dung được hiển thị bình thường
</div>

hidden

hidden giấu đi phần tử theo chúng ta muốn ẩn nó. Tuy nhiên, phần tử sẽ vẫn chiếm không gian trên trang web.

Ví dụ:

<div style="visibility: hidden;">
    Phần tử này đã được ẩn.
</div>

collapse

collapse được sử dụng chỉ cho các phần tử bảng. Nó được sử dụng để loại bỏ một hàng hoặc cột nhất định trong bảng, nhưng không ảnh hưởng đến cấu trúc bảng.

Ví dụ:

<table>
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
    <tr style="visibility: collapse;">
        <td>3</td> </table>

initial

initial được sử dụng để đặt lại thuộc tính này về giá trị mặc định.

Ví dụ:

<div style="visibility: initial;">
Đây là giá trị mặc định của thuộc tính CSS Visibility.
</div>

inherit

inherit được sử dụng để kế thừa thuộc tính này từ phần tử cha.

Ví dụ:

<div style="visibility: inherit;">
Phần tử này sẽ kế thừa giá trị của phần tử cha.
</div>

Ưu và Nhược điểm CSS Visibility

Ưu điểm:

• Cho phép điều khiển việc hiển thị của một phần tử trên trang web.
• Có thể tạo ra các phần tử ẩn mà không chiếm không gian trên trang.

Nhược điểm:

• Không thể sử dụng cho các phần tử được tạo bằng JavaScript.
• Khi sử dụng giá trị hidden, phần tử vẫn chiếm không gian trên trang, do đó có thể làm cho trang web của bạn trở nên rối.

Lời khuyên CSS Visibility

Khi sử dụng thuộc tính CSS Visibility, bạn nên cân nhắc kỹ lưỡng giữa việc ẩn hoặc hiển thị một phần tử trên trang web. Nếu không cẩn thận, việc ẩn một phần tử có thể làm cho trang web của bạn trở nên rối.

Ngoài ra, bạn nên sử dụng thuộc tính này trong tình huống phù hợp và hợp lý. Điều này giúp tránh việc gây khó khăn cho người dùng khi tìm kiếm các thông tin trên trang của bạn.

Ví dụ CSS Visibility

Dưới đây là một số ví dụ về cách sử dụng thuộc tính CSS Visibility:

Ví dụ 1: Sử dụng giá trị hidden

<div style="visibility: hidden;">
Phần tử này đã được ẩn.
</div>

Ví dụ 2: Sử dụng giá trị collapse cho bảng

<table>
<tr>
    <td>1</td>
    <td>2</td>
</tr>
<tr style="visibility: collapse;">
    <td>3</td>
    <td>4</td>
</tr>
</table>

Kết luận

Trong bài viết này, chúng ta đã tìm hiểu về thuộc tính CSS Visibility và cách sử dụng nó để điều khiển việc hiển thị của các phần tử trên trang web. Chúng ta đã biết rằng giá trị visible là giá trị mặc định, hidden ẩn phần tử nhưng vẫn chiếm không gian trên trang, collapse loại bỏ một hàng hoặc cột trong bảng, và initial đặt lại thuộc tính này về giá trị mặc định. Bên cạnh đó, chúng ta cũng đã tìm hiểu về ưu và nhược điểm của thuộc tính này, lời khuyên khi sử dụng, ví dụ và câu hỏi thường gặp liên quan đến thuộc tính CSS Visibility.

Hy vọng bài viết này đã giúp bạn hiểu rõ hơn về thuộc tính CSS Visibility và sử dụng nó một cách hiệu quả trên trang web của bạn. Chúc bạn thành công!