Herencia en CSS
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..
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:
- Con base a las instrucciones de todas las hojas de estilo referenciadas se asigna un valor específico.
- Teniendo en cuenta la cascada, el valor calculado se desvía y lo heredan los elementos hijo.
- 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í.
- 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.
ChatGPT Gratis
Realiza preguntas sobre cualquier tema
¡Participa!
¡Compártelo en tus Redes Sociales!CITAR ARTÍCULO
Para tareas, investigaciones, tesis, libros, revistas, blogs ó artículos académicos
Referencia en Formato APA:
Delgado, Hugo. (2014).
Herencia en CSS.
Recuperado 24 de abril, 2024, de
https://disenowebakus.net/herencia-en-css.php
CONTINÚA APRENDIENDO
TAMBIÉN MERECE LA PENA VISITAR:
La accesibilidad Web significa que personas con algún tipo de discapacidad van a poder hacer uso de...
El cuadro modelo define y describe el área rectangular reservada a cada elemento de página...
Las hojas de estilo en cascada definido por primera vez en 1996, ofrecen propiedades para ampliar...
La accesibilidad Web significa que personas con algún tipo de discapacidad van a poder hacer uso de...
¿Te gustaría aprender más sobre Diseño Web?
Conoce todos los cursos y tutoriales que tenemos para ti completamente gratis
Aprender Diseño Web¿Todavía no encuentras lo que necesitas?
Usa nuestro buscador interno para descubrir más informaciónContenido relacionado:
1 Comentario en "Herencia en CSS"
Deja tu Comentario
PATROCINADOR
Tu negocio también puede aparecer aquí. Más información
La aplicación inteligente de este concepto permite definir de manera centralizada todas las propiedades generales de la aplicación