Herencia de estilos

En este ejercicio nos piden que en un archivo html incluyamos 5 declaraciones de estilo CSS que afecten al elemento h1 (título).

Debemos incluir como comentario la puntuación obtenida como prioridad

Los estilos css que he incluido son los del ejemplo del vídeo anterior al ejercicio. Estos son los siguientes:

A continuación presentamos el cálculo de la puntuación. Como vemos, en esta página hay dos títulos h1, uno el que he puesto para denominar el ejercicio y otro que es el que viene para el ejercicio en sí. El primero es el de Herencia de estilos y el segundo es el de Cabecera: header.

A continuación realizamos los dos cálculos:

• Herencia de estilos
• Este título sólo lleva la etiqueta h1, por lo que solo podrá tomar el valor de esta etiqueta.
• Existen dos etiquedas h1 definidas, por lo que tendrá que analizarse la puntuación que obtiene para determinar qué color es el que se asignará al título
• Para la primera etiqueta la puntuación será 0001, color purpura.
• Por tanto el título h1 en el que se ha escrito Herencia de estilo debería tomar el color pupura, pero como posteriormente lee la etiqueta de color color gris es la que asigna.
• Los tres primeros ceros aparecen porque no hay determinado ningún estilo en línea, ni hay un id en ese h1 ni una clase. Solo tiene definición el elemento, pero hay dos, toma el último que haya en el archivo.
• Cabecera:header
• En este caso sí que existen varios elementos css que afectarán al título.
• El título se cuentra definido dentro de un clase y a su vez la clase dentro de un id.
• Las puntuaciones que se obtendían serán las siguientes:
• 0001 --> 0 estilos en línea, 0 estilos de id, 0 estilos de clase, 1 estilos de elemento h1 --> esto nos llevaría al color purpura, pero como lee después el gris, aplicaría este color
• 0002 --> 0 estilos en línea, 0 estilos de id, 0 estilos de clase, 2 estilos de elementos: h1 y header --> esto nos llevaría al color lima
• 0111 --> 0 estilos en línea, 1 estilos de id (#caja), 0 estilos de clase (.cabecera), 1 estilo elemento h1 --> esto nos llevaría al color rojo
• 0102 --> 0 estilos en línea, 1 estilos de id (#caja), 0 estilos de clase, 2 estilos h1 y header
• Por tanto, el color rojo es el que presenta la puntuación más alta, 111, de ahí que tome el título Cabecera:header este color. Se observa debajo de estas líneas.