En este ejercicio se analizan los valores especiales de CSS que controlan el comportamiento de la herencia de estilos: inherit, initial, unset y revert. Estos valores determinan cómo se aplica un estilo en función de su jerarquía o del valor por defecto del navegador.
Enunciado
Crea un archivo HTML y CSS con la siguiente estructura y estilos, y analiza el comportamiento de cada uno de los valores:
Código HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejercicio CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="parent">
<p class="default">Texto con estilo por defecto.</p>
<p class="inherit">Texto con <b>inherit</b>.</p>
<p class="initial">Texto con <b>initial</b>.</p>
<p class="unset">Texto con <b>unset</b>.</p>
<p class="revert">Texto con <b>revert</b>.</p>
</div>
</body>
</html>
Código CSS
/* Estilo general */
body {
font-family: Arial, sans-serif;
color: blue;
}
.parent {
font-family: 'Courier New', monospace;
color: red;
}
.default {
font-family: Verdana, sans-serif;
color: green;
}
.inherit {
font-family: inherit;
color: inherit;
}
.initial {
font-family: initial;
color: initial;
}
.unset {
font-family: unset;
color: unset;
}
.revert {
font-family: revert;
color: revert;
}
Respuestas al ejercicio
-
¿Qué estilo toma el texto con inherit?
El texto con inherit adopta exactamente los estilos del elemento que lo contiene. En este caso, hereda el color rojo y la fuente Courier New del contenedor principal (.parent). Esto pasa porque inherit le dice al navegador que copie los estilos de su elemento padre tal cual. -
¿Cómo se comporta el texto con initial?
El valor initial hace que el navegador ignore cualquier herencia o cambio previo y use los valores por defecto definidos en las hojas de estilo del navegador. Por eso, el texto vuelve al color azul (del body) y a la fuente Arial, que es la fuente base configurada en el documento. -
¿Qué sucede con unset?
El valor unset puede comportarse de dos maneras: si la propiedad se hereda normalmente (como color o font-family), actúa igual que inherit; pero si no es heredable, funciona como initial. En este caso, tanto el color como la fuente son heredables, así que el texto hereda el estilo de su padre: color rojo y fuente Courier New. -
¿Cómo actúa revert?
El valor revert le dice al navegador que “vuelva atrás” y use los estilos definidos por defecto en las hojas de estilo del navegador o del usuario, ignorando los definidos en el archivo actual. En este caso, el texto se mostrará con el color por defecto del navegador (generalmente negro) y con la fuente base del sistema.