La palabra clave de herencia de valor se utiliza para heredar una propiedad a un elemento del valor de propiedad de su elemento principal. La palabra clave de herencia se puede utilizar para heredar cualquier propiedad CSS y en cualquier elemento HTML.
La herencia es siempre del elemento principal en el árbol del documento, incluso cuando el elemento principal no es el bloque contenedor.
Sintaxis:
property_name: inherit;
Ejemplo 1: heredar el tamaño de fuente del elemento principal.
<!DOCTYPE html> <html> <meta charset="utf-8"> <head> <style> span { font-size: 10px; } .gfg { font-size: inherit; } </style> </head> <body> <h1 style="text-align: center; color: green;"> GeeksforGeeks </h1> <div style="text-align: center; font-size: 20px;"> <span class="gfg">Inherited size</span> </div> </body> </html>
Producción:
Ejemplo 2: heredar el color del elemento principal.
<!DOCTYPE html> <html> <meta charset="utf-8"> <head> <style> span { color: blue; } .gfg { color: inherit; } </style> </head> <body> <h1 style="text-align:center; color:green;"> GeeksforGeeks </h1> <div style="text-align: center; color: green"> <span class="gfg"> Inherited color is green but span color is set to blue </span> </div> </body> </html>
Producción:
Navegadores compatibles:
- Cromo
- Safari
- Borde
- Firefox
- Ópera