Descripción de la práctica


Realizar en el siguiente HTML 5 declaraciones de estilo CSS que afecten al mismo elemento, el titilar h1, con diferentes puntuaciones de prioridad, e indicar su puntuación como un comentario en el propio HTML:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Herencia</title>
</head>
<body>

<div id="caja">

<header class="cabecera">
    <h1>Cabecera: header</h1>

</header>

</div>
</body>
</html>

Cabecera: header


Al elemento <h1> se le aplican las siguientes cinco declaraciones.


h1 {color: red;}

h1 {color: lime;}

header h1 {color: pink;}

#caja header h1 {color: blue;}

#caja .cabecera h1 {color: orange;}


Como su origen e importancia es la misma, se hace una valoración para saber cual predominará.

Para calcular la tupla (lista ordenada de elementos basada en A,B ,C, D) donde:

A= estilo de la línea

B= número de ID

C= número de clases

D= número de marcas HTML


Y el resultado según el cálculo es:


El selector h1 es el menos específico, sólo tiene una marca. Su puntuación sería 0,0,0,1

El selector header h1, se refiere a dos marcas. Su puntuación es de 0,0,0,2

El selector #caja header h1, se refiere una ID y dos marcas. Su puntuación es de 0,1,0,2

El selector #caja .cabecera h1, se refiere a una ID, una clase y una marca. Su puntuación es de 0,1,1,1


Por puntuación, ganará #caj .cabecera h1 {color: orange;} con 0111 puntos y el titular se muestra de color naranja.