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:
Cuando dos declaraciones afectan a un mismo elemento hay que calcular la tupla (A, B,C,D) ganadora de todas las reglas CSS que compiten. "A" tiene el máximo peso y "D" el mínimo. Si hay empate en "A" se mira "B" y así sucesibamente.
| A => | Estilos de línea |
| B => | ID |
| C => | Clases |
| D => | 1 elemento html |
Las líneas marcadas con negrita incluyen en parte o en su totalidad código añadido sobre el original del ejercicio.
Código |
| |
|---|---|---|
| 1 <!doctype html> | ||
| 2 <html> | ||
| 3 <head> | ||
| 4 <meta charset="utf8"> | ||
| 5 <title>Herencia</title> | ||
| 6 <style type="texte/css"> | ||
| 7 #caja header h1 { color: yellow; } | (0,1,0,2) | |
| 8 #caja .cabecera h1 { color: grey; } | (0,1,1,1) | |
| 9 .cabecera header h1 { color: orange } | (0,0,1,2) | |
| 10 .cabera h1 { color: red; } | (0,0,1,1) | |
| 11 header {color: black; } | (0,0,0,1) | |
| 12 table {...se omite...} | ||
| 13 </head> | ||
| 14 <body> | ||
| 15 <div id="caja"> | ||
| 16 <header class="cabecera"> | ||
| 17 <h1 style="color:blue"> Cabecera: header </h1> | (1,0,0,0) | |
| 18 </header> | ||
| 19 ... continúa... |
Atendiendo a la tabla mostarda más arriba en el apartado "Indicaciones" vemos como la dupla ganadora ese encuentra en la línea 17 (1, 0, 0, 0). Por eso el color del texto del <header> podemos verlo azul.