Introducción
a las hojas de estilo y su utilización básica con documentos
HTML
MODULARIDAD
Una
de las ventajas de las hojas de estilo es que se pueden definir tantas
como se quiera en el mismo documento.
El
ejemplo anterior también se podría poner como:
<HTML>
<HEAD>
<TITLE>CSS Ejemplo 2</TITLE>
<STYLE type="text/CSS">
H1 { color: blue; }
</STYLE>
<STYLE type="text/CSS">
all.NEGRITACURSIVAAZUL
{
color:navy;
font-style:italic;
font-weight:bold;
}
</STYLE>
</HEAD>
<BODY>
<H1>Ejemplo
1</H1>
<P CLASS="NEGRITACURSIVAAZUL">
Párrafo de color azul marino en negrita-cursiva.
</P>
</BODY>
</HTML>
De esta forma el diseñador puede construir una librería
de estilos que posteriormente incorporará a los documentos según
sus necesidades.
Además,
es posible escribir las hojas de estilos en ficheros independientes
que son cargados explícitamente a través de la directiva
<LINK>.
Para
el ejemplo anterior se puede crear un fichero con cada uno de los estilos:
Fichero "neg_cur_azul.css" ...
all.NEGRITACURSIVAAZUL
{
color:navy;
font-style:italic;
font-weight:bold;
}
Fichero "h1_azul.css":
H1
{ color: blue; }
Y cargar posteriormente dichos estilos en el documento:
<HTML>
<HEAD>
<TITLE>CSS Carga de ficheros de estilo</TITLE>
<LINK REL=STYLESHEET TYPE="text/css" HREF="neg_cur_azul.css">
<LINK REL=STYLESHEET TYPE="text/css" HREF="h1_azul.css">
</HEAD>
<BODY>
<H1>Ejemplo
1</H1>
<P CLASS="NEGRITACURSIVAAZUL">
Párrafo de color azul marino en negrita-cursiva.
</P>
</BODY>
</HTML>
De esta forma se pueden llevar a cabo cambios en un documento HTML…
¡sin editarlo!. Sólo haciendo cambios en los ficheros de
estilo.
Si
se planifica un poco la estructura de estilos se pueden conseguir páginas
web espectaculares, con un estilo homogéneo y sin sobrecarga
de código.
En
general, las propiedades especificadas para un determinado elemento
son heredadas por los elementos hijos (o elementos anidados) a menos
que se anulen explícitamente con nuevas propiedades para el elemento
interior.
Ejemplo:
Una palabra enfatizada dentro de un título H1
(el texto dentro de <EM>…</EM>
hereda la propiedad ‘color:azul’) ...
<HTML>
<HEAD>
<TITLE></TITLE>
<LINK REL=STYLESHEET TYPE="text/css" HREF="neg_cur_azul.css">
<LINK REL=STYLESHEET TYPE="text/css" HREF="h1_azul.css">
</HEAD>
<BODY>
<CENTER><H1>Ejemplo
<EM>3</EM> de CSS</H1></CENTER>
<P CLASS="NEGRITACURSIVAAZUL">
Párrafo de color azul marino en negrita-cursiva.
</P>
</BODY>
</HTML>
Para sacar el texto enfatizado en color rojo bastaría con especificarlo
explícitamente:
<H1>Ejemplo
<EM STYLE="color:red">3</EM> de CSS</H1>
<H1>Ejemplo <EM><FONT COLOR="red">3</FONT></EM>
de CSS</H1>
En caso de colisión o solapamiento de estilos, siempre tendrá
prioridad el más interno, el más cercano a la selección.
También
puede ocurrir que existan varias definiciones de estilo para el mismo
elemento. La definición válida será la última
(anula a las anteriores).
<HTML>
<HEAD>
<TITLE>Colision de estilos</TITLE>
<STYLE type = "text/CSS">
<!--
H1 { color:blue; }
H1 { font-style: italic; }
H1 { color:red; }
-->
</STYLE>
</HEAD>
<BODY>
<h1>Texto
rojo cursiva</h1>
</BODY>
</HTML>
En el ejemplo anterior, el segundo estilo no colisiona con el primero
ya que hacen referencia a propiedades distintas. Sin embargo, el tercero
(color:red) colisiona con el primero y lo anula.
Esto
puede ser muy útil para modificar algunas propiedades de estilos
situados en ficheros externos. Supongamos un fichero externo con la
siguiente definición de estilo:
H1
{
text-transform:uppercase;
font-style:italic;
color: blue;
}
Y a la hora de utilizarlo nos interesa mostrar el texto en color rojo
en lugar de hacerlo en azul, no será necesario modificar el fichero
de estilo. Simplemente añadiríamos en nuestro documento:
