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

Continuemos con el resto de los elementos estructurales. A continuación de la etiqueta de apertura <div> se encuentra el primer elemento estructural de HTML5: <header>. 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 <header> 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.

Código 2-35

Adición de estilos de <header>.

Dado que el elemento <header> ocupará todo el espacio horizontal disponible en la caja principal, y será tratado como un elemento de bloque y ubicado en la parte superior de la página, el siguiente paso es asignar estilos que nos permitan reconocerlo cuando se muestre en la pantalla. En la regla mostrada en el Código 2-35 le damos al elemento <header> un fondo amarillo, un borde sólido de 1 píxel y un margen interior de 20 px determinado por la propiedad padding.