En la cabecera <head> de la página hay que:
Cada soneto tiene un fondo diferente, para lo que podemos incluir cada soneto en una sección diferente. En este ejercicio se han utilizado divisiones <div> ya que no incluyen títulos (<h2> u otros).
Además de las divisiones <div>, al desactivar la hoja de estilo se pueden identificar las siguientes etiquetas:
Cada soneto tiene un fondo diferente, por lo que usaremos cuatro clases de divisiones <div>. Los nombres de clases pueden ser simplemente s1, s2, s3 y s4 y podemos asignarlos en orden correlativo.
En vez de clases se podrían haber utilizado atributos id, puesto que sólo se asignan a un elemento, pero es más lógico utilizar clases ya que no hay motivo para no querer repetir los fondos (en caso de que hubiera más poemas).
La página tiene dos corazones repetidos en vertical en los bordes izquierdo y derecho. En CSS 2, para conseguir ese resultado se hubieran debido asociar cada una de las dos imágenes de fondo a dos etiquetas globales distintas, por ejemplo <html> y <body>. En CSS 3 se pueden asociar varias imágenes de fondo distintas a una sola etiqueta, por ejemplo a <body>.
El tamaño de las imágenes se puede ajustar con background-size. Basta con dar un valor, ya que las dos imágenes se muestran al mismo tamaño.
Este soneto tiene una imagen de fondo repetida en las dos dimensiones.
Este soneto tiene tres imágenes de fondo:
Para que la imagen de los tallos no tape a los fuegos, la imagen del tallo debe indicarse después de los dos fuegos en la propiedad background. El orden de los fuegos no es importante.
Este soneto tiene dos imágenes de fondo:
Para que la imagen del hexágono no tape el ojo, la imagen del hexágono debe indicarse después del ojo en la propiedad background.
Para que el ojo ocupe todo el espacio vertical disponible, se debe usar la propiedad background-contain, a la que habrá que dar dos valores, uno para cada imagen definida en la propiedad background, en el mismo orden.
Este soneto tiene dos imágenes de fondo:
Para que la imagen de las estrellas no tape los caballos, la imagen de las estrellas debe indicarse después de los caballos en la propiedad background.
Para ajustar el tamaño de los caballos, se debe usar la propiedad background-size, a la que habrá que dar dos valores, uno para cada imagen definida en la propiedad background, en el mismo orden.
Estas son las propiedades CSS utilizadas:
El código HTML del ejercicio puede consultarse abriendo la página web del ejercicio Sonetos de amor de Lope de Vega y abriendo el código fuente (Ctrl+U).
La hoja de estilo del ejercicio puede consultarse abriendo este enlace a la hoja de estilo del ejercicio Sonetos de amor de Lope de Vega.
Tenga en cuenta que en estos ejercicios hay a menudo varias maneras de conseguir el mismo resultado, por lo que la solución no es nunca única.