El estilo de la página web requiere mucha más atención que los colores y las fuentes. Incluso los sitios web más simples necesitan reglas de diseño para verse bien, lo que requiere el conocimiento de las propiedades de CSS, como la posición, el flotador y el tema de esta publicación. monitor propiedad.
Si está creando un sitio web desde cero o está aprendiendo programación HTML, estas propiedades son fundamentales. Si bien es fácil improvisar su CSS al principio a medida que avanza, terminará dedicando mucho tiempo a corregir errores de CSS más adelante.
Confía en mí: escribí mucho CSS sin saber exactamente lo que estaba haciendo y aprendí que tenía una mejor comprensión de lo que hacen las reglas de CSS, en lugar de simplemente engañarlas.
Además, incluso si no es un programador novato, tiene un conocimiento básico de las propiedades de CSS como monitor le permitirá realizar pequeños ajustes en la apariencia de su sitio web, si es necesario; no tiene que ponerse en contacto con el desarrollador para que lo haga por usted.
Para ayudarte, esta guía te explicará qué es CSS monitor hace y lo que puede agregar al kit de herramientas CSS. Cubriré los usos más comunes de bienes raíces junto con ejemplos visuales.
¿Qué es la propiedad de visualización CSS?
Cada elemento HTML está representado por un campo que contiene contenido y determina la cantidad de espacio alrededor del contenido. CSS monitor la propiedad especifica cómo se ve este campo en la página web en relación con otros elementos, así como el comportamiento de sus elementos secundarios (es decir, los elementos dentro de él).
Hay dos “niveles” en CSS que puede tomar este campo: bloque y en línea. Nivel de bloque los elementos existen en una línea separada y abarcan todo el ancho de la página, a menos que se especifique un ancho diferente.
Nivel incorporado los elementos no interrumpen el flujo de contenido; puede haber muchos elementos integrados en la misma fila.
los monitor la propiedad se orienta hacia estos niveles y nos permite cambiarlos de acuerdo a nuestras necesidades estilísticas. Y monitor la regla se escribe así:
pantalla: valor;
…dónde valor determina cómo aparece un elemento, en otras palabras, su nivel. Ahora echemos un vistazo a los valores más comunes. monitor propiedad.
Valores de CSS mostrados
De forma predeterminada, los navegadores representan ciertos elementos en diferentes niveles. Por ejemplo,
<body><div id="div-0"> This is my first div.</div>
<div id="div-1"> This is my second div.</div>
<div id="div-2"> This is my third div.</div>
<br>
<span id="span-0">This is my first span.</span>
<span id="span-1">This is my second span.</span>
<span id="span-2">This is my third span.</span>
</body>
<style type="text/css">
body { font-family: "Avenir Heavy"; }
div, span {
background-color: #2e3f50;
padding: 10px;
border-radius: 5px;
}
div { color: #fd8f59; }
span { color: #1ebda5; }
</style>
Aquí están los primeros tres
los monitor la propiedad puede anular estos tipos de visualización predeterminados. Así que tomemos este ejemplo y veamos qué cambia cuando aplicamos diferentes monitor normas.
Pantalla CSS: incorporada
los incorporado El valor mostrado convierte cualquier elemento en un elemento integrado. Estos elementos aparecerán en la misma línea sin espacios como
<body><div id="div-0"> This is my first div.</div>
<div id="div-1"> This is my second div.</div>
<div id="div-2"> This is my third div.</div>
<br>
<span id="span-0">This is my first span.</span>
<span id="span-1">This is my second span.</span>
<span id="span-2">This is my third span.</span>
</body>
<style type="text/css">
body { font-family: "Avenir Heavy"; }
div, span {
background-color: #2e3f50;
border-radius: 5px;
display: inline;
}
div { color: #fd8f59; }
span { color: #1ebda5; }
</style>
Fíjate que eliminé relleno regla para ilustrar mejor el efecto incorporado. Además, el ancho y el alto de los elementos en línea están determinados por el contenido que contienen. No puede establecer su ancho y alto usando CSS:
Si añadimos texto entre los nuestros
Pantalla CSS: bloque
los Unidad el valor de visualización convierte al elemento en un elemento de bloque. Los elementos de bloque comienzan una nueva línea y, de forma predeterminada, abarcan todo el ancho de la ventana gráfica, por ejemplo, cómo
<body><div id="div-0"> This is my first div.</div>
<div id="div-1"> This is my second div.</div>
<div id="div-2"> This is my third div.</div>
<br>
<span id="span-0">This is my first span.</span>
<span id="span-1">This is my second span.</span>
<span id="span-2">This is my third span.</span>
</body>
<style>
body { font-family: "Avenir Heavy"; }
div, span {
background-color: #2e3f50;
padding: 10px;
border-radius: 5px;
display: block;
}
div { color: #fd8f59; }
span { color: #1ebda5; }
</style>
Pantalla CSS: bloque incorporado
los bloque incorporado el valor es un hibrido incorporado y Unidad. Elementos asignados pantalla: bloque en línea aparecen en la misma línea que otros elementos en línea, lo cual es característico de los elementos en línea. Sin embargo, los elementos de bloque en línea también son similares a los elementos de bloque en el sentido de que puede cambiar su ancho y alto usando CSS.
<body><div id="div-0"> This is my first div.</div>
<div id="div-1"> This is my second div.</div>
<div id="div-2"> This is my third div.</div>
<br>
<span id="span-0">This is my first span.</span>
<span id="span-1">This is my second span.</span>
<span id="span-2">This is my third span.</span>
</body>
<style>
body { font-family: "Avenir Heavy"; }
div, span {
background-color: #2e3f50;
padding: 10px;
border-radius: 5px;
display: inline-block;
width: 200px;
height: 50px;
}
div { color: #fd8f59; }
span { color: #1ebda5; }
</style>
Visualización de CSS: elemento de lista
Elementos asignados mostrar: elemento de lista actuar como
<body><div id="div-0"> This is my first div.</div>
<div id="div-1"> This is my second div.</div>
<div id="div-2"> This is my third div.</div>
<br>
<span id="span-0">This is my first span.</span>
<span id="span-1">This is my second span.</span>
<span id="span-2">This is my third span.</span>
</body>
<style>
body { font-family: "Avenir Heavy"; }
div, span {
background-color: #2e3f50;
padding: 10px;
border-radius: 5px;
display: list-item;
margin-left: 30px;
}
div { color: #fd8f59; }
span { color: #1ebda5; }
</style>
Tenga en cuenta que ninguna regla margen izquierdo: 30px; nuestros misiles se caerían del visor. Aumenté el margen izquierdo para hacerlos visibles.
Agregar una regla elemento de estilo de lista: interior; para colocar viñetas dentro de un elemento de lista:
Pantalla CSS: ninguna
no aparece elimina el elemento de destino (y todos sus elementos secundarios) de la página. Esto hace que los elementos complementarios se comporten como si el elemento no existiera. En este ejemplo no aparece se aplica a la segunda
<body><div id="div-0"> This is my first div.</div>
<div id="div-1"> This is my second div.</div>
<div id="div-2"> This is my third div.</div>
<br>
<span id="span-0">This is my first span.</span>
<span id="span-1">This is my second span.</span>
<span id="span-2">This is my third span.</span>
</body>
<style>
body { font-family: "Avenir Heavy"; }
div, span {
background-color: #2e3f50;
padding: 10px;
border-radius: 5px;
}
div { color: #fd8f59; }
span { color: #1ebda5; }
#div-1, #span-1 {
display: none;
}
</style>
Para ocultar un elemento sin afectar el diseño de la página, use CSS visibilidad propiedad en lugar de:
/* display: none; */visibility: hidden;
Pantalla CSS: cuadrícula
los reja El valor mostrado convierte al elemento asignado en un contenedor de cuadrícula y sus elementos secundarios se comportan como elementos de cuadrícula. Aprenda a crear cuadrículas CSS en nuestra guía detallada.
Pantalla CSS: Flexible
Finalmente cable El valor mostrado establece el elemento como un contenedor flexible, otra forma de crear elementos de página dinámicos y receptivos. Obtenga más información sobre este módulo CSS en la publicación del blog Aquí está la diferencia entre Flexbox, CSS Grid y Bootstrap.
Cambie sus diseños usando las propiedades de visualización
los monitor la propiedad le permite definir la apariencia de los elementos de la página además de su configuración predeterminada. Es una característica poderosa, y la mayoría de los sitios web modernos, incluidos los creados con Bootstrap CSS, la utilizan hasta cierto punto. Así que incluso el conocimiento básico sobre monitor puede ayudarnos a comprender lo que sucede detrás de escena en los sitios web. Están sucediendo más cosas de las que la mayoría de la gente cree.
