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>
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}
Usuarios que han visto este tema también han visto...
- Fondo para campos textarea en CSS
- Enlazar hoja de estilos
- Pseudo-elementos tipograficos
- CSS para imprimir páginas web
- Menú con efecto onmouseover con CSS
- Versión imprimible de este documento
- Enviar por e-mail este documentoInformación legal | Política de Privacidad | Contacte con nosotros
Otro proyecto de Factoría de Internet. Copyright© 2003-2008 Factoría de Internet S.L.. Todos los derechos reservados.