El desarrollo web requiere un amplio conjunto de habilidades, incluido el conocimiento de CSS. El uso de estilos le permite crear dise os atractivos y administrar elementos en una p gina web. Una de estas habilidades es la capacidad de ocultar elementos con CSS.
Ocultar elementos puede ser til, por ejemplo, cuando desea desactivar la visualizaci n de ciertos elementos en dispositivos espec ficos o en una interacci n espec fica del usuario. En este art culo, veremos 5 formas diferentes de ocultar elementos con CSS para ayudarlo a obtener m s control sobre una p gina web.
1. Uso de la propiedad display
La propiedad display nos permite controlar la visualizaci n de un elemento en una p gina web. Podemos usar el valor none para ocultar completamente el elemento, o el valor hidden para ocultar el elemento, pero mantener el espacio que ocupa. Por ejemplo, para ocultar un elemento con el id "myElement", podemos agregar el siguiente c digo a nuestro archivo CSS:
#myElement { display: none; }
Nota: la propiedad display tambi n se puede usar para Mostrar un elemento oculto anterior. Por ejemplo, para volver a Mostrar un elemento con el id "myElement", podemos usar el siguiente c digo:
#myElement { display: block; }
2. Uso de la propiedad visibility
La propiedad visibility tambi n nos permite ocultar elementos, pero a diferencia de la propiedad display, conserva el espacio ocupado por el elemento. Podemos usar el valor hidden para ocultar un elemento, o el valor visible para Mostrar un elemento oculto. Por ejemplo, para ocultar un elemento con la clase "myClass", podemos agregar el siguiente c digo al archivo CSS:
.myClass { visibility: hidden; }
Nota: para Mostrar el elemento oculto de nuevo, podemos usar el siguiente c digo:
.myClass { visibility: visible; }
3. Uso de la propiedad opacity