¡Ayuda al desarrollo del sitio, compartiendo el artículo con amigos!
Introducción a la visibilidad en CSS
Visibilidad significa algo que aparece o es capaz de ver. Propiedad de visibilidad utilizada para hacer visible u ocultar el contenido o la imagen de la página. Comprensión clara, debe conocer la diferencia entre la visualización y la propiedad de visualización y la propiedad de visibilidad que pueden ver y bloquear el contenido, pero la diferencia es que la propiedad de visibilidad oculta el contenido sin mover o perturbar el contenido a continuación o su contenido lateral. La propiedad de visualización mueve el contenido hacia arriba o hacia los lados al descuidar el contenido anterior en el lugar.Veremos cómo puede suceder en el siguiente concepto. En este tema, vamos a aprender sobre Visibilidad en CSS.
¿Cómo funcionan las propiedades Visibilidad y Visualización en CSS?
La propiedad de visibilidad puede funcionar con 2 valores
- oculto
- visible
Sintaxis:
Clase1 { visibilidad: oculta; } Class2 { visibilidad : visible; }Explicación:
- Visibilidad: oculto, oculta el contenido sin mover el contenido hacia abajo o al costado de una página.
- Visibilidad: visible, visible el contenido oculto de una página.
Ejemplo:
Clase1 { visibilidad: oculta; visibilidad: visible; }Si está tratando de aplicar ambos valores en una sola clase, la propiedad del segundo valor siempre anula.
La propiedad de visualización puede funcionar con 4 valores
- bloque
- ninguno
- en línea
- bloque en línea
Explicación:
- Display: block, inicia el contenido desde la nueva línea.
- Pantalla: ninguno, descuidar el contenido anterior en este lugar y el contenido se mueve hacia arriba o hacia los lados.
- Display: inline, como una etiqueta de intervalo pero sin cambiar la altura y el ancho.
- Display: inline-block, como una etiqueta de intervalo con cambio de altura y ancho para crear bonitas cajas. Podemos decir que es el reemplazo de la propiedad flotante anterior.
Ejemplos con código:
- Visibilidad: oculto y visualización: bloquear con contenido
- Visibilidad: visible y visualización: ninguna con contenido
Antes de aplicar la salida de propiedades Visibilidad y visualización:
- Visibilidad: oculto y visualización: bloquear con contenido: Ocultar el contenido sin alterar el contenido de abajo o lateral. Puede ver la variación en la salida en comparación con antes de aplicar la visibilidad y las propiedades de visualización como se indica arriba.
Sintaxis:
.hiddenBlock{ pantalla: bloque; visibilidad: oculto; color verde; }Ejemplo:
Código HTML: HiddenBlock.html
Visibilidad y visualización
Desarrollé una aplicación en línea de administración de contenido empresarial utilizando Spring MVC como back-end y JSP, HTML, CSS, JavaScript y Angular JS como front-end.
Cree un usuario con tipo de usuario y tipo de administrador, donde el administrador puede permitir realizar acciones de administración como modificar el tipo de usuario y eliminar los usuarios.
El usuario puede importar una tarea con cualquier documento, se almacena en la base de datos de Oracle, crear una tarea por datos específicos con comentarios para la descripción de la tarea. Asigne la misma tarea a otros usuarios para realizar acciones en ella y también varios usuarios pueden asignar una tarea a la vez.
Código CSS: HiddenBlock.css
.hiddenBlock1{ pantalla: bloque; visibilidad: visible; color: azul } .hiddenBlock2{ pantalla: bloque; visibilidad: oculto; color verde; } .hiddenBlock3{ pantalla: bloque; visibilidad: visible; color marrón; } .cabeza{ color:rojo; margen izquierdo: 30%; }Salida:
- Visibilidad: visible y visualización: ninguno con contenido: Ignora el contenido en el párrafo aplicado y mueve el contenido hacia arriba o hacia los lados. Puede ver la variación en la salida en comparación con antes de aplicar la visibilidad y las propiedades de visualización como se indica arriba.
Sintaxis:
.visibleNone{ mostrar: ninguno; visibilidad: visible; color verde; }Ejemplo:
Código HTML: VisibleNone.html
Visibilidad y visualización
Desarrollé una aplicación en línea de administración de contenido empresarial utilizando Spring MVC como back-end y JSP, HTML, CSS, JavaScript y Angular JS como front-end.
Cree un usuario con tipo de usuario y tipo de administrador, donde el administrador puede permitir realizar acciones de administración como modificar el tipo de usuario y eliminar los usuarios.
El usuario puede importar una tarea con cualquier documento, se almacena en la base de datos de Oracle, crear una tarea por datos específicos con comentarios para la descripción de la tarea. Asigne la misma tarea a otros usuarios para realizar acciones en ella y también varios usuarios pueden asignar una tarea a la vez.
Código CSS: VisibleNone.css
.visibleNone1{ pantalla: bloque; visibilidad: visible; color: azul } .visibleNone2{ pantalla: ninguno; visibilidad: visible; color verde; } .visibleNone3{ pantalla: bloque; visibilidad: visible; color marrón; } .cabeza{ color:rojo; margen izquierdo: 30%; }Salida:
- Puede que nos surja la duda de que haya otra forma de ocultar el contenido sin utilizar la visibilidad: oculto.
- Sí, tenemos tales propiedades para hacer eso.
Otras propiedades para ocultar el contenido sin usar visibilidad: hidden: Son
- Color: RGB(0,0,0,0)
- Opacidad: 0
- Color: rgb(0,0,0,0): Esta propiedad también hace que el contenido sea invisible a simple vista como lo hizo visibilidad: oculto. Pero el contenido todavía existe. Puede ver que la salida a continuación es la misma que la salida de visibilidad .
Sintaxis:
.colorRGB{ color: rgb(0,0,0,0); tamaño de fuente: 25px; }Ejemplo: ColorRGB.html
Visibilidad y visualización
Desarrollé una aplicación en línea de administración de contenido empresarial utilizando Spring MVC como back-end y JSP, HTML, CSS, JavaScript y Angular JS como front-end.
Cree un usuario con tipo de usuario y tipo de administrador, donde el administrador puede permitir realizar acciones de administración como modificar el tipo de usuario y eliminar los usuarios.
El usuario puede importar una tarea con cualquier documento, se almacena en la base de datos de Oracle, crear una tarea por datos específicos con comentarios para la descripción de la tarea. Asigne la misma tarea a otros usuarios para realizar acciones en ella y también varios usuarios pueden asignar una tarea a la vez.
Código CSS: ColorRGB.css
.color1{ pantalla: bloque; visibilidad: visible; color azul; tamaño de fuente: 20px; } .color2{ color: rgb(0,0,0,0); tamaño de fuente: 20px; } .color3{ pantalla: bloque; visibilidad: visible; color marrón; tamaño de fuente: 20px; } .cabeza{ color:rojo; margen izquierdo: 30%; }Salida:
- Opacidad: 0: Esta propiedad también hace que el contenido sea invisible a simple vista como visibilidad: oculto, pero el contenido aún existe. Puede ver que la salida a continuación es la misma que la salida de visibilidad.
Sintaxis:
.opacidad{ opacidad: 0; tamaño de fuente: 25px; }Código HTML: Opacidad.html
Visibilidad y visualización
Desarrollé una aplicación en línea de administración de contenido empresarial utilizando Spring MVC como back-end y JSP, HTML, CSS, JavaScript y Angular JS como front-end.
Cree un usuario con tipo de usuario y tipo de administrador, donde el administrador puede permitir realizar acciones de administración como modificar el tipo de usuario y eliminar los usuarios.
El usuario puede importar una tarea con cualquier documento, se almacena en la base de datos de Oracle, crear una tarea por datos específicos con comentarios para la descripción de la tarea. Asigne la misma tarea a otros usuarios para realizar acciones en ella y también varios usuarios pueden asignar una tarea a la vez.
Código CSS: Opacidad.css
.opacity1{ pantalla: bloque; visibilidad: visible; color azul; tamaño de fuente: 20px; } .opacity2{ opacidad: 0; tamaño de fuente: 20px; } .opacity3{ pantalla: bloque; visibilidad: visible; color marrón; tamaño de fuente: 20px; } .cabeza{ color:rojo; margen izquierdo: 30%; }Salida:
Conclusión
Podemos ocultar el contenido con la propiedad de visibilidad, la propiedad de opacidad y el color: grbproperty. No mueve el contenido hacia arriba o hacia los lados aplicando la propiedad de visibilidad.