¿Inherit? ¿Ah?

6/ago/2007 7

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.

Ver ejemplo

Comentarios

  1. Maximiliano [#]

    Hola Jorge…
    Muy buena la propiedad, yo hasta ahora la implemento.
    Solo quería comentar que el único elemento que hasta ahora se que no hereda la propiedad es el :( al que hay que decirpe personalmente “qué familia de fuente usar”.
    Saludos y felicitaciones por el CSSlab

  2. Maximiliano [#]

    :( el editor me tragó el textarea (si puedes eliminar el comentario anterior y dejar este qeu está correcto, gracias)

    Hola Jorge…
    Muy buena la propiedad, yo hasta ahora no la implemento.
    Solo quería comentar que el único elemento que conozco que no hereda la propiedad “font-family” es el textarea, al que hay que decirle personalmente “qué familia de fuente usar”.
    Saludos y felicitaciones por el CSSlab

  3. Arcadio [#]

    Como siempre…. propiedades que estaban alli y ni idea para que servian… gracias.. excelente web.

  4. Diego [#]

    Muy buena la porpiedad, en si CSS-LAB, esta Exelente…

  5. fearlex [#]

    Muy buen dato, me viene muy bien. 😀

  6. seba [#]

    Que buena propiedad, muy util para ahorrar código… Cuando se viene otro podcast???

    Saludos!

  7. asdasdsa [#]

    asdasdasdsa

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab