La herencia es un concepto que vemos en nuestro día a día. Los niños heredan características como la altura, los ojos, la nariz, etc. de sus padres. La herencia es uno de los conceptos centrales del lenguaje oops (lenguaje de programación orientado a objetos). En el que derivamos las propiedades de una clase en otra para una jerarquía. La clase que hereda se convierte en una clase secundaria y de la que se toma se convierte en una superclase o una clase principal.
Herencia CSS: en la herencia CSS, el elemento secundario heredará naturalmente las propiedades de su elemento principal.
Sintaxis:
<style>
#parentclass {
color: red;
}
</style>
<div id="parentclass">
Parent Div
<div id="div1Child">Child Div 1</div>
<div id="div2Child">Child Div 2</div>
</div>
Aquí parentclass pasa un estilo CSS hecho como color para ser rojo. Mientras que las clases secundarias div1Child y div2Child no tienen un conjunto de reglas de color: rojo establecido para ellas pero se muestran en rojo.
Es porque los div 1 y 2 del niño heredaron las propiedades del padre, es decir, la clase padre.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
#parentclass {
color: black;
}
#child1 {
color: green;
}
#childchild1 {
color: red;
}
</style>
</head>
<body>
<div id="div1">
Parent
<div id="child1">
Child 1
<div id="childchild1">
Child Child 1
<div id="childchildchild1">
Child Child Child
</div>
</div>
<div id="childchild2">
Child Child 2
</div>
</div>
<div id="child2">
Child 2
</div>
</div>
</body>
</html>
Producción:
Producción
Aquí #parentclass tiene color: negro, #child1 tiene color: verde y #childchild1 tiene color: rojo. En el código anterior, #child1 y #child2 están en #parentclass, por lo que ambos deberían heredar el color negro, pero solo el niño 2 obtiene el color porque le dimos #child1 al color: verde, esto se conoce como especificidad.
Propiedades CSS que se pueden heredar.
No podemos heredar todas las propiedades/reglas de CSS. Todas las propiedades de font-* se heredan naturalmente como
• tamaño de
fuente • familia de
fuentes • peso de
fuente • estilo de fuente, etc.
La propiedad de color también se hereda.
Las propiedades CSS como la altura, el borde, el relleno, el margen, el ancho, etc. no se heredan de forma natural. Podemos heredar propiedades CSS no heredables. Usamos heredar para hacerlo.
Heredar CSS:
Usamos heredar en una propiedad CSS para tomar la propiedad del elemento de su padre. Digamos que tenemos un código:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
#parentclass {
padding: 30px;
color: red;
}
#Child {
padding: inherit;
}
</style>
<body>
<div id="parentclass">
Parent
<div id="Child">Child</div>
</div>
</body>
</html>
Salida :
Producción
De esta forma, heredamos propiedades CSS no heredables usando la herencia. Solo el elemento secundario directo de un elemento principal puede heredarlo, pero el nieto no. En su lugar, recurrirá a su altura original calculada por el navegador.
Publicación traducida automáticamente
Artículo escrito por VishnuBharadwaj y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA