Introducción a las hojas de estilo y su utilización básica con documentos HTML

Básicamente, una hoja de estilos es un conjunto de especificaciones de formato que se aplican a los elementos HTML.

NOTA: En este documento se hace referencia a CSS1 (http://www.w3.org/TR/REC-CSS1).

La idea detrás de CSS es que exista una separación entre los contenidos por un lado y la forma de presentarlos por otro.

Por ejemplo, con CSS es posible especificar con una simple línea de código que todos los títulos <H1>…</H1> que aparecen en el documento HTML lo hagan en color azul y en cursiva.

<style type = “text/CSS”>
<!–
H1
{
font-style: italic;
color: blue;
}
–>
</style>

La definición de los estilos se lleva a cabo dentro de la marca <STYLE>. Cada especificación de formato (regla CSS) está formada por un par propiedad: valor y puede hacer referencia a un elemento o a un contexto.

El contenido de la marca STYLE se suele encerrar entre comentarios para evitar que los navegadores que no soportan CSS visualicen esa información.

El elemento que se utiliza en la definición de la regla (es decir, aquel al que se le aplicará el formato definido) recibe el nombre de selector. En el ejemplo anterior el selector es la marca H1. Todos los elementos H1, o dicho de otra forma, todo lo que esté situado entre el inicio <H1> y el final </H1> de estos elementos es la selección a la que se le aplica el formato especificado en el bloque de declaración de estilos.

El selector puede ser un elemento determinado:

H1 { text-transform:uppercase; font-style:italic; }

En este caso el texto marcado como H1 en cualquier punto del documento HTML aparecerá en mayúsculas y cursiva.

También es posible definir una clase (identificada por un nombre) que puede ser utilizada por cualquier selector (elemento):

all.ClaseTextoRojo { color:red; }

…equivalente a…

.ClaseTextoRojo { color:red; }

Para utilizar esta clase basta con añadir al selector el atributo CLASS = NombreDeClase. Por ejemplo:

<P CLASS = ClaseTextoRojo>
Este texto aparece en color rojo
</P>

O también se puede restringir la utilización de una clase a ciertos elementos:

H2.ClaseTextoVerde { color:green; }
P.ClaseTextoVerde { color:green; }

Así, sería correcto escribir:

<H2 CLASS = ClaseTextoVerde>El texto aparece verde</H2>

Pero no sería correcto:

<H1 CLASS=ClaseTextoVerde>
Error, para este elemento no está definida la clase
</H1>

Y por lo tanto no tendría ningún efecto.

Ejemplo:

<HTML>
<HEAD>
<TITLE> Utilización de las clases de estilo </TITLE>
<STYLE type = “text/CSS”>
<!–
H1 {
font-style: italic;
color: blue;
}
H2.ColorTextoVerde { color:green; }
.ColorAmarillo { color:yellow; }
–>
</STYLE>
</HEAD>
<BODY>
<h2>Este texto aparece normal</h2>
<h2 class=ColorTextoVerde>Este texto aparece de color verde</h2>
<h1 class=ColorTextoVerde>Este texto aparece azul y en cursiva</h1>
<h2 class=ColorAmarillo>El texto aparece amarillo</h2>
</BODY>
</HTML>

El selector también puede ser un determinado contexto. Por ejemplo, puede que nos interese aplicar un estilo concreto a los textos marcados con negrita dentro de un identificador H1.

La declaración de un selector de contexto se realiza indicando los identificadores que lo componen comenzando por el más externo:

H1 B {color:red; }
<!– Negrita dentro de un identificador H1 — >

Ejemplo:

<HTML>
<HEAD>
<TITLE></TITLE>
<STYLE type = “text/CSS”>
<!–
H1 B { color: red; }
–>
</STYLE>
</HEAD>
<BODY>

<h1>Texto normal</h1>
<b>Texto negrita normal</b>
<h1>La parte negrita en color<b>rojo</b></h1>
<b>No aparace texto en<h1>rojo</h1></b>

</BODY>
</HTML>

Se pueden definir estilos dentro de elementos concretos. Aunque esta opción no aprovecha las ventajas de modularidad que ofrece CSS:

<H1 style=”color:red”>Título en color rojo</H1>
<– mejor: –>
<H1 class = “ColorRojo”>Título en color rojo</H1>
<– mucho mejor: –>
<H1 class = “ColorPrincipal”>Título en color principal</H1>

Ejemplo: Definición de un estilo de clase que presente el texto en color azul marino y en negrita-cursiva…

<HTML>
<HEAD>
<TITLE>CSS Ejemplo </TITLE>
<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>

Ejemplo: Añade al documento anterior un nuevo estilo = títulos H1 en color azul…

<STYLE type=”text/CSS”>
<!–
all.NEGRITACURSIVAAZUL
{
color:navy;
font-style:italic;
font-weight:bold;
}

H1 { color: blue; }
– >
</STYLE>

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:blue) …

<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:

H1 { color:red; }

Artículo (C) Epsilon Eridani.

Introducción a las hojas de estilo y su utilización básica con documentos HTML

Sentencias de control en JavaScript

Jerarquía de objetos en JavaScript: objeto DOCUMENT

Las variables en JavaScript

El objeto DATE (fecha) en JavaScript

Objetos en JavaScript

» CSS