Herencia en CSS

Herencia en CSS
COMPÁRTELO:

La aplicación inteligente de este concepto permite definir de manera centralizada todas las propiedades generales de la aplicación (como, por ejemplo, la fuente y su tamaño, el color de fondo, etc.) en lugar de tener que asignar cada vez las mismas propiedades a cada uno de los elementos.

Las hojas de estilo permanecen así escuetas y claras y son fáciles de mantener.

Las propiedades asignadas a determinados elementos pasan como herencia a los elementos hijo. Por supuesto, un elemento también puede pasar en herencia a sus hijos las propiedades heredadas de sus padres.

Pero ¿cómo se produce exactamente una herencia? Veamos cómo sería un código HTML sin herencia:

<div id=”box”>
<p>Texto</p>
<ul>
<li>entrada 1</li>
<li>entrada 2</li>
</ul>
<p>Otro texto</p>
</div>

Supongamos que al texto de Box1 queremos darle una fuente y un tamaño de fuente distintos al resto del documento. Sin herencia, tendríamos que definir explícitamente estás modificaciones para cada tipo de elemento existente en Box, por ejemplo, con ayuda de un selector de descendencia:

#box1 p {
font-family: Arial, sans-serif;
font-size:85%;
}
#box li {
font-family: Arial, sans-serif;
font-size:85%;
}

Después tendríamos que añadir un selector más ara cada tipo de elemento del Box1.

Pero gracias al mecanismo de la herencia es suficiente con un solo selector. Así:

#box {
font-family: Arial, sans-serif;
font-size:85%;
}

La fuente y el tamaño de fuente definidos lo heredan todos los elementos hijo del elemento cuyo id=”box1”, en este caso, los elementos <p> y <li>.

Aquí podemos ver las ventajas que tiene definir cuanto antes propiedades básicas como son las fuentes, los tamaños de fuentes y los colores, por ejemplo para el elemento <body>, de modo que no haya que repetirlas para cada elemento del documento.

Herencias de valores relativos

La herencia de valores relativos como, por ejemplo, los tamaño de fuente en EM, o porcentuales, es muchas veces causa de sorpresas desagradables. Los valores relativos se definen respecto a otras magnitudes. Eso implica que hay que calcular un valor representable (en pantalla) a partir del valor definido en una instrucción. Ese cálculo se realiza en cuatro pasos:

  1. Con base a las instrucciones de todas las hojas de estilo referenciadas se asigna un valor específico.
  2. Teniendo en cuenta la cascada, el valor calculado se desvía y lo heredan los elementos hijo.
  3. En el paso siguiente, se calcula el valor relativo en pixeles. El resultado es el valor que se utiliza, esto es, el valor absoluto y definitivo que se utiliza para el diseño en sí.
  4. Para la representación en pantalla se requiere un valor en pixeles expresado en un número entero. El cuarto y último paso consiste en un proceso de redondeo con el que se averigua el valor actual y se aplica en el elemento correspondiente.
Compártelo:

Profesor de la Universidad de Guadalajara

Hugo Delgado Desarrollador y Diseñador Web en Puerto Vallarta

Profesional en Desarrollo y Posicionamiento Web desde hace más de 10 años continuos.
Contamos con más de 200 constancias y reconocimientos en la trayectoria Académica y Profesional, incluidos diplomados certificados por Google.

ARTÍCULOS RELACIONADOS:

1 Comentarios

  1. Jose

    La aplicación inteligente de este concepto permite definir de manera centralizada todas las propiedades generales de la aplicación

 

Deja un Comentario

Recomendado para ti:

Elementos básicos de un sitio WebElementos básicos de un sitio Web

El diseño Web puede ser fascinante. Crear sitios Web atractivos y profesionales es el sueño de millones de d...

Síguenos en Facebook