martes, febrero 14, 2012

Tutorial de desarrollo web, Parte XIX: Modelo de Caja CSS

Bien, llevamos unas cuantas semanas viendo HTML sin casi acordarnos del CSS así que esta semana y la próxima nos ocuparemos casi por completo de hablar de CSS. Es más, probablemente de HTML puro quede sólo uno o dos posts a lo sumo, porque casi todo lo importante de ese lenguaje lo hemos visto ya (luego quedará conocer etiquetas sueltas de las que hablaré en la futura guía de referencia que haré tanto para HTML como para CSS... ya hablaré de ellas más adelante). Pero, como normalmente, antes de comenzar este post, la resolución del último ejercicio.
Bueno, esta semana trataremos un tema un tanto extraño pero al mismo tiempo bastante simple (y útil) una vez lo comprendamos. Hablamos del modelo de caja de CSS. Según el CSS todas las etiquetas del "body" de nuestra página están encerradas en una caja que se divide en cuatro capas, ordenadas desde la más interna hacia la externa:
  • Contenido: La capa interior, toda la información que introduzcamos en la etiqueta aparecerá en esta capa. Su tamaño se define por las instrucciones de CSS height y width y el fondo de esta capa se definirá con las etiquetas de tipo background de la propia etiqueta.
  • Relleno: Mejor conocido como padding, es la distancia que habrá entre el contenido de la etiqueta y el borde. Su fondo será el mismo del contenido y su tamaño se define por las instrucciones padding (padding, padding-top, padding-bottom, padding-left y padding-right).
  • Borde: Vista ya en una entrada anterior, esta capa define un contorno alrededor del contenido (y del relleno) que puede hacerse visible, y cuyo fondo y tamaño se puede definir por las etiquetas border ya dichas.
  • Margen: La capa más exterior, define el espacio que cada etiqueta mantendrá con respecto al resto de etiquetas. Su fondo es transparente (por lo que heredará el fondo de la etiqueta que contenga a esta etiqueta) y su tamaño se define con las instrucciones margin (margin, margin-top, margin-bottom, margin-left y margin-right).
A continuación una imagen un poco cutre hecha por mí en 5 minutos para entender la estructura del modelo de caja:
Vale, lo reconozco, no es un poco cutre, es MUY cutre, pero se entiende, ¿no? Pues hala.
Bueno, realmente poco más hay que saber sobre el modelo de caja, pero como supongo que esto suena muy abstracto y extraño explicado de esta manera, tal vez lo mejor es que trabajemos sobre ello.
Vamos en primer lugar a crear un nuevo documento "box-model.html" en nuestra carpeta "Mis páginas webs" y escribiremos la estructura básica de cualquier documento HTML (espero que a estas alturas ya os la sepáis) y luego incluiremos en el interior dos etiquetas "div" una junto a la otra, cada una con un texto distinto, por ejemplo:

<div class="primero">primero">Primero</div>
<div class="primero">segundo">Segundo</div>

De momento, nuestra página quedaría de esta manera:

De momento no vemos nuestra "caja" por ningún lado, a pesar de que está ahí. Pero analicémoslo poco a poco. Como explicamos antes, todo lo que escribamos entre ambas etiquetas irá a la capa "contenido", de modo que tanto las palabras "Primero" como "Segundo" estarán ambas en el interior de dicha capa (cada una en su "div" particular). Ahora empezaremos a meter algo de CSS, en primer lugar, para poder diferenciar nuestros cambios, diferenciaremos un borde en nuestras etiquetas, de la siguiente manera:

<style type="text/css">
div

{
border-style: solid;
}
</style>

Recordáis el uso de la instrucción border-style, ¿no? Bueno, ahora guardamos, actualizamos y nos encontramos con...
Si hemos seguido el curso, esto no será una sorpresa, pero gracias a ello vamos a aprender a usar el resto de las características del modelo de caja.
Bien, como ya he dicho antes, entre el contenido de nuestras etiquetas (en este caso las palabras "Primero" y "Segundo") y el borde de cada una de ellas, existe una capa conocida como "relleno", a la cual podemos dar tamaños gracias a la instrucción padding, así que en nuestro siguiente paso añadiremos una línea al anterior código, así:


<style type="text/css">
div

{
border-style: solid;
padding: 10px;
}
</style>

Antes de continuar, anunciar, a partir de ahora sólo diré las líneas que vamos a introducirles, ya que todas irán dentro del espacio para "div", y en caso de que no sea así, avisaré de ello.
Bueno, con esta nueva instrucción, volvemos a guardar y actualizar y nuestro resultado debería ser el siguiente:
Supongo que no hace falta que explique lo que ha ocurrido aquí, pero por si las moscas: como les decía, el "relleno" (padding) está entre el contenido y el borde, así que al decirle que queremos un padding de 10 píxeles se ha generado un espacio en blanco alrededor del texto antes de llegar al borde. Tal vez os preguntéis por qué el padding derecho es tan grande, pero en verdad es la capa de "contenido" la que es así de grande, todo debido a la instrucción que ya vimos hace unas semanas, el display. La etiqueta "div" tiene por defecto el "display" a "block" lo cual hace que el contenido ocupe todo el ancho de la página. Si, por el contrario, lo pusiéramos a "inline" ocurriría lo siguiente:

display: inline;

Aquí podemos ver bastante claro como el padding sólo ocupa 10 píxeles alrededor del contenido. Sin embargo, debido a que las etiquetas con display: inline; no se les puede modificar el ancho y la altura (al menos, yo no lo he logrado), borraremos esta última línea para volver a la anterior imagen.
Al igual que ocurría con la instrucción border-width, la etiqueta padding puede recibir valores genéricos para los 4 costados del "relleno" o para cada uno de ellos, tanto mediante las cuatro instrucciones específicas (padding-top, padding-bottom, padding-left y padding-right) como en una sola declaración, dándole desde uno hasta cuatro valores. Como eso ya lo explicamos con dicha anterior etiqueta, no voy a extenderme más sobre el asunto, sólo avisar de que exactamente lo mismo ocurre también con la instrucción margin, precisamente la que veremos ahora.
Viendo cómo ha funcionado hasta el momento la etiqueta padding y sabiendo cómo funcionaba la etiqueta border-width, no nos será muy difícil imaginar el funcionamiento de esta última etiqueta, pero para hacerlo, incluiremos esta nueva línea:

margin: 10px;

Podemos ver que ambos "div" se han separado entre ellos y que incluso han dejado un espacio con los bordes de la página. Evidentemente, es por haber introducido esta última instrucción, con lo que le hemos reservado un espacio extra alrededor del borde, el "margen".
Ya que antes hablamos sobre los fondos, veamos cómo funcionan dándole un valor al fondo, introduciendo en nuestro "div", por ejemplo:

background-color: yellow;

Comprobamos que tanto el "contenido" como el "relleno" ahora tienen un fondo amarillo, sin embargo, los márgenes no, tal como habíamos explicado que ocurriría más arriba.
Hasta ahora sólo hemos visto cómo cambiar el tamaño de las capas exteriores, sin embargo, no hemos cambiado el tamaño del contenido. Esto se conseguirá con las etiquetas width (anchura) y height (altura).

width: 100px;
height: 50px;

Vemos que el tamaño de ambos "div" ha cambiado para adecuarse a los valores que les hemos dado. Sigue forzando un salto de línea debido al valor display: block; por defecto en los "div", pero al menos no toma el ancho completo de la página. Y esto nos será útil para una razón en particular, que ahora voy a detallar.
Muchas veces nos ocurrirá que queramos colocar una tabla, un "div" o algún otro elemento con display: block; en el centro de nuestra página. Sin embargo, la instrucción text-align: center; que hemos usado hasta ahora lo único que hace es centrar el contenido de dicha etiqueta, no la etiqueta en sí, que, incluso aunque le bajemos el valor width, seguirá siempre alineándose a la izquierda. Esto es porque estas etiquetas se centran según el margen izquierdo, pero existe un valor para la instrucción margin que nos solucionará este problema: auto.
Probemos lo que courriría si sustituímos el margin que ya le habíamos dado con el siguiente:

margin: auto;

Vemos que nuestros "div" han sido centrados. Además, podemos hacer que vuelvan a separarse entre ellos del siguiente modo:

margin: 10px auto;

Como vemos, el valor "auto" de la instrucción "margin" nos será muy útil para centrar horizontalmente nuestros "div" y otras etiquetas con display: block;. Pero, para ello, siempre habrá que definirle un ancho (width), ya que si no, la etiqueta ocuparía el ancho completo de la página y este "margen automático" pasaría completamente desapercibido.
Y, ahora sí, espero que haya quedado bastante claro cómo podemos usar el modelo de caja. Es un sistema que en un primer momento parece enrevesado, pero usándolo y probando podremos sacarle mucho juego. Y, para terminar, nuestro acostumbrado ejercicio:

EJERCICIO

Esta semana voy a pedir que repliquéis una serie de capturas que os voy a dejar aquí, usando las distintas instrucciones que conocemos hasta ahora (tanto del modelo de caja como otras), combinando nuestros conocimientos de HTML y CSS. Probablemente existan varias soluciones para cada uno, sólo pido que intentáis que se parezcan lo más posible a estas:



Aviso: hay que jugar mucho con el modelo de caja y aplicar algunas "trampas" para lograrlos, así que no os rindáis, con lo que hemos estudiado hasta ahora se puede hacer (de hecho, sólo lo he hecho con instrucciones y etiquetas que he explicado) así que, ¡ánimo y al toro!


No hay comentarios: