CSS Herencia de Estilos

En el conjunto de las etiquetas HTML podemos establecer una jerarquía de etiquetas que contienen a otras, para darnos una relación de herencia. En primer lugar, tendríamos la etiqueta <BODY> … </BODY>, que hace referencia a todo el documento, y podemos considerarla como la etiqueta «padre» de todas las demás etiquetas de formato, puesto que todas ellas se encuentran contenidas en el cuerpo (body) del documento.

Después, tenemos las etiquetas de párrafo (…, <DIV>…</DIV>, cabeceras, …) y etiquetas de elementos insertados en línea (…, …, …, …). Las etiquetas de párrafo serán contenedoras de las etiquetas de elementos insertados en línea (en el sentido que les estamos dando), estableciéndose así una nueva relación «padre-hijo».

Esto es interesante porque la mayoría de los estilos que se definen se heredan, es decir, si definimos un cierto estilo para una etiqueta, este estilo será heredado por las etiquetas «hijas», con lo que no tendremos que volver a definirlo para ellas. Por ejemplo, si definimos un tipo de letra y un color para la fuente para la etiqueta <BODY> … </BODY>,este estilo será heredado por todas las etiquetas del documento y no tendremos que definirlo para las otras etiquetas.

Sin embargo, si tenemos definido un estilo para una etiqueta «padre», podremos definir un estilo distinto para una etiqueta «hija», es decir, un estilo heredable se hereda a no ser que especifiquemos lo contrario. Se heredarán aquellas características que no pongamos, y se aplicarán aquellas que definamos para la etiqueta que no tenga la etiqueta «padre».

CSS Herencia de Estilos

Veamos un ejemplo:

<!– Manual de CSS de WebEstilo.com –>
<HTML>
<HEAD>
<TITLE> Ejemplo 1 de herencia </TITLE>
<LINK REL=»stylesheet» TYPE=»text/css» href=»ejemplo.css»>
</HEAD>
<BODY BGCOLOR=white>

Todo el texto tiene definido el estilo Fuente:Verdana,
Tamaño:x-small, Margen izquierdo:0.25in, Margen
derecho:0.25in, pero
este trozo de línea es de un color distinto,
conservando el resto de propiedades, y
eso hace interesante la herencia y la posibilidad
de cambiar en partes concretas los estilos heredados.

</BODY>
</HTML>

Ejecutar ejemplo Ver código

ejemplo.css

/* Manual de CSS de WebEstilo.com */
/* Definición de estilos en un archivo aparte */

/* Estilo para el documento */
BODY {font-family:Verdana,sans-serif;font-size:x-small;
margin-left:0.25in; margin-right:0.25in}

/* Estilo para la cabecera de nivel 2 */
H2 {font-family:Verdana,sans-serif; font-size:14pt;color:red}

/* Estilos para otras etiquetas */
B, TD {font-family:Verdana,sans-serif;font-size:x-small;
color:olive}
TH {font-family:Verdana,sans-serif;font-size:x-small;
color:white;background-color:#0080C0}
PRE, TT, CODE {font-family:Courier New,Courier;
font-size:9pt;color:#0080C0}