Cabecera: header

Ejercicio Opcional del Módulo 1 Tema 6

Calculo de prioridades en aplicación de estilos

En este ejemplo se está afectando al encabezado h1 "Cabecera: header" de 6 maneras, a saber:

1. En el estilo del h1 con la siguiente cláusula:
   body{background: LightCyan; color:black; }
2. Afectandolo en el id de "caja" y los elementos header y h1 en la siguiente cláusula
   #caja header h1 {color: blue;}
3. Con la indicación en la clase "cabecera" con el siguiente código:
   #caja .cabecera h1 {color: red;}
4. Cambiando el color de los elementos header y h1 en las tres líneas de código siguientes:
   header h1 {color: yellow;}
h1 {color: purple;}
h1 {color: cyan;}

5. Y finalmente cambiando el estilo dentro de la declaración del elemento, que es lo que se conoce como inline style
   h1 style="color:green"

En segundo lugar se debe de calcular las duplas (A,B,C,D) para cada una de las líneas donde hay cambio de estilo al mismo elemento, donde el significado de cada literal es el que sigue:

• A - Estilo en línea: cuando en un elemento html se agrega la definición de estilo
• B - Número de elemetos definidos como ID modificados por el estilo
• C - Número de elementos clases que se modifican por el estilo
• D - Número de elementos (marcas) HTML modificados por el estilo

Para este ejemplo

                 

código	A	B	C	D
body{background: LightCyan; color:black; }	0	0	0	1
#caja header h1 {color: blue;}	0	1	0	2
#caja .cabecera h1 {color: red;}	0	1	1	1
header h1 {color: yellow;} h1 {color: purple;} h1 {color: cyan;}	0	0	0	2
h1 style="color:green"	1	0	0	1

Se puede observar, de la tabla anterior, que el inline style tiene mayor prioridad por lo cual es el estilo que se aplica al elemento h1