Comentarios al ejercicio LondresComentarios al ejercicio LondresAl quitar el estilo se puede observar que las únicas etiquetas de bloque utilizadas son <h1>, <h2> y <p>.
Al poner el estilo se puede observar que la información sobre cada monumento forma una ficha, por tanto hay divisiones agrupando cada nombre, foto y descripción de los monumentos.
El párrafo con los enlaces es distinto al resto de párrafos, por tanto necesita una clase.
Hay tres clases de fichas (con tonos gris, verde y azul), por lo que parecería que se necesitan 3 clases de divisiones. Pero en realidad es suficiente con dos clases.
La idea es dejar sin clase las divisiones cuyo estilo es el más utilizado (en este caso, los grises) y definir su estilo con el selector
.. y dar clase a las otras divisiones y definir su estilo con los selectores
Las imágenes se encuentran a izquierda y derecha y con bordes distintos, por lo que parecería que se necesitan también tres clases de imágenes. Pero en realidad no es necesaria ninguna clase, ya que las imágenes que están dentro de divisiones con la misma clase son iguales, así que se puede utilizar un selector de descendientes, por ejemplo:
El primer selector haría referencia a las imágenes contenidas en los divisiones grises (que no tienen clase). El segundo selector haría referencia a las imágenes contenidas en las divisiones azules (por ejemplo).
Las imágenes tienen borde. Además se ve una franja de color entre la imagen y el borde. Esta franja se consigue definiendo un margen interior (padding) y un color de fondo (background-color) en la imagen.
Como las imágenes flotan, habrá que poner la propiedad clear a algún elemento para que no se amontonen las fichas.
Al hacer clic en los enlaces, Firefox salta al principio de las divisiones, por tanto los destinos de los enlaces son las divisiones.
El código XHTML del ejercicio puede consultarse abriendo la página web del ejercicio y eligiendo el menú en Firefox o en Internet Explorer.
La hoja de estilo del ejercicio puede consultando abriendo este enlace a la hoja de estilo del ejercicio.
Tenga en cuenta que en estos ejercicios hay a menudo varias maneras de conseguir lo mismo, por lo que la solución no es nunca única.
Autor: Bartolomé Sintes Marco