CSS | Propiedad de visibilidad

Esta propiedad se utiliza para especificar si un elemento es visible o no en un documento web pero los elementos ocultos ocupan espacio en el documento web. Use la propiedad de visualización para eliminar o la propiedad de visualización para ocultar y eliminar un elemento del navegador.

Sintaxis:

visibility: visible|hidden|collapse|initial|inherit;

Valores de propiedad:

visible: Es el valor por defecto. El elemento se muestra o se ve normalmente en el documento web.

Sintaxis:

visibility:hidden;

Ejemplo:

<!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>                                

Producción:

oculto: esta propiedad oculta el elemento de la página pero ocupa espacio en el documento.

Sintaxis:

visibility:hidden;

Ejemplo:

<!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>                    

Producción:

colapso: esta propiedad solo se usa para los elementos de la tabla. Se utiliza para eliminar filas y columnas de la tabla, pero no afecta el diseño de la tabla. Pero su espacio está disponible para otros contenidos.
Nota : esta propiedad no se usa para otros elementos, excepto para los elementos de tabla.

Sintaxis:

visibility:collapse;

Ejemplo:

<!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>                    

Producción:

Navegadores compatibles: los navegadores compatibles con la propiedad de visibilidad se enumeran a continuación:

Google Chrome
explorador de Internet
Firefox
Ópera
Safari

Publicación traducida automáticamente

Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta