Читать книгу El gran libro de HTML5, CSS3 y Javascript - Diego Gauchat Juan - Страница 64

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 <div>.

Codigo 2-29

Preparación del documento HTML5 para un estilo CSS.

El Código 2-29 proporciona 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 <div> mencionado anteriormente. El elemento <div> fue identificado con el atributo id=“caja_principal” y se cierra al final del cuerpo con la etiqueta de cierre </div>. 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-29 para comprobar la ubicación de la etiquetas de apertura y cierre del elemento <div> 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-29 antes 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.