La propiedad visible se usa para especificar si un elemento es visible o no en un documento web, pero los elementos ocultos ocupan espacio en el documento web. Puede establecer la propiedad de visibilidad de un elemento en CSS usando la misma propiedad Visible.
A través de la propiedad de visibilidad, podemos hacer que elementos como imágenes, texto, cuadros, etc. sean visibles a simple vista, o incluso puedes ocultarlos. Para ocultar elementos de la tabla, puede usar el colapso, que encontrará más adelante en este artículo.
Sintaxis:
visibility: visible | hidden | collapse | initial | inherit;
El valor de la propiedad:
- visible: Es el valor por defecto. El elemento es un espectáculo o visible normalmente en el documento web.
- oculto: esta propiedad oculta el elemento de la página pero ocupa espacio en el documento.
- colapsar: esta propiedad solo se usa para los elementos de la tabla para eliminar las filas y columnas de la tabla.
Ejemplo 1: uso de valor de propiedad visible y oculto.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.line1 {
color: green;
/* visible value to make element visible */
visibility: visible;
}
.line2 {
color: green;
/* hidden value to hide elements from user. */
visibility: hidden;
}
</style>
</head>
<body>
<h1>
Given line is <small class="line1">
Welcome to GeeksforGeeks</small> Visible
</h1>
<h1>
Given line is <small class="line2">
Welcome to GeeksforGeeks</small> Hidden
</h1>
</body>
</html>
Producción:
Ejemplo 2: Usar el valor de la propiedad Contraer.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
table.geeks {
/* collapse value to delete row and
column from table */
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 tag to form table --->
<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:
Navegador compatible:
- Google Chrome
- explorador de Internet
- Firefox
- Ópera
- Safari
Publicación traducida automáticamente
Artículo escrito por aksrathod07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA