Propagación de estilos
Herencia de estilos
Las etiquetas de un documento HTML estan organizadas de manera que unas engoblan a otras. Por ejemplo todas las etiquetas se encuentran dentro del TAG <BODY> y otras como <EM> la podemos encontrar entre <P>, <H1>, <UL>, etc...
Esta organización permite una relación padre-hijo de manera que los estilos definidos para etiquetas padres seran heredados por los hijos.
Por ejemplo si definimos:
<STYLE TYPE="text/css">
<!-
BODY {font-family:Arial; color:blue;}
-->
</STYLE>
en principio todo el documento estara con una fuente Arial de color azul.
Esta caracteristica puede resultar muy útil ya que evita tener que volver a definir los mismos estilos para diferentes etiquetas. Es decir con el ejemplo anterior nos evitamos (si nos interesa) tener que volver a definir en la etiqueta <P> la fuente y su color.
El mecanismo de herencia de estilos siempre funciona a menos que un elemento hijo tenga definido su propio estilo, el cual prevalece sobre el heredado e incluso en algunos casos se complementan.
En el siguiente caso:
<HTML>
<HEAD>
<TITLE>Esta es mi primera hoja de estilos</TITLE>
<STYLE TYPE="text/css">
<!-
P {color:blue; font-size:12pt;}
EM {color:red; text-transform:uppercase;}
-->
</STYLE>
</HEAD>
<BODY>
<P>Este es un parrafo donde <B> la etiqueta <B> </B>hereda
el estilo de <P></P>
<P>En cambio <EM> en la etiqueta <EM></EM> al estar definido
prevalece su propio estilo<</P>
</BODY>
</HTML>
Observamos como la etiqueta <B> utilizada para colocar negrita si que remarca el texto pero lo deja en azul ya que hereda ese valor de <P>. En cambio <EM> aparece en mayusculas y verde a pesar de estar dentro de <P> ya que le hemos definido su propio estilo.
Otro caso es por ejemplo el de esta página. En la etiqueta <BODY> se ha definido los margenes que tendra la página y ya no hemos tenido que volver a definirlos ya que el resto de etiquetas lo heredan.
Otro aspecto importante es que esta herencia supone algunas veces una complementación entre los estilos definidos. Por ejemplo como hemos dicho anteriormente en la etiqueta <BODY> hemos definido unos determinados margenes. Luego he definido un estilo para diferenciar el código del resto de los parrafos y he vuelto a definir los margenes pero teniendo en cuenta la cantidad que habia puesto anteriormente.
Aunque hay que tener en cuenta que no todas las propiedades se heredan y que es conveniente tener las especificaciones a mano para ver cuales se heredan y cuales no.
Estilos en función del contexto
Otra característica importante es que podemos dar estilos a un elemento dependiendo de donde se encuentre colocado en la página, es decir a una etiqueta no tiene porque corresponderle siempre el mismo estilo sino que podemos hacer que este dependa de la situación en la que se encuentre.
En el siguiente ejemplo la etiqueta <B> aparece marca texto en rojo en una situación y en azul en otro. Azul cuando se encuentra dentro de un parrafo normal y rojo cuando esta en una lista.
<HTML>
<HEAD>
<TITLE>Esta es mi primera hoja de estilos</TITLE>
<STYLE TYPE="text/css">
<!-
P B{color:blue}
LI B {color:red}
-->
</STYLE>
</HEAD>
<BODY>
<P>Aqui aparece <B> azul </B> ....</P>
<P>En cambio en la siguiente lista aparece...
<UL>
<LI>Aparece <B>rojo</B> ....</LI>
</UL>
</BODY>
</HTML>
El concepto de cascada
A traves del concepto de cascada se establecen las reglas que determinan la forma en que una definición de estilo puede sustituir a otra.
Como ya hemos visto los estilos pueden definirse en varios sitios:
- En un fichero externo .css que luego referenciamos a traves de la etiqueta <LINK> o @IMPORT.
- A traves de un bloque de estilos definidos en la etiqueta <STYLE>.
- O directamente sobre la etiqueta HTML.
La utilización conjunta de estos métodos no es incompatible, sino que en muchos casos necesaria y recomendable. Es decir en una página HTML nos puede interesar utilizar la .css global que utilizamos para toda la Web, y luego otras particulares que definimos para esta página. Esto va a dar lugar a que muchas definiciones de estilo se solapen y entonces la reglas de cascada nos garantizan que manda la última especificación de estilo definida siguiendo el orden jerarquico definido en la lista anterior.
Tutoriales
