Updates
05/09/2006 Inclusión de javascript en la cabecera
04/09/2006 Sustitución de Animación Macromedia Director
02/09/2006 Modificación de la página de Links
10/06/2006 Inclusión de Animación Macromedia Director
Propagación de Estilos
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.
Definición de los estilos
Hasta el momento siempre que hemos definido los estilos estos han ido asociado a una etiqueta HTML.
El problema es que una misma etiqueta tendra que presentar el mismo aspecto en toda la página y esto evidentemente no nos interesa. Hemos visto que utilizando las reglas que determinan la cascada se puede evitar en parte este problema , pero mediante el uso de clases y de la definición de estilos con ID lo solucionaremos completamente.
A traves de ellos asociaremos a un identificador un estilo de manera que luego podamos utilizar este identificador con la etiqueta HTML que nos interese.
Mediante clases
Definiendo los estilos mediante la utilización de clases creamos un estilo, un formato que en principio no esta asociado a ninguna etiqueta HTML y que nosotros podemos asociar con la que queramos a traves del atributo CLASS.
Para definir una clase que identifica un estilo se hace como hasta ahora, lo que cambiamos el nombre de la etiqueta por el nombre de la clase.
.NombreClase {color: blue}
que luego asociaremos a la etiqueta HTML con el atributo CLASS.
<p class="NombreClase">Este parrafo ira en azul.</p>
<h2 class="NombreClase">Y este tambien</p>
pudiendo ser las etiquetas diferentes.
Conviene tener bien clara la utilización de las clases ya que posiblemente sea la forma más habitual de definir los estilos dada la libertad de acción que nos permiten al no obligarnos a presentar una misma etiqueta con el mismo aspecto en toda la página.
Mediante ID
Los ID funcionan de forma similiar a las clases pero están limitados a su utilización con un sólo elemento.
Los ID se definen utilizando el signo "#" seguido por el mombre del identificador y luego las propiedades del estilo.
#NombreID {color: blue}
que luego asociamos a la etiqueta HTML mediante el atributo ID.
<p id="NombreID">Este parrafo ira en azul</p>
Lo importante de definir estilos utilizando ID es que de esa manera identificamos de forma univoca un elemento de la página HTML.
Diferencias entre clases e ID
La principal diferencia entre utilizar un identificador o una clase para definir un estilo es que mediante un ID estamos identificando algún elemento de la página de forma univoca y por tanto sólo lo podemos utilizarlo con ese elemento. Esto se suele hacer porque luego posiblemente querremos realizar alguna acción sobre ese elemento.
Mientras que con una clase estamos definiendo un estilo genérico que luego podremos utilizar sobre cualquier elemento del HTML.
