Comentarios al ejercicio Bordes 1

Etiquetas utilizadas

Al ver la página sin aplicar la hoja de estilo se pueden identificar las siguientes etiquetas:

• Las etiquetas de bloque utilizadas son <h1>, <h2>, <h3>, <h4>, <h5> <h6> y <p>.

Estilos utilizados

Al ver la página aplicando la hoja de estilo se pueden identificar las propiedades utilizadas:

• tipo de letra: font-family.
• alineación: text-align
• tamaño de letra: font-size. Está expresado en porcentaje (ya veremos en su momento por qué).
• mayúsculas: text-transform.
• bordes: esta es la parte más importante del ejercicio. Los grosores de los bordes son 5, 10, 15 o 20 px.

  Se trata de practicar las diferentes formas de establecer un borde:

  • con la propiedad compuesta border
  • con las propiedades compuestas border-top, border-right, border-botom y border-left
  • con las propiedades border-color, border-width y border-style (utilizando uno, dos o tres o cuatro valores)

  Cualquiera de los bordes se pueden hacer de varias maneras. Se trata de hacer unos de una manera y otros de otra, pensando en cada caso cuál puede interesar más (porque haya que escribir menos propiedades, por ejemplo). Se puede comparar con la solución, para ver si yo lo hecho de otra manera (mi solución no es la mejor, es una más).

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.