An Interest In:
Web News this Week
- April 21, 2024
- April 20, 2024
- April 19, 2024
- April 18, 2024
- April 17, 2024
- April 16, 2024
- April 15, 2024
Some of Our Sources
- BoingBoing
- Just Creative
- Smashing Magazine
- Fudge Graphics
- 24 Ways
- Spyre Studios
- Web Resource Source
- Daily Now
- Hashedout
- The Verge
Help Webnuz
Referal links:
La Herencia en CSS
Hola gente bonita!
Hay una ltima manera en la que un elemento puede recibir estilos: la herencia. La cascada se confunde frecuentemente con el concepto de herencia. Aunque los dos temas estn relacionados, debes entender cada uno por separado. Si quieres conocer sobre la cascada te invito a leer mi articulo de este tema:
Qu es la herencia?
Vamos a comenzar por una analoga que me gusta usar mucho.
Muchas veces los nios y nias heredan rasgos de sus padres: el color de los ojos, el color del cabello, la estatura, etc. A veces heredamos rasgos de antepasados ms lejanos, como abuelos o bisabuelos. La metfora de las relaciones familiares tambin forma parte de la estructura del HTML. Y al igual que las personas, las etiquetas HTML pueden heredar propiedades CSS de sus antepasados.
Los descendientes (piense en hijos y nietos) heredan propiedades de los ancestros (piense en padres y abuelos).
La herencia es el proceso por el cual algunas propiedades CSS aplicadas a una etiqueta se pasan a las etiquetas anidadas.
Si un elemento no tiene un valor en cascada para una determinada propiedad, puede heredar uno de un elemento antecesor. Es comn aplicar la propiedad font-family al elemento <body>. Todas las etiquetas descendientes de la etiqueta <body>, es decir, las que estn dentro de la etiqueta <body> heredarn esta fuente y no es necesario aplicarla explcitamente a cada elemento de la pgina.
NOTA: Cualquier etiqueta dentro de otra etiqueta es descendiente de esa etiqueta. por ejemplo, una etiqueta <p> dentro de la etiqueta <body> es descendiente de <body>, mientras que la etiqueta <body> es un ancestro de la etiqueta <p>.
La herencia tambin funciona a travs de mltiples generaciones. Si una etiqueta como <em> o <strong> aparece dentro de una etiqueta <p>, entonces las etiquetas <em> y <strong> tambin
heredan las propiedades de cualquier estilo aplicado a la etiqueta <body>.
La siguiente imagen muestra cmo la herencia fluye hacia abajo en el rbol del DOM. Las propiedades heredadas se transfieren por el rbol DOM desde los nodos padres a sus descendientes.
Como puedes notar en la estructura del rbol cada elemento solo tiene un padre directo.
No todas las propiedades se heredan
La herencia no es todopoderosa, no todas las propiedades se heredan. Por defecto, slo algunas, las que son principalmente propiedades que pertenecen al texto:
color, font, font-family, font-size, font-weight, font-variant, font-style, line-height, letter-spacing, text-align, text-indent, text-transform,white-space, y word-spacing.
Tambin se heredan algunas otras, como las propiedades de la lista:
list-style, list-style-type, list-style-position, y list-style-image.
Las propiedades del borde de la tabla, border-collapse y border-spacing, tambin se heredan. Tenga en cuenta que stas controlan el comportamiento de los bordes de las tablas, NO las propiedades para especificar los bordes de los elementos que no son tablas. No queremos que un <div> pasara su borde a todos los elementos descendientes Verdad?.
Como podemos ver la herencia no siempre se aplica, y eso NO es necesariamente algo malo. Para algunas propiedades, la herencia tendra un efecto negativo en la apariencia de una pgina. Los mrgenes, el padding y los bordes (entre otras propiedades) no son heredados por las etiquetas y no es deseable que lo hagan. Por que?
Mira el siguiente ejemplo:
<p> Lorem ipsum <em> dolor </em> sit amet. </p>p { padding-left: 20px; border-left: solid red;}Observa que la etiqueta <p> tienen un borde a la izquierda. Sin embargo, la etiqueta <em> dentro de <p> no tienen ningn borde adicional. Este comportamiento tiene sentido: se vera raro o extrao si hubiera un borde adicional y 20px de espacio a la izquierda de cada etiqueta <em> dentro de un prrafo. Por este motivo es que la propiedad border no se hereda.
Por que es importante la herencia?
Aunque esto pueda parecer confuso, la herencia es un gran ahorro de tiempo. Imagina que no se pasan las propiedades CSS a las etiquetas anidadas y que tienes un prrafo <p> que contiene otras etiquetas como una etiqueta <strong>, una etiqueta <em> para enfatizar el texto y una etiqueta <a> para aadir un enlace.
Si creas un estilo que haga que el texto del prrafo sea blanco y de 32px, sera raro y extrao que todo el texto dentro de las etiquetas <em>, <strong> y <a> tuvieran su estilo normal, tal y como se muestra en la siguiente imagen de muestra:
En ese caso, tendras que crear otro estilo para dar formato a la etiqueta <em>, <strong> y <a> para que coincida con la apariencia de la etiqueta <p>. Qu tedioso. Por eso esta la herencia y por eso es importante!
Libros de CSS consultados para este tema:
- CSS in Depth
- CSS The Missing Manual
- CSS The Definitive Guide
Gracias por leer
Mis redes sociales donde comparto notas de cdigo:
Original Link: https://dev.to/lupitacode/la-herencia-en-css-6md
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To