La propiedad de visualización CSS es una herramienta poderosa para los diseñadores web. Le permite controlar los diseños de los elementos del sitio web con un estilo mínimo, con valores simples que son fáciles de recordar.
Pero, ¿qué hace cada uno de estos valores y cómo funcionan? Vamos a averiguar.
¿Qué es la propiedad de visualización CSS?
La propiedad de visualización especifica el tipo de representación de cuadro que se usa para los elementos HTML en una página web. Esto da como resultado una variedad de comportamientos, incluido no presentarse en absoluto. Puede editar estos valores en su sitio web a través de la hoja de estilo o las secciones de personalización de CSS correspondientes en Herramientas CMS como WordPress.
Mantenga los elementos en línea con la pantalla CSS: en línea
Los valores de ancho y alto no se aplican a un elemento con visualización en línea; el contenido interior establece sus dimensiones. Los elementos HTML en línea pueden ubicarse uno al lado del otro con otros elementos, comportándose como un. La pantalla en línea se usa más comúnmente para texto.
<!DOCTYPE html>
<idioma html="es">
<cabeza>
<juego de caracteres meta="utf-8">
<título>Valores de visualización de CSS</title>
<estilo>
.en línea {
pantalla: en línea;
tamaño de fuente: 3rem;
}
#en línea-1 {
color de fondo: amarillo;
relleno: 10px 0px 10px 10px;
}
#en línea-2 {
color de fondo: verde claro;
relleno: 10px 10px 10px 0px;
}
</style>
</head>
<cuerpo>
<h1>Visualización de CSS en línea</h1>
<clase div="en línea" identificación ="en línea-1">esto es texto</div>
<clase div="en línea" identificación ="en línea-2">con el valor de la propiedad en línea.</div>
</body>
</html>
Este marcado HTML y CSS anteriores sirven como un buen ejemplo del valor de visualización en línea. Cuando se usan juntos, esto mostrará una sola línea de texto hecha con dos elementos HTML diferentes.
Controle los diseños del sitio web con visualización CSS: bloque
De alguna manera, el valor del bloque de visualización es lo opuesto al valor en línea. Se pueden configurar las dimensiones de alto y ancho, y los elementos con este valor no pueden sentarse uno al lado del otro. El ejemplo anterior muestra dos elementos con el valor de bloque. Los elementos con el valor de visualización de bloque predeterminado en el ancho máximo de su elemento principal.
<!DOCTYPE html>
<idioma html="es">
<cabeza>
<juego de caracteres meta="utf-8">
<título>Valores de visualización de CSS</title>
<estilo>
.bloquear {
bloqueo de pantalla;
tamaño de fuente: 3rem;
ancho: ajuste-contenido;
}
#bloque-1 {
color de fondo: amarillo;
relleno: 10px 10px 10px 10px;
}
#bloque-2 {
color de fondo: verde claro;
relleno: 10px 10px 10px 10px;
}
</style>
</head>
<cuerpo>
<h1>Bloque de visualización CSS</h1>
<clase div="bloquear" identificación ="bloque-1">esto es texto</div>
<clase div="bloquear" identificación ="bloque-2">con el valor de la propiedad del bloque.</div>
</body>
</html>A diferencia del ejemplo de estilo en línea, este ejemplo de valor de bloque de visualización divide las líneas de texto en dos líneas diferentes. El valor de ajuste de ancho de contenido establece el ancho de los elementos para que coincida con la longitud del texto.
Elementos HTML uno al lado del otro con visualización CSS: bloque en línea
El valor de bloque en línea de visualización de CSS funciona como un valor en línea normal, solo que con la capacidad de agregar dimensiones específicas. Esto hace posible crear diseños en forma de cuadrícula sin tener elementos principales en su lugar. Volviendo al ejemplo anterior, agregar el valor de bloque en línea permite que los elementos se coloquen uno al lado del otro.
<!DOCTYPE html>
<idioma html="es">
<cabeza>
<juego de caracteres meta="utf-8">
<título>Valores de visualización de CSS</title>
<estilo>
.bloque en línea {
pantalla: bloque en línea;
tamaño de fuente: 3rem;
ancho: ajuste-contenido;
}
#bloque-en-linea-1 {
color de fondo: amarillo;
relleno: 10px 10px 10px 10px;
}
#bloque-en-linea-2 {
color de fondo: verde claro;
relleno: 10px 10px 10px 10px;
}
</style>
</head>
<cuerpo>
<h1>CSS Display Inline-Block (conjunto de ancho)</h1>
<clase div="bloque en línea" identificación ="inline-block-1">esto es texto</div>
<clase div="bloque en línea" identificación ="inline-block-2">con la propiedad de bloque en línea
valor.</div>
</body>
</html>
El valor del bloque en línea no parece muy diferente del valor en línea. Sin embargo, es importante tener en cuenta que puede establecer las dimensiones de los elementos con este valor, lo que facilita el trabajo en ciertos casos.
El valor de visualización más simple es “ninguno”. Este valor oculta el elemento y los elementos secundarios, junto con los márgenes y otras propiedades de espaciado. Los elementos con el valor CSS display none siguen estando visibles en los inspectores del navegador.
Cree elementos flexibles y receptivos con visualización CSS: flex
Display flex es uno de los modos de diseño CSS más nuevos. Cuando display flex está en un elemento principal, todos los elementos dentro de él se convierten en elementos CSS flexibles. El elemento principal en esta configuración es un flexbox.
Flexboxes crea diseños receptivos con variables predefinidas, como ancho y alto. Merece la pena aprendiendo sobre flexboxes HTML/CSS antes de empezar.
<!DOCTYPE html>
<idioma html="es">
<cabeza>
<juego de caracteres meta="utf-8">
<título>Valores de visualización de CSS</title>
<estilo>
.flexionar {
pantalla: flexible;
tamaño de fuente: 3rem;
}
#flex-1 {
color de fondo: amarillo;
ancho: 40%;
altura: 100px;
}
#flex-2 {
color de fondo: verde claro;
ancho: 25%;
altura: 100px;
}
#flex-3 {
color de fondo: azul claro;
ancho: 35%;
altura: 100px;
}
</style>
</head>
<cuerpo>
<h1>Flexión de pantalla CSS</h1>
<clase div="flexionar">
<ID de división ="flex-1"></div>
<ID de división ="flex-2"></div>
<ID de división ="flex-3"></div>
</div>
</body>
</html>Coloque Flexboxes uno al lado del otro Con pantalla: inline-flex
Inline-flex se comporta como un flexbox regular, con el beneficio adicional de que el elemento puede colocarse junto a otros elementos.
<!DOCTYPE html>
<idioma html="es">
<cabeza>
<juego de caracteres meta="utf-8">
<título>Valores de visualización de CSS</title>
<estilo>
.inline-flex {
pantalla: en línea-flexible;
tamaño de fuente: 3rem;
ancho: 49.8%;
}
#inline-flex-1 {
color de fondo: amarillo;
ancho: 40%;
altura: 100px;
}
#inline-flex-2 {
color de fondo: verde claro;
ancho: 25%;
altura: 100px;
}
#inline-flex-3 {
color de fondo: azul claro;
ancho: 35%;
altura: 100px;
}
</style>
</head>
<cuerpo>
<h1>Pantalla CSS Flex en línea</h1>
<clase div="en línea-flex">
<ID de división ="inline-flex-1"></div>
<ID de división ="inline-flex-2"></div>
<ID de división ="inline-flex-3"></div>
</div>
<clase div="en línea-flex">
<ID de división ="inline-flex-1"></div>
<ID de división ="inline-flex-2"></div>
<ID de división ="inline-flex-3"></div>
</div>
</body>
</html>Crear tablas complejas con pantalla CSS: tabla
El valor de la tabla de visualización recuerda a los viejos tiempos del diseño de sitios web. Si bien la mayoría de los sitios web no usan tablas para sus diseños hoy en día, aún son válidos para mostrar datos y contenido en un formato legible.
Agregar el valor de la tabla a un elemento HTML hará que actúe como un elemento de tabla, pero necesita valores adicionales para que su tabla funcione correctamente.
Pantalla CSS: tabla-celda
Los elementos con el valor de celda de tabla actúan como celdas individuales dentro de la tabla principal. Y los valores de tabla-columna y tabla-fila agrupan estas celdas individuales juntas.
Pantalla CSS: tabla-fila
El valor de la fila de la tabla funciona como un
Pantalla CSS: tabla-columna
El valor de la columna de la tabla funciona de manera similar al valor de la fila de la tabla, solo que no divide la tabla. En su lugar, puede usar este valor para agregar reglas CSS específicas a las diferentes columnas que ya existen.
<!DOCTYPE html>
<idioma html="es">
<cabeza>
<juego de caracteres meta="utf-8">
<título>Valores de visualización de CSS</title>
<estilo>
.mesa {
pantalla: mesa;
tamaño de fuente: 3rem;
}
.encabezamiento {
mostrar: tabla-encabezado-grupo;
tamaño de fuente: 3rem;
}
#columna-1 {
display: tabla-columna-grupo;
color de fondo: amarillo;
}
#columna-2 {
display: tabla-columna-grupo;
color de fondo: verde claro;
}
#columna-3 {
display: tabla-columna-grupo;
color de fondo: azul claro;
}
#fila-1 {
pantalla: tabla-fila;
}
#fila-2 {
pantalla: tabla-fila;
}
#fila-3 {
pantalla: tabla-fila;
}
#célula {
pantalla: tabla-celda;
relleno: 10px;
ancho: 20%;
}
</style>
</head>
<cuerpo>
<h1>Tabla de visualización de CSS</h1>
<clase div="mesa">
<ID de división ="columna-1"></div>
<ID de división ="columna-2"></div>
<ID de división ="columna-3"></div>
<clase div="encabezamiento">
<ID de división ="célula">Nombre</div>
<ID de división ="célula">Años</div>
<ID de división ="célula">País</div>
</div>
<ID de división ="fila-1">
<ID de división ="célula">jeff</div>
<ID de división ="célula">21</div>
<ID de división ="célula">EE.UU</div>
</div>
<ID de división ="fila-2">
<ID de división ="célula">demandar</div>
<ID de división ="célula">34</div>
<ID de división ="célula">España</div>
</div>
<ID de división ="fila-3">
<ID de división ="célula">boris</div>
<ID de división ="célula">57</div>
<ID de división ="célula">Singapur</div>
</div>
</div>
</body>
</html>Cree tablas una al lado de la otra con visualización CSS: tabla en línea
Al igual que las otras variantes en línea que ya hemos visto, la tabla en línea permite colocar elementos de tabla junto a otros elementos.
Cree diseños de sitios web receptivos con visualización CSS: cuadrícula
El valor de la cuadrícula de visualización de CSS es similar al valor de la tabla, solo las columnas y filas de una cuadrícula pueden tener un tamaño flexible. Esto hace que las cuadrículas sean ideales para crear el diseño principal de las páginas web. Dejan espacio para encabezados y pies de página de ancho completo y, al mismo tiempo, permiten tener áreas de contenido de diferentes tamaños.
<!DOCTYPE html>
<idioma html="es">
<cabeza>
<juego de caracteres meta="utf-8">
<título>Valores de visualización de CSS</title>
<estilo>
.cuadrícula {
pantalla: rejilla;
tamaño de fuente: 3rem;
cuadrícula-plantilla-áreas:
'encabezado encabezado encabezado encabezado'
'contenido de la barra lateral izquierda contenido de la barra lateral derecha'
'pie de página pie de página pie de página pie de página';
espacio: 10px;
}
#cuadrícula-1 {
área de cuadrícula: encabezado;
color de fondo: amarillo;
altura: 100px;
relleno: 20px;
alineación de texto: centro;
}
#cuadrícula 2 {
área de cuadrícula: barra lateral izquierda;
color de fondo: verde claro;
altura: 200px;
relleno: 20px;
alineación de texto: centro;
}
#cuadrícula-3 {
área de cuadrícula: contenido;
color de fondo: azul claro;
altura: 200px;
relleno: 20px;
alineación de texto: centro;
}
#cuadrícula-4 {
área de cuadrícula: barra lateral derecha;
color de fondo: verde claro;
altura: 200px;
relleno: 20px;
alineación de texto: centro;
}
#cuadrícula-5 {
área de cuadrícula: pie de página;
color de fondo: amarillo;
altura: 100px;
relleno: 20px;
alineación de texto: centro;
}
</style>
</head>
<cuerpo>
<h1>Cuadrícula de visualización CSS</h1>
<clase div="cuadrícula">
<ID de división ="cuadrícula-1">Encabezamiento</div>
<ID de división ="cuadrícula 2">Barra lateral izquierda</div>
<ID de división ="rejilla-3">Contenido</div>
<ID de división ="cuadrícula-4">Barra lateral derecha</div>
<ID de división ="grilla-5">Pie de página</div>
</div>
</body>
</html>
Las cuadrículas son similares a las cajas flexibles, solo que pueden colocar elementos debajo y uno al lado del otro. La propiedad grid-template-areas es vital para esto. Como puede ver en el código, nuestro encabezado y pie de página ocupan cuatro espacios en la matriz, ya que son de ancho completo. Las barras laterales ocupan un espacio cada una, mientras que el contenido ocupa dos, dividiendo efectivamente la fila central de la cuadrícula en tres columnas.
Pantalla CSS: cuadrícula en línea
El uso del valor de cuadrícula en línea permitirá que su cuadrícula se asiente junto a otros elementos, al igual que los otros valores en línea de esta guía.
Uso de visualización CSS para diseño web
La propiedad de visualización CSS ofrece una forma práctica de ajustar las estructuras de los elementos del sitio web sin tener que cambiar el marcado HTML. Esto es ideal para aquellos que usan plataformas de entrega de contenido como Shopify o WordPress, pero también puede ser útil para el diseño web en general.