Modulo 2: Práctica 01 - Estructura HTML5/CSS3 para multipantalla y objetos multimedia

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

<!doctype html>

<html>

<head>

<title>Herencia</title>

</head>

<body>

<h1>Cabecera: header</h1>

</header>

</div>

</body>

</html>

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

h1 {color: red;}

h1 {color: lime;}

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

Volver