# Comentarios al ejercicio Citas

## Etiquetas utilizadas

Al quitar el estilo se puede observar que las únicas etiquetas de bloque utilizadas son <h1> y <p>. Puesto que los párrafos no son todos iguales, es que hay varias clases de párrafos <p>.

## Borde en las citas

El borde que aparece alrededor de cada cita se haría normalmente creando divisiones <div>, pero como este ejercicio se propone antes de haber visto esa etiqueta, se debe hacer sin utilizar divisiones. La solución es darse cuenta de que cada cita tiene dos párrafos:

- el primero contiene la cita
- el segundo contiene el nombre del autor de la cita

Si ponemos al primer párrafo un borde por arriba, a la izquierda y a la derecha y al segundo párrafo un borde por abajo, a la izquierda y a la derecha, y ajustamos el margen de los párrafos para que los bordes se unan, podemos conseguir el borde deseado.

## Clases utilizadas

A primera vista parece que hacen falta seis clases de párrafos, puesto que hay dos tipos de bordes (por arriba y por abajo) y tres colores distintos, lo que da en total 2 x 3 = 6 combinaciones posibles. Pero se puede reducir el número de clases recordando que un elemento puede tener varias clases. Así, bastaría con cinco clases:

- dos clases para definir los bordes (arriba o abajo)
- tres clases para definir los colores

En este caso, no hay mucha diferencia entre hacerlo de una manera u otra (el número de clases sólo se reduce de seis a cinco clases), pero si hubiera cuatro tipos de bordes y cinco colores distintos, la reducción sería muy importante: de 20 clases (4 x 5 combinaciones) a 9 clases (4 + 5).

## Solución del ejercicio

El código XHTML del ejercicio puede consultarse abriendo la página web del ejercicio y eligiendo el menú Ver > Código fuente de la página en Firefox o Ver > Código fuente en Internet Explorer.

La hoja de estilo del ejercicio puede consultarse 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.

Esta obra está bajo una licencia de Creative Commons Reconocimiento-CompartirIgual 3.0 España.