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
).