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

El último paso es trabajar en el diseño de los contenidos. Hay algunos elementos de HTML5 adicionales que pueden ser útiles para este propósito:

Código 2-39

Añadir los toques finales para el diseño básico.

La primera regla del Código 2-39 hace referencia a todos los elementos <article> y les aplica algunos estilos: color de fondo, borde sólido de 1 px, relleno y margen inferior. El margen inferior de 15 px separa a cada artículo del siguiente.

Cada artículo tiene también un elemento <footer> que muestra el número de comentarios recibidos. Para hacer referencia a un elemento <footer> dentro de un elemento <article>, hemos utilizado el selector article footer que indica que cada elemento <footer> que se encuentre dentro de un elemento <article> se verá modificado por la regla. Esta técnica de referencia se aplica en este caso para alinear a la derecha el texto del pie de cada artículo.

Al final del Código 2-39 se modifica el color de cada elemento <time> y se distigue la leyenda de la imagen (figcaption) del resto de textos del artículo usando un tipo de letra diferente.

Figura 2-3

El modelo de caja tradicional aplicado al documento.

Hágalo usted mismo

Si no lo ha hecho aún, copie todas las reglas CSS que figuran en este capítulo desde Código 2-30, uno tras otro, en el interior del archivo misestilos.css y a continuación abra el archivo HTML con el documento creado en el Código 2-29 en su navegador. El resultado debe ser similar a la Figura 2-3.