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
Sintaxis CSS
En el momento de definir los estilos debemos tener en cuenta que estos se pueden declarar directamente sobre la etiqueta HTML o que podemos definirlos en su conjunto para toda la página HTML.
Definición en la propia etiqueta html
La sintaxis básica para especificar un estilo en una etiqueta determinada es:
<etiqueta STYLE="propiedad:valor;....">... </etiqueta>
Donde etiqueta representa un TAG estandar del HTML y la palabra STYLE es el atributo que indica que a dicha etiqueta le vamos a asociar un estilo. El resto ya es la definición propia del estilo que viene definido por un par propiedad:valor separados entre si por dos puntos y del resto de pares por un punto y coma.
En propiedad indicamos que caracteristica (tipo de fuente, color, etc...) queremos cambiar y en valor el valor que le damos.
Por ejemplo si a un parrafo le queremos dar un tamaño de fuente 10 y un margen izquierdo de 20 pts.
<P STYLE="font-size:10pt; margin-left:20pt;">
Mi Primer parrafo con Estilo
</P>
Pero la asignación individual a cada etiqueta de los estilos puede resultar un poco pesada también contamos con la posibilidad de definirlos de forma global para toda la página.
Novedades
Para definir una hoja de estilos de forma global en un documento HTML se emplea la etiqueta <STYLE> de la siguiente manera:
<STYLE TYPE="text/css"> <!- ...... Estilos y sus propiedades ...... --> </STYLE>
Observa como la definición de estilos va encerrada entre comentarios para asegurar la compatibilidad con los browsers que no las soporten. Esta sintaxis funciona tanto en Explorer 3.X y superiores como en Opera, Mozilla y Netscape 4, aunque en este último se pueden definir también de forma propietaria utilizando Javascript.
La definción del estilo se realiza de forma similar a la indicada arriba:
etiqueta {propiedad:valor; .........}
con la diferencia de que colocamos entre llaves {} la definción del estilo.
Un ejemplo típico sería:
<STYLE TYPE="text/css">
<!-
H1 {color:blue;}
P {font-size:10pt; marginleft:20pt;}
-->
</STYLE>
donde estamos indicando que todo el texto que se encuentra entre las etiquetas <H1></H1> sera de color azul , y el que esta entre las etiquetas <P></P> sera de un tamaño de 10 ptos. y tendra un margen izquierdo de 20 ptos.
Otro detalle interasante es que podemos introducir comentarios en un hoja de estilos mediante las etiquetas /*........*/ de la misma manera que se hace por ejemplo en el lenguaje C.
Colocando las hojas de estilo
Dentro del documento HTML
Cuando hacemos una definción en grupo de una hoja de estilos utilizando la etiqueta <STYLE> esta tiene que estar colocada en la cabecera del documento HTML es decir dentro de la etiqueta <HEAD>.
<HTML>
<HEAD>
<TITLE>Esta es mi primera hoja de estilos</TITLE>
<STYLE TYPE="text/css">
<!-
H1 {color:blue;}
P {font-size:10pt; marginleft:20pt;}
-->
</STYLE>
</HEAD>
<BODY>
<H1>Texto Azul</H1>
<P>Fuente de tamaño 10 ptos. y margen izquierdo 20</P>
</BODY>
</HTML>
En un fichero .CSS
Pero también podemos definirlas en un fichero externo y luego referenciarlas desde el código HTML. Esta es sin duda alguna una de sus mayores virtudes, ya que nos permite crear una misma hoja de estilos para toda la Web que luego llamamos desde cada una de las páginas. De esta manera, cambiando el fichero que contiene la hoja de estilos podemos cambiar el aspecto de toda la web.
Existen dos maneras de enlazar las hojas de estilo.
Haciendo uso de la etiqueta <LINK>
<HTML> <HEAD> <LINK REL="stylesheet" TYPE="text/css" HREF="hoja_estilos.css"> </HEAD> ...... </HTML>
O utilizando la etiqueta @IMPORT
<HTML>
<HEAD>
<STYLE TYPE="text/css">
@IMPORT URL("hoja_estilo.css")
</STYLE>
</HEAD>
......
</HTML>
El fichero hoja_estilos.css es un simple fichero de texto con extensión .css en el que definimos la hoja de estilo en función de la sintaxis que hemos descrito anteriormente.
/*Fichero hoja_estilos.css*/
<!-
H1 {color:blue;}
P {font-size:10pt; marginleft:20pt;}
-->
/*Fin del fichero hoja_estilo.css*/
