Otra regla básica que debe ser declarada al principio de un documento es la definición por defecto de los elementos estructurales de HTML5. Algunos navegadores no reconocen estos elementos o los tratan como elementos en línea. Por tanto siempre es necesario declararlos como elementos de bloque para asegurar que serán tratados como elementos
y que por lo tanto será posible construir el modelo de caja.
Código 2-32
Definición de los elementos de HTML5 como elementos de bloque.
Ahora los elementos afectados por la regla del Código 2-32se colocarán uno sobre el otro a menos que se especifique lo contrario más adelante.
Conceptos básicos
La propiedad display
asigna un tipo diferente al elemento afectado. Si quiere convertir un elemento en línea en un elemento de bloque, lo único que tiene que hacer es utilizar la declaración display: block
.Hay varios posibles valores para esta propiedad, como block, inline, inline-block
, etc. Para obtener una lista completa, por favor visite nuestro sitio web y siga los enlaces propuestos para este capítulo.
El primer elemento del modelo de caja es siempre
y usualmente su contenido tiene estar de forma horizontal. Para obtener un diseño consistente en diferentes configuraciones de pantalla se debe indicar su tamaño o su tamaño máximo.
Codigo 2-33
Centrado del cuerpo.
De forma predeterminada, la etiqueta
tiene un valor de ancho del 100%. Esto significa que el cuerpo va a ocupar todo el ancho de la ventana del navegador. Para centrar la página en la ventana, es necesario centrar el contenido en el interior del cuerpo. Con la regla añadida en el
Código 2-33, todo lo que esté dentro del elemento se centra, centrando por tanto toda la página web.
2.4.6 Creación de la caja principal
Hay que especificar un tamaño para el contenido del cuerpo. Recordará que en el Código 2-29añadimos un elemento
id=“caja_principal” para agrupar el contenido del elemento , que ahora está contenido en su interior. El tamaño de esta caja determinará el tamaño máximo del resto de los elementos.
Código 2-34
Definición de las propiedades de la caja principal.
La regla del Código 2-34es la primera que hace referencia a un elemento mediante el valor de su atributo id
.El carácter #indica al navegador que el elemento afectado por estos estilos tiene el atributo id
con el valor caja_principal
.
Ésta regla establece tres estilos para el cuadro principal. El primero establece un ancho fijo de 960 px para la caja. (Los valores habituales para un sitio web actualmente están entre 960 y 980 px de ancho). El segundo estilo es parte del Modelo de caja tradicional. En la regla anterior (Código 2-33), usamos el estilo text-align: center
para establecer que el contenido del cuerpo se centre, pero esto solo afecta al contenido en línea, como pueden ser textos o imágenes. Para los elementos en bloque como
, es necesario establecer un valor para sus márgenes que los ajusten automáticamente al tamaño del elemento padre. En el
Código 2-34, el estilo
margin: 15px auto
asigna 15 px para el margen superior e inferior del elemento
al que hace referencia y establece el tamaño de los márgenes izquierdo y derecho como automático. De este modo tendremos un espacio de 15 px en las partes superior e inferior del cuerpo y el espacio a la izquierda y la derecha será calculado automáticamente de acuerdo con el tamaño del cuerpo y el tamaño del elemento
, centrando efectivamente el contenido en la pantalla. Ahora la página web está centrada y con un tamaño fijo de 960 px.
Con el siguiente paso evitaremos un problema que se produce en algunos navegadores. La propiedad text-align
es hereditaria. Esto significa que no solo la caja principal estará centrada, sino que también lo estarán todos los elementos que contiene: el estilo se transferirá a cada elemento anidado dentro del elemento
.Por tanto es necesario volver a cambiar este estilo a su valor por defecto para el resto del documento. El tercero y último estilo de la regla del
Código 2-34se encargará de esto. De este modo el contenido del cuerpo estará centrado pero el contenido de la caja principal (el elemento
) estará de nuevo alineado a la izquierda, y de este modo, el resto del código heredará este estilo y lo utilizará de forma predeterminada.
Hágalo usted mismo
Si aún no lo ha hecho, copie cada regla encontrada hasta este punto en un archivo vacío con el nombre misestilos.css.Este archivo debe ser colocado en la misma carpeta o directorio que el archivo HTML que contiene el Código 2-29.Deberá tener por lo menos dos archivos, uno con el código HTML y otro llamado mystyles.csscon todos los estilos CSS que estudiamos desde el Código 2-30.Abra el archivo HTML en el navegador para ver en pantalla el contenido creado.
Continuemos con el resto de los elementos estructurales. A continuación de la etiqueta de apertura
se encuentra el primer elemento estructural de HTML5: .Este elemento contiene el título principal de la página web y se encuentra en la parte superior de la pantalla. Hemos identificado el elemento en el código con el atributo
id=“cabecera”
.
Por defecto, cada elemento en bloque, tal como sucedía con el cuerpo, tiene un ancho del 100%. Esto significa que el elemento ocupa todo el espacio horizontal disponible. En el caso del cuerpo, como ya se ha dicho, este espacio es el ancho de la ventana del navegador pero para el resto de los elementos el espacio máximo se determina por el tamaño de su elemento padre. En nuestro ejemplo, el espacio máximo de los elementos dentro de la caja principal será 960 px, ya que están anidados dentro de la caja principal y éste es el ancho establecido para este elemento.