Home-theater-designers
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.
MAKEUSEOF VÍDEO DEL DÍA
¿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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.inline {
display: inline;
font-size: 3rem;
}
#inline-1 {
background-color: yellow;
padding: 10px 0px 10px 10px;
}
#inline-2 {
background-color: lightgreen;
padding: 10px 10px 10px 0px;
}
</style>
</head>
<body>
<h1>CSS Display Inline</h1>
<div class="inline" id="inline-1">This is text</div>
<div class="inline" id="inline-2">with the inline property value.</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>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.block {
display: block;
font-size: 3rem;
width: fit-content;
}
#block-1 {
background-color: yellow;
padding: 10px 10px 10px 10px;
}
#block-2 {
background-color: lightgreen;
padding: 10px 10px 10px 10px;
}
</style>
</head>
<body>
<h1>CSS Display Block</h1>
<div class="block" id="block-1">This is text</div>
<div class="block" id="block-2">with the block property value.</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>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.inline-block {
display: inline-block;
font-size: 3rem;
width: fit-content;
}
#inline-block-1 {
background-color: yellow;
padding: 10px 10px 10px 10px;
}
#inline-block-2 {
background-color: lightgreen;
padding: 10px 10px 10px 10px;
}
</style>
</head>
<body>
<h1>CSS Display Inline-Block (width set)</h1>
<div class="inline-block" id="inline-block-1">This is text</div>
<div class="inline-block" id="inline-block-2">with the inline-block property
value.</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.
Ocultar elementos del sitio web con visualización CSS: ninguno
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.
no puedo ver archivos de Android en la PC4B8553AF011488B693BBC238B69A5F102CBFFFFAF
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>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.inline-flex {
display: inline-flex;
font-size: 3rem;
width: 49.8%;
}
#inline-flex-1 {
background-color: yellow;
width: 40%;
height: 100px;
}
#inline-flex-2 {
background-color: lightgreen;
width: 25%;
height: 100px;
}
#inline-flex-3 {
background-color: lightblue;
width: 35%;
height: 100px;
}
</style>
</head>
<body>
<h1>CSS Display Inline-Flex</h1>
<div class="inline-flex">
<div id="inline-flex-1"></div>
<div id="inline-flex-2"></div>
<div id="inline-flex-3"></div>
</div>
<div class="inline-flex">
<div id="inline-flex-1"></div>
<div id="inline-flex-2"></div>
<div id="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 elemento HTML
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>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.table {
display: table;
font-size: 3rem;
}
.header {
display: table-header-group;
font-size: 3rem;
}
#column-1 {
display: table-column-group;
background-color: yellow;
}
#column-2 {
display: table-column-group;
background-color: lightgreen;
}
#column-3 {
display: table-column-group;
background-color: lightblue;
}
#row-1 {
display: table-row;
}
#row-2 {
display: table-row;
}
#row-3 {
display: table-row;
}
#cell {
display: table-cell;
padding: 10px;
width: 20%;
}
</style>
</head>
<body>
<h1>CSS Display Table</h1>
<div class="table">
<div id="column-1"></div>
<div id="column-2"></div>
<div id="column-3"></div>
<div class="header">
<div id="cell">Name</div>
<div id="cell">Age</div>
<div id="cell">Country</div>
</div>
<div id="row-1">
<div id="cell">Jeff</div>
<div id="cell">21</div>
<div id="cell">USA</div>
</div>
<div id="row-2">
<div id="cell">Sue</div>
<div id="cell">34</div>
<div id="cell">Spain</div>
</div>
<div id="row-3">
<div id="cell">Boris</div>
<div id="cell">57</div>
<div id="cell">Singapore</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>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.grid {
display: grid;
font-size: 3rem;
grid-template-areas:
'header header header header'
'left-sidebar content content right-sidebar'
'footer footer footer footer';
gap: 10px;
}
#grid-1 {
grid-area: header;
background-color: yellow;
height: 100px;
padding: 20px;
text-align: center;
}
#grid-2 {
grid-area: left-sidebar;
background-color: lightgreen;
height: 200px;
padding: 20px;
text-align: center;
}
#grid-3 {
grid-area: content;
background-color: lightblue;
height: 200px;
padding: 20px;
text-align: center;
}
#grid-4 {
grid-area: right-sidebar;
background-color: lightgreen;
height: 200px;
padding: 20px;
text-align: center;
}
#grid-5 {
grid-area: footer;
background-color: yellow;
height: 100px;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<h1>CSS Display Grid</h1>
<div class="grid">
<div id="grid-1">Header</div>
<div id="grid-2">Left Sidebar</div>
<div id="grid-3">Content</div>
<div id="grid-4">Right Sidebar</div>
<div id="grid-5">Footer</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.