Cabecera: header

Comentarios:

Se han definido diferentes estilos al "encabezado 1", cuyo texto dice "Cabecera: header". Aquí se recogen sus puntuaciones de prioridad.

El código de estilo aplicado a la página web es el siguiente:

body {
background-color: rgb(248,248,150);
color: blue;
font-family: Verdana, sans-serif;
}
#caja h1 {
color: green;
}
.class {
color: red;
}
.class h1 {
color: orange;
}
h1 {
color: purple;
}

Analizaremos que "color" será el que se aplique al "encabezado 1". Para ello, comenzaremos a calcular la puntuación de cada uno de los estilos definidos. Las puntuaciones serán aplicadas con el siguiente criterio: A = Si se aplica el estilo en línea; B = Si se aplica el estilo a un identificador; C = Si se aplica el estilo a una clase; y D = Si se aplica el estilo a una marca HTML. En el caso de los criterios B, C y D será necesario sumar el número total de identificadores, clases y marcas HTML, respectivamente, a las que son aplicados los estilos, para obtener su valor. Cuando no se aplique alguno de estos criterios a un estilo dado su valor será 0. Aquel estilo que obtenga una puntuación más alta en el orden (A, B, C, D) será el "ganador". Por tanto el peso más alto a la hora de aplicar el estilo será A > B > C > D. En caso de empate en la puntuación prevalecerá el último estilo aplicado.

• body {color:blue;}
  A = 0
  B = 0
  C = 0
  D = 1
  Puntuación = (0,0,0,1)
• #caja h1 {color:green;}
  A = 0
  B = 1
  C = 0
  D = 1
  Puntuación = (0,1,0,1)
• .class {color:red;}
  A = 0
  B = 0
  C = 1
  D = 0
  Puntuación = (0,0,1,0)
• .class h1 {color:orange;}
  A = 0
  B = 0
  C = 1
  D = 1
  Puntuación = (0,0,1,1)
• h1 {color:purple;}
  A = 0
  B = 0
  C = 0
  D = 1
  Puntuación = (0,0,0,1)
  

Según las puntuaciónes obtenidas, la prioridad en mostrar el color sería la siguiente: green > orange > red > purple > blue. Es decir, el texto aparecerá en color green (verde), pero si eliminásemos los estilos asociados a este color, entonces se vería orange (naranja); si además eliminásemos los estilos asociados a este color, entonces se vería red (rojo). Eliminando además el estilo correspondiente a este color red, veríamos que los colores blue y purple tienen la misma puntuación, pero como los estilos correspondientes al purple (rosa) aparecen en último lugar, entonces tienen prioridad a los del blue (azul).