homefinance blog
Al ejecutar su propio sitio web de WordPress, es natural querer obtener más control sobre su diseño y funcionalidad. Una de las mejores maneras de traer cambios radicales al aspecto de un sitio es CSS. Con las competencias en CSS, puede cambiar cualquier cosa, desde el color hasta el color hasta las fuentes y las imágenes de fondo. Uno de los conceptos más básicos para aprender para esto es el modelo de la caja CSS. Es un principio fundamental del diseño web. Su comprensión le permite personalizar casi sin cesar el aspecto de su sitio. Según su deseo en esta publicación para principiantes, explicaremos cuál es el modelo de caja CSS y cómo funciona. Primero lo analizaremos teóricamente y luego trabajaremos a través de una serie de ejemplos prácticos para que sea aún más claro.
Así que viste tu sombrero de diseñador web y vamos. El modelo de caja CSS, como funciona como primer paso, se profundizará en la idea detrás del modelo CSS Box. Cajas: ¡cajas en todas partes! Lo primero que debe comprender para usar CSS de manera efectiva es que todo lo que ve en una página web está compuesta por rectángulos. Cualquier sitio web que vea no es más que cajas rectangulares dispuestas junto a, arriba, debajo y vestidas entre sí. ¿Encabezamiento? Ángulo recto. La barra lateral? Ángulo recto. Imagen presentada? Además, un rectángulo. Por supuesto, generalmente no los llamamos rectángulos, sino elementos HTML. Y hay diferentes tipos de estos.
Elementos HTML de bloque vs en línea viene en dos variantes diferentes: elementos en línea y de bloque. Tienen algunas diferencias sorprendentes que tienen un impacto en el uso de la caja CSS. Una de las principales características de los elementos de bloque es que ocupa todo el espacio del contenedor en el que se colocan. Si no se indica lo contrario (es decir, a través de CSS), se extenderán para ocupar tanto espacio como esté disponible, moviendo cualquier otro elemento debajo. sus. Este blockquote es un ejemplo para un elemento de bloque. Hemos agregado un color de fondo para que pueda ver que se extiende por toda la pantalla y no solo en el área donde aparece el texto. Además, los elementos de bloques pueden contener otros bloques o en línea y automáticamente ajustará su altura para que coincida con su contenido. Los ejemplos entre ellos son las etiquetas de los títulos, las cajas DIT, los párrafos y las listas. Puede encontrar una lista completa aquí. Los elementos en línea son en realidad algo que, como usuario de WordPress, probablemente esté profundamente familiarizado, incluso si no lo sabe. Al crear contenido y establecer el texto en negrita o cursiva, el editor de WordPress agrega … o … a su alrededor para lograr estos efectos. Simplemente haga clic en la pestaña Texto del editor para ver su código de contenido y lo verá.
En cambio, para bloquear elementos, los elementos en línea ocupan solo tanto espacio. Además, no se mueven en una nueva línea y no empujan otros elementos debajo de ellos. Puede encontrar más información sobre ellos en este lugar. Sin embargo, debido a estos comportamientos, una gran parte del modelo de caja CSS solo se aplica a los elementos de bloque. Pronto entenderás por qué. Entonces, ¿qué es este modelo CSS Box ya? Lo que quizás no sepa es que cada vez que crea un elemento HTML, viene con una caja envuelta alrededor. Esta caja consta de diferentes capas que puede manejar de forma independiente a través de CSS. Esto le permite organizar los elementos entre sí y estilarlos de varias maneras. Aquí están estas capas:
Ancho: el ancho de la zona de contenido de un elemento. Para elementos de bloque, esto es 100%predeterminado. Para elementos en línea, no importa cuánto espacio necesite.
Altura: como puedes imaginar, esto denota la altura de un elemento. Por lo general, está controlado por el contenido en el interior, pero también puede aplicar una cierta altura si es necesario. Nuevamente, esto solo funciona para elementos de bloque.
Border: los bordes corren alrededor de cada elemento HTML, incluso si no los ve. Pueden tomar diferentes tamaños, estilos y colores. Más sobre esto a continuación.
Llenado: esto significa el espacio entre el marco de un elemento y el contenido interior. Esto es importante, por ejemplo, para que el texto dentro de un elemento HTML permanezca legible.
Marja – Finalmente, el borde denota el espacio fuera del borde. Controla efectivamente el espacio entre diferentes elementos y es muy importante para la aparición de la página, el posicionamiento y el espacio. Y este es el modelo de la caja CSS. Se vuelve aún más claro cuando lo miras en un diagrama:
Debido a que cada una de las capas anteriores también tiene una propiedad CSS apropiada, el modelo de caja es las formas más básicas de determinar el tamaño, la posición y la apariencia de un elemento HTML. Como resultado, le permite cambiar mucho sobre sus páginas web. Veamos algunos ejemplos para ver cómo funciona. Cómo usar el modelo CSS Box: ejemplos para ayudarlo a comprender la teoría del cuadro en términos prácticos, hemos creado un ejemplo con un elemento de bloque.
<AP
Ejemplo de sitio para el modelo CSS Box
lorem ipsum Dollor Sit, consecuencia adipiscing Elit.
Prácticamente, es un documento HTML con un texto de ejemplo dentro de un cuadro DIV. En el navegador, se ve así:
Tenga en cuenta que le di a la caja un color de fondo para que pueda ver dónde se extiende en la pantalla. Esto hará que los cambios futuros sean más fáciles de entender. Hasta ahora, el CSS: .example-elemento correspondiente {
Color de fondo: Deepskyblue;
} Ahora hagamos algunos cambios. Cambiar el ancho Lo primero que haremos es declarar un ancho. Como se mencionó, en este momento se establece automáticamente al 100%. Si quiero cambiar eso, tengo que lidiar con la propiedad de ancho. Tenemos varias formas de configurarlo. Puede usar un ancho fijo, como píxeles o un valor proporcional, como porcentajes. Este último es muy importante para cosas como el diseño receptivo. Sin embargo, en aras de la simplicidad, iré con píxeles. Entonces, agrego esto aquí a mi hoja de estilo: .Esample-element {
Color de fondo: Deepskyblue;
Ancho: 300px;
} Cuando recargo la página, mi ejemplo se ve así:
Notará rápidamente cómo el cuadro Div ahora se limita en la medida en que se extiende hacia la derecha. También puede ver que la altura se ajusta automáticamente para dejar espacio para el texto que contiene. Crecemos aún más. Aumentando la altura del elemento a través de CSS, mientras que el contenido se ajusta perfectamente al rectángulo, se encuentran razones para aumentar aún más la altura. Por ejemplo, ¿qué sucede si quiero que el artículo sea un cuadrado perfecto? Puedo hacer esto fácilmente con la propiedad de ancho, que es la siguiente en nuestro modelo CSS Box.
Para la altura tenemos la misma posibilidad que para el ancho. Puede elegir valores o proporciones fijas. Yo, agrego esto aquí a mi hoja de estilo: .Ejemplo-elemento {
Color de fondo: Deepskyblue;
Altura: 300px;
Ancho: 300px;
} Como resultado, mi página, por ejemplo, se ve ahora como sigue:
Como puede ver, el artículo ha ganado la forma deseada, porque el ancho y la altura ahora tienen el mismo valor. Introduciendo un borde aún más, quiero cambiar el borde. Como mencioné, la frontera ya está allí, simplemente no puedes verlo. Es hora de cambiar esto a través de la propiedad del borde. Lo que es importante saber sobre este operador es que necesita tres valores: el ancho del borde, el estilo y el color. El ancho es el grosor del borde (generalmente en píxeles), el estilo puede ser sólido, puntuado, puntuado y muchas otras cosas, y el color es una declaración como “rojo” o el valor hexagonal de un color. Teóricamente, es suficiente definir solo el ancho de la frontera. Sin embargo, la mayoría de las veces obtienes mejores resultados estableciendo los tres valores. Esto es lo que fui: .Ejemplo-elemento {
Color de fondo: Deepskyblue;
Chenar: 15px azul sólido;
Altura: 300px;
Ancho: 300px;
} Y así es como aparece en la página web:
Se ve genial, ¿verdad? Lo sé, soy bastante diseñador. Tenga en cuenta que también puede establecer diferentes tipos de fronteras, fronteras, raíz, fondo fronterizo y izquierda fronteriza. Poniendo un poco sobre el ejemplo, una de las cosas principales que destaca es que el texto está bordeado directamente en el lado del elemento. Esto hace que sea muy difícil de leer y de ninguna manera es un placer a la vista. Afortunadamente, podemos cambiar esto a través de la regla de relleno. Así es como lo uso en mi ejemplo: .Esample-element {
Color de fondo: Deepskyblue;
Chenar: 15px azul sólido;
Altura: 300px;
Llenado: 16px;
Ancho: 300px;
} Y este es el efecto del código:
Mucho mejor, ¿no? Todo porque introduje algunos forros en todas las partes del artículo. Sin embargo, tenga en cuenta que, en cuanto al borde, también es posible establecer diferentes valores de llenado en diferentes partes de un elemento. Para esto, use el acolchado, el acolchado, el fondo del relleno y la izquierda de relleno. También puede ir con un atajo como relleno: 10px 5px 15px 10px; . Los números indican el relleno en la parte superior, derecha, abajo e izquierda. El llenado también es una de las pocas propiedades en esta lista que también se pueden aplicar a elementos en línea. Sin embargo, corre el riesgo de que el revestimiento superior e inferior ingrese a otros elementos, así que tenga cuidado. Agregando un margen finalmente, alcanzamos el margen. Como se mencionó, determina el espacio fuera de un elemento, influyendo en su posición en la página y en relación con otros elementos. Para hacer esto más claro, agrego lo siguiente en mi hoja de estilo: .Esample-element {Background Color: DeepSkyBlue;
Chenar: 15px azul sólido;
Altura: 300px;
borde: 25px;
Llenado: 16px;
Ancho: 300px;
} Así es como se manifiesta:
Como puede ver, esto ha eliminado los elementos en los lados de la página. Sin embargo, lo configuré para que el margen se expanda alrededor del elemento. Puede ver esto aún mejor si copio mi cuadro DIB y lo coloco en la página la segunda vez y cómo conectar los cuadros entre ellos.
En este momento tengo un margen igual de todos los lados. Sin embargo, nuevamente, también es posible definir diferentes valores para diferentes direcciones. Esto funciona exactamente de la misma manera que para el relleno. Puede usar margen-top, margen izquierda, etc. o acortado. El margen también se aplica parcialmente a los elementos en línea, sin embargo, solo los lados, no en la parte superior o inferior. Una nota rápida sobre las dimensiones de los elementos cuando se trata de las dimensiones de los elementos, es importante tener en cuenta que todas las partes del cuadro CSS contribuyen a él. Entonces, si establece el ancho de un elemento en 200px, solo se aplica a la zona de contenido. Cualquier borde, relleno y borde también contribuirá a la dimensión horizontal absoluta del elemento. Lo mismo es cierto para la altura. Y aquí se recopilan todas las capas del modelo de caja. Hay formas de omitir esto, como la configuración del tamaño de la caja a la caja de borde para un elemento. En este caso, la definición de ancho incluirá el marco y todo dentro se ajustará automáticamente para que se ajuste dentro de esos límites.
