Comentarios al ejercicio Citas de Óscar Wilde

Cabecera

En la cabecera <head> de la página hay que:

Etiquetas

Al desactivar la hoja de estilo se puede observar que las únicas etiquetas de bloque utilizadas son <h1> y <p>.

No es necesario crear divisiones alrededor de cada cita. La forma cuadrada y el borde se puede dar directamente al párrafo <p>.

Clases

Cada cita tiene la letra inicial diferente al resto del párrafo. Se podría utilizar una etiqueta <span> con clase, pero puesto que se trata del primer carácter, se puede utilizar simplemente el pseudo-elemento ::first-letter, que no requiere añadir nada al código fuente html.

Posicionamiento

Los párrafos tienen forma cuadrada y tienen todos el mismo tamaño, independientemente del contenido, lo que se puede conseguir dando el mismo valor a las propiedades width y height.

Las citas se muestran una al lado de la otra formando una trama rectangular. Además, al hacer zoom o al estrechar o ensanchar la ventana, el número de citas por fila se ajusta automáticamente. Eso se puede conseguir con posicionamiento flotante.

Si el tamaño del párrafo es suficientemente grande, no es necesario definir la propiedad overflow, aunque por precaución se puede incluir en la hoja de estilo.

Como no hay ningún elemento después de las citas, no hace falta utilizar la propiedad clear en ningún elemento.


La letra inicial de cada párrafo (pseudo-elemento ::first-letter) tiene posicionamiento flotante.

Diferencia entre Firefox y Chrome / Internet Explorer

En Internet Explorer y Chrome la letra capital se muestra con espacio en blanco por arriba y por abajo, espacio que corresponde al interlineado, mientras que Firefox no muestra ese espacio, como muestran las capturas siguientes.

Resultado en Google Chrome e Internet Explorer Resultado en Firefox

Para que la letra inicial ocupe en vertical sólo dos líneas de texto en Chrome e Internet Explorer, se debe utilizar la propiedad line-height en el pseudo-elemento ::first-letter. Firefox muestra la letra inicial de la misma manera con ella o sin ella.

Estilos

Estas son las propiedades CSS utilizadas:

Solución del ejercicio

El código HTML del ejercicio puede consultarse abriendo la página web del ejercicio 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 Citas de Óscar Wilde.

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.