UP | HOME

Diseño de Interfaces Web

Práctica 2.1 - Cascada y herencia en CSS

Índice

1 Introducción

El objetivo de esta práctica es comprender las reglas que rigen la herencia y las características de cascada del lenguaje CSS.

2 Tiempo asignado

1 hora de clase.

3 Material de la práctica

Para realizar esta práctica se utilizarán los archivos HTML creados en la práctica 1.4.

4 Desarrollo de la práctica

4.1 Modificación del código HTML

Modifica el código HTML de las páginas de la siguiente manera:

  • Asigna un nombre de clase denominado "especial" a los párrafos que contengan en su interior elementos <span>.
  • Asigna un nombre de identificador denominado "span1" a uno de los elementos <span> de cada página. Dicho elemento deberá tener un identificador y un nombre de clase (el nombre de clase fue asignado en la práctica 1.4).

4.2 Hoja de estilos externa

Crea una hoja de estilos externa que utilicen todas las páginas del sitio. Dicha hoja deberá tener las siguientes características:

  • Modificar el tipo de fuente y tamaño de todos los encabezados.
  • Modificar el tipo de fuente y tamaño de todos los párrafos.
  • Modificar el tipo de fuente, tamaño y color de todos los enlaces visitados y sin visitar.
  • Modificar el tipo de fuente, tamaño y color de todos los enlaces con el ratón encima (hover).
  • Poner los párrafos de color verde.
  • Poner los párrafos con nombre de clase "especial" en color rojo.
  • Poner los elementos <span> con identificador "span1" de color amarillo.
  • Poner los elementos <span> con nombre de clase "destacado" que se encuentren dentro un párrafo con nombre de clase "especial" de color azul oscuro.
  • Poner los elementos <span> con nombre de clase "destacado" que se encuentren dentro un párrafo de color marrón.
  • Poner los elementos <span> con nombre de clase "destacado" de color negro.
  • Poner los elementos <span> de color morado.

4.3 Hoja de estilos interna

Dentro de una de las páginas, crea una hoja de estilos interna con las siguientes características:

  • Poner los párrafos de color naranja.
  • Modificar el TAMAÑO de los párrafos (utilizando uno distinto al de la hoja externa).

4.4 Estilos en línea

Dentro de la misma página utilizada en el punto anterior, crea un estilo dentro de la etiqueta correspondiente a uno de los párrafos con nombre de clase "especial" para que tenga color azul.

4.5 Análisis de resultados

Analiza el efecto de cada una de las reglas CSS creadas en los puntos anteriores. Anota el fichero CSS con comentarios sobre los resultados que se producen: qué reglas se aplican, cuáles quedan sin efecto por acción de otras, qué importancia tienen los estilos en función de donde están declarados, etc.

5 Resultado a entregar

  • Se deben entregar los cuatro ficheros HTML y el fichero CSS comprimidos en un sólo archivo.
  • El archivo estará en formato ZIP.
  • El nombre del archivo será de la forma apellido1-apellido2-nombre-practica2-1.zip (por ejemplo, prieto-alarcon-pedro-practica2-1.zip).

Licencia de Creative Commons
Diseño de Interfaces Web by Pedro Prieto is licensed under a Creative Commons Reconocimiento-CompartirIgual 4.0 Internacional License.