Continuación de la sección anterior

Estilo de las etiquetas de encabezado HTML5

El estilo para nuestra primera etiqueta de HEADER es este:

CABEZAL#Banner {

ancho: 940px;
altura: 100px;
margen: 5px auto;
frontera: 1px sólido #000000;
text-align: center;
color de fondo: azul;

}

Fíjate en la primera línea:

CABEZAL#Banderín

Esto hace referencia a la identificación del Banner en la etiqueta de HEADER. Un símbolo de hachís/libra separa los dos, sin espacios entre ellos. Puedes perderte el encabezado al comienzo de la línea, sin embargo, y el código seguiría funcionando. Dejarlo en, sin embargo, hace que es más legible.

También verás que el CABEZAL tiene un juego de colores de fondo:

color de fondo: azul;

Juega con los valores de color, aquí. También puedes experimentar con imágenes como tu estandarte principal. Sólo tienes que sustituir color por imagen . El código es esto:

imagen de fondo: url(../backgrounds/gradient_1.jpg);

En el código de arriba tenemos una ruta a nuestro archivo de imagen entre los paréntesis redondos de la imagen de fondo. La imagen en sí misma es del mismo ancho y alto que las en CABEZAL#Banner

El código CSS para el segundo par de etiquetas HEADER era este:

HEADER#Header_Article_1 {

ancho: 900px;
altura: 60px;
color de fondo: #DCDCDC;

}

Este segundo Header tiene una identificación diferente al primero. Es más bien un subtítulo, en realidad, así que necesita un estilo diferente.

Estilo de las etiquetas de pie de página HTML5

Para el área del PIE, el código es similar al del CABEZAL:

PIE {

ancho: 940px;
altura: 40px;
margen: 5px auto;
frontera: 1px sólido #000000;
text-align: center;
color de fondo: amarillo;

}

Fíjense que tanto con el CABEZAL como con el PIE DE PISTA no tenemos que aplicar una identificación o el atributo CLASS - actúan como un selector de HTML. Sólo añadimos un ID o CLASE cuando queremos distinguir un JEFE de otro, o una SECCIÓN de otro.

Los pies de página son un buen lugar para poner cualquier información extra sobre su sitio: enlaces a los mapas del sitio, políticas de devolución, información de copyright, etc.

La Barra de Navegación

Ya has conocido el código de barras del NAV en la última sección - es sólo una lista HTML con algo de formato CSS aplicado. Sin embargo, es ligeramente diferente, así que compara esta de la última barra de navegación horizontal que añadiste. Fíjese que este uno no necesita ninguna etiqueta DIV - puedes usar las etiquetas NAV en HTML5 para hacer el mismo trabajo.

Estilo de las etiquetas de sección de HTML5

Nuestra primera etiqueta de SECCIÓN se usa para contener el contenido de la página... es sólo usado como envoltorio. El único código aquí es este:

SECCIÓN#Envoltura {

margen superior: 100px;
margen izquierdo: 20px;
margen-derecha: 20px;
...en el fondo del margen: 50px;

}

Aquí, sólo estamos estableciendo un margen para el contenido principal de la página. Pero porque tenemos más de una etiqueta de SECCIÓN, usamos el atributo ID para especificar cuál de los dos que queremos formatear.

La segunda sección tiene el siguiente CSS:

SECCIÓN#Sección_Artículo_1 {

ancho: 850px;
altura: 400px;
margen superior: 20px;
margen izquierdo: 20px;
margen-derecha: 20px;
margen-fondo: 20px;
color de fondo: #F8EBEB;

}

Esta sección establece una anchura y una altura, y contendrá el contenido de un artículo, o cualquier contenido, en realidad. También hemos establecido algunos márgenes, aquí, para crear algo de espacio. El color de fondo es sólo para que puedas ver esa sección en particular. Es no tiene por qué estar allí en absoluto.

Estilizando las etiquetas de los artículos HTML5

La etiqueta ARTÍCULO en nuestro código HTML actúa de nuevo como un envoltorio para otros contenidos. La idea es que tienes un par de etiquetas ARTÍCULO por artículo (o lo que sea contenido que tienes).

ARTÍCULO#Artículo_1 {

ancho: 900px;
altura: 500px;
color de fondo: #ADAAAA;

}

Una vez más, no es necesario establecer una identificación o una clase. La etiqueta del artículo actúa como un Selector de HTML. Sin embargo, hemos añadido el ID para distinguirlo de otros ARTÍCULOS etiquetas que pueden estar en la página. De esa manera, puedes dar formato a cada ARTÍCULO de manera diferente, si lo desea. Sólo tenemos un ARTÍCULO, así que la identificación no es estrictamente necesaria.

Ejercicio
Pruebe diferentes estilos, experimente con márgenes, rellenos, bordes, fondos, y cualquier otra cosa que te guste. Intenta añadir una imagen de bandera para la parte superior en lugar de un color.

En la próxima lección, aprenderás a crear un diseño de dos columnas utilizando HTML5 y CSS.

Estilo de la disposición | Una disposición de dos columnas...