image
Valora:   3.67/5 de 18
Inicio » CSS » Manual » Avanzado




Herencia de estilos

Por Lola C�rdenas.
rinconprog.metropoli2000.com

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 (<P>...</P>, <DIV>...</DIV>, cabeceras, ...) y etiquetas de elementos insertados en l�nea (<B>...</B>, <I>...</I>, <SPAN>...</SPAN>, ...). 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".

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, <SPAN STYLE="color:red">pero
este trozo de l�nea es de un color distinto,
conservando el resto de propiedades</SPAN>, 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:maroon}

Ver c�digo






Comparte


Aportaciones de usuarios A�adir una aportaci�n



Enlaces
Cocina Facil  
Última modificación:31 de Agosto de 2017. Spain - Espa�a.
© 1998-2004 por . Todos los derechos reservados.