Diego Gauchat Juan - El gran libro de HTML5, CSS3 y Javascript

Actualmente hay un modelo de caja estándar además de algunos otros experimentales. Este primer modelo, válido y ampliamente adoptado, es llamado el Modelo de caja tradicionaly ha sido utilizado desde la primera versión de CSS. Aunque efectivamente ha demostrado ser un modelo eficaz, algunos modelos experimentales están tratando de resolver sus deficiencias. El más importante de ellos, que se considera parte de HTML5, es el nuevo Modelo de caja flexible, introducido con CSS3.

El Modelo de caja tradicional es actualmente soportado por todos los navegadores en el mercado y en realidad es un estándar para el diseño web. Por el contrario, el Modelo de caja flexible, incorporada en CSS3, está todavía en desarrollo aunque sus ventajas sobre el Modelo de caja tradicional podría convertirlo en el nuevo estándar; de ahí su importancia como objeto de estudio. Ambos modelos pueden ser aplicados a una misma estructura HTML, pero la estructura tiene que estar preparada de forma correcta para ser modificada por el modelo seleccionado.

En un comienzo el diseño web se hacía a partir de tablas: elementos que casi sin querer se convirtieron en herramientas que permitían organizar cajas de contenido en pantalla. Esto puede considerarse el primer modelo de caja de la Web y entonces las cajas eran creadas expandiendo celdas y combinando filas, columnas y tablas enteras, una al lado de la otra o incluso anidándolas. Cuando los sitios web se hicieron más grandes y complejos, esta práctica reveló graves problemas debido al tamaño de los archivos y al mantenimiento de código que exigían.

Importante

El Modelo de caja tradicional presentado a continuación no es una incorporación de HTML5. Este modelo está disponible desde la primera versión de CSS y es probable que ya sepa cómo utilizarlo. Si este es el caso, no dude pasar a la siguiente sección de este capítulo.

Estos problemas iniciales abrieron camino a lo que ahora parece natural: la división entre estructura y presentación. El uso de etiquetas

y de estilos CSS hizo que fuera posible sustituir la función de las tablas y separar la estructura HTML de la presentación. Efectivamente, con elementos

y CSS podemos crear cajas en la pantalla, colocarlas en un lado u otro y darles un tamaño específico, borde, color, etc. CSS proporciona propiedades específicas que permiten organizar las cajas de acuerdo a las necesidades y estas propiedades han sido lo suficientemente poderosas como para crear un modelo de cajas que se ha desarrollado hasta dar lugar a lo que hoy se conoce como el Modelo de caja tradicional.

Debido a algunas deficiencias de este modelo, las tablas se siguieron usando por un tiempo pero, bajo la influencia del éxito de Ajax y una gran cantidad de nuevas aplicaciones interactivas, los elementos

y los estilos CSS se convirtieron poco a poco en el nuevo estándar. Finalmente, el modelo de caja tradicional fue adoptado a gran escala.

2.4.1 Documento HTML

En el Capítulo 1 construimos un documento HTML. Este documento tiene los elementos necesarios para dotar de estructura y organización a sus contenidos, pero es necesario añadir algunos elementos para prepararlo para la aplicación del Modelo de caja tradicional de CSS.

El Modelo de caja tradicional exige que las cajas estén agrupadas para poder ordenarlas de forma horizontal. Como todo el contenido del cuerpo de la página está compuesto por un conjunto de cajas a las que hay que dar una alineación y un tamaño específicos, es necesario que todas estas cajas estén agrupadas por un elemento

.

Codigo 2-29

Preparación del documento HTML5 para un estilo CSS.

El Código 2-29proporciona un nuevo documento HTML listo aplicarle los estilos CSS. Hay dos cambios importantes respecto al Código 1-20 ( Capítulo 1).En este nuevo código varias etiquetas han sido identificadas con los atributos id y class.Esto significa que ahora podemos hacer referencia a elementos muy específicos usando el valor de su atributo id , o podemos modificar varios elementos al mismo tiempo usando el valor de su atributo class.La segunda modificación importante respecto al documento con el que trabajamos antes, es el uso del elemento

mencionado anteriormente. El elemento

fue identificado con el atributo id=“caja_principal” y se cierra al final del cuerpo con la etiqueta de cierre

.Precisamente este elemento nos permitirá aplicar el modelo de caja al contenido del cuerpo y designar su posición horizontal.

Hágalo usted mismo

Compare el Código 1-20 ( Capítulo 1)con el Código 2-29para comprobar la ubicación de la etiquetas de apertura y cierre del elemento

añadido como contenedor. Compruebe también cuáles elementos del segundo código están identificados con el atributo id y cuáles con el atributo class.Confirme que los valores de los atributos id son únicos para cada etiqueta. Reemplace el contenido del archivo HTML creado anteriormente por el Código 2-29antes de aplicar las siguientes reglas CSS.

Una vez el documento HTML está listo, ha llegado la hora de crear la hoja de estilos de nuestro sitio de ejemplo.

2.4.2 Selector universal (*)

El selector universal *asigna la misma regla a cada elemento del cuerpo del documento y es útil para establecer algunas reglas básicas.

Por lo general, para la mayoría de los elementos es necesario personalizar los márgenes, o simplemente mantener unos márgenes mínimos. Algunos de los elementos tienen por defecto márgenes mayores que cero, que a menudo resultan excesivos. A medida que se avanza en la creación del diseño, sucede los márgenes de la mayor parte de los elementos tienen que ser puestos a cero. Para evitar reglas repetitivas, puede utilizar el selector universal.

Codigo 2-30

Introducción de una regla general de CSS.

La primera regla CSS que aparece en el Código 2-30, establece un margen de 0 px para cada elemento. De este modo solo será necesario modificar los márgenes para aquellos elementos que queramos que tengan un margen mayor.

Hágalo usted mismo

Ahora deberá escribir todas las reglas CSS necesarias en el archivo de hoja de estilo. El archivo fue incluido en la cabecera del código HTML con la etiqueta

, así que todo lo que tendrá que hacer es crear con su editor de texto un nuevo archivo llamado misestilos.csse insertar todas las reglas presentadas a partir del Código 2-30.

2.4.3 Títulos