¿Inherit? ¿Ah?
Una palabra algo rara esta del inherit. Y de hecho, algo con el que desde hace poco no habia visto su importancia. Por lo mismo me interesa compartirla en este momento en que por fin sale el sol y calienta algo de este horrible frio.
Inherit = heredar.
Como sabrán, en CSS existe muchas propiedades que heredan sus características a sus hijos (child). Por ejemplo, si definimos en el <body> (como suelo hacer) que la familia tipográfica que utilizaremos será Helvetica, esto será heredado por todos los elementos que estén dentro del <body>:
body {
font-family: Helvetica, Arial, sans-serif;
}
<body>
<h1>Esto será mostrado con Helvetica</h1>
<p>Esto tambien lo hereda</p>
</body>
Esto sucede con mucha frecuencia con propiedades relacionadas con el texto: font-family, font-size, color, text-align, etc. En los casos de las propiedades que no los heredan automáticamente, podemos forzarlo a que lo hagan, precisamente explicitando inherit en esa definición del hijo, como en el siguiente ejemplo:
div#contenedor {
font-size: 14px;
color: chocolate;
border: 2px solid green;
width: 500px;
}
div#contenedor p {
border: inherit;
}
Lo que sucederá en este caso, es que <p> heredará el tamaño de la fuente y su color por defecto ya que estará dentro del div#contenedor; pero como también queremos que herede el borde, le decimos border: inherit; para que lo haga.
Sobre el Autor: Jorge Epuñan
Soy quien escribe en este sitio: diseñador gráfico de profesión, desarrollador web por preferencia y amante de la interacción humano-computador. Cuando no pienso en web, salgo a trotar por mis barrios en Santiago, Chile o me junto con amigos a un bar a conversar sobre nuevas tendencias y tecnologías. Twitter profesional y personal, además del Contacto.
