Hoja De Estilo: Declaración de una hoja de estilo

Las hojas de estilo no están directamente integradas en las recomendaciones HTML de W3C. Por tal razón, se debe incluir elementos en el código HTML que indiquen tanto el tipo de documento, es decir la versión de HTML y las recomendaciones CSS utilizadas por la página, como los estilos mismos.

Declaración de tipo de documento

En la página HTML se debe incluir una declaración de tipo de documento, una referencia a la norma HTML que se está usando. La declaración se hace al agregar una línea como ésta:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
 <HEAD>...</HEAD>
 <BODY>Contenido de la página</BODY>
</HTML>

Además, puede utilizarse un metatag para indicarle al navegador o a los motores de búsqueda qué idioma se ha utilizado para definir las hojas de estilo. Este metatag, incluido en el encabezado HTML del documento, se asemeja a lo siguiente:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
 <HEAD>
  <META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
 </HEAD>
 <BODY>Contenido de la página</BODY>
</HTML>

Incorporación de estilos

Se pueden incorporar estilos a un documento HTML de cuatro formas distintas:

Estilo de documento: se declara en el encabezado, es decir, dentro de las etiquetas <HEAD> y </HEAD>.
Estilo en línea, tiene el mismo significado que los atributos de las etiquetas.
Estilo externo, se declara en un archivo separado con la extensión .css
Estilo importado, se declara en un archivo separado con la extensión .css

Estilo de documento

Las hojas de estilo de una página Web se declaran por medio de la etiqueta STYLE, que se ubica dentro de las etiquetas <HEAD> y </HEAD>.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
 <HEAD>
  <STYLE type="text/css">
  <!--

  Definiciones de estilo;

  -->
  </STYLE>
 </HEAD>
<BODY></BODY>
</HTML>

El tipo de atributo ="text/css" en la etiqueta <STYLE> se utiliza para especificar el tipo de hoja de estilo que se usa. Las etiquetas de comentario  se usan para prevenir que los navegadores antiguos, que no son compatibles con las hojas de estilo, muestren esta información en la pantalla.

Estilo en línea

También se puede definir el estilo dentro de las etiquetas de un documento. Este tipo de declaración se denomina declaración en línea.

No se recomienda este método para definir hojas de estilo porque va en contra del propósito mismo de las hojas de estilo, ya que el estilo está integrado dentro de cada elemento por separado. No obstante, puede utilizarse para definir un estilo especial para algún elemento HTML en particular, que no necesita una definición universal.

Para definir un estilo en línea, simplemente se debe agregar el atributo STYLE a la etiqueta HTML a la que se quiera aplicar un estilo en particular:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
 <HEAD>
 ...
 </HEAD>
<BODY>
...
<ETIQUETA Style="style:valor;"> ... </ETIQUETA>
...
</BODY>
</HTML>

Un estilo puede aplicarse "en línea" a cualquier etiqueta HTML, exceptuando lo siguiente: BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, STYLE, TITLE

A continuación encontrará un ejemplo de un estilo aplicado a una etiqueta <H1>:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
 <HEAD>
 ...
 </HEAD>
<BODY>
...
<H1 Style="Font: 18px Verdana; font-weight:bold;"> Título </H1>
...
</BODY>
</HTML>

Estilo externo

Es una ventaja poder almacenar definiciones de hojas de estilo fuera del documento ya que por lo tanto es posible, al editar el archivo que contiene las hojas de estilo, cambiar la apariencia de todas las páginas Web que utilizan esa hoja.

El primer paso es crear un archivo de texto que contenga las hojas de estilo, cuya extensión es .css, por ejemplo style.css:

<!--
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
 body {background-image: home.gif;}
 LI  {font: 13px Verdana;}
 B  {font: 14px Verdana; font-weight: bold;}
 A  {
     font:12px Verdana;
     font-weight: bold;
     color=black;
     text-decoration: none;
   }
 H1  {font: 16px Arial;font-weight: bold;color=black;}
 H2  {font: 14px Arial;font-weight: bold;color=black;}
-->

A continuación, se debe agregar en cada página HTML un acceso directo a la página con las definiciones de estilo:

<HTML>
 <HEAD>
  <LINK rel="stylesheet" type="text/css" href="style.css">
 </HEAD>
...

La etiqueta <LINK> le indica al navegador que debe buscar un documento situado fuera de la página HTML.
El atributo rel="stylesheet" especifica que el documento en cuestión es una hoja de estilo externa.
El atributo type="text/css" especifica el tipo de hoja de estilo.
El atributo href=" URL " muestra la URL de la hoja de estilo (su ubicación en Internet).

Estilo importado

Por último, las recomendaciones de W3C también ofrecen una manera de incluir hojas de estilo en un documento: importar las hojas de estilo. Es posible importar hojas de estilo externas cuando se declara el estilo del documento al insertar el comando @IMPORT inmediatamente después de la etiqueta de estilo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
 <HEAD>
  <STYLE type="text/css">
  <!--
  @IMPORT URL (url de la hoja a importar);

  Definición de los estilos del documento;

  -->
  </STYLE>
 </HEAD>
<BODY></BODY>
</HTML>

Si existen muchas definiciones importadas que afecten todas a la misma etiqueta, el navegador sólo utilizará la última.

Las etiquetas <SPAN> y <DIV>

En ocasiones, dentro de un mismo párrafo, se deben aplicar estilos diferentes a ciertos segmentos de texto y es para ello que se utilizan las etiquetas <SPAN> y <DIV>.

La etiqueta <SPAN>

La etiqueta <SPAN> se utiliza para aplicar estilos a los segmentos de un párrafo.
Se puede usar con ID o con CLASS.
Su sintaxis es:

<SPAN class=Nonmbre_de_la_clase> Texto </SPAN>

La etiqueta <DIV>

En lugar de aplicar estilos a unas pocas palabras dentro de un párrafo, esta etiqueta los aplica a un bloque de texto, que puede ser un párrafo o varios.

La sintaxis de la etiqueta DIV es:

<DIV class=important> párrafos </DIV>

Estilos en cascada

Con la utilización de los distintos métodos de implementación CSS se pueden definir múltiples estilos. Por tal razón, activar varias hojas de estilo externas da como resultado lo que se denomina estilo en cascada, una combinación de estilos para diferentes elementos HTML. Si varios estilos afectan al mismo elemento, se mantendrá solamente el último.

<LINK rel=stylesheet type="text/css" href="style1.css">
<LINK rel=stylesheet type="text/css" href="style2.css">
<LINK rel=stylesheet type="text/css" href="style3.css">

Cuando diversos estilos están en conflicto en las hojas de estilo externas, las recomendaciones CSS les permiten a los usuarios elegir entre varias hojas de estilo alternativas mediante el atributo rel de la etiqueta STYLE en combinación con el atributo TITLE para seleccionarlas por nombre:

<LINK rel="alternate stylesheet" type="text/css" href="style1.css" title="style1">
<LINK rel="alternate stylesheet" type="text/css" href="style2css" title="style2">
<LINK rel=stylesheet type="text/css" href="style2.css">

Además, cuando se activan múltiples estilos dentro de una página al utilizar varios métodos de inclusión posibles y algunos estilos entran en conflicto, se aplica el estilo más próximo al contenido. La prioridad, en orden descendente, es la siguiente:
Estilo en línea > estilo de documento > estilo importado > estilo externo

Hoja De Estilo

lunes, 18 de julio de 2011

Declaración de una hoja de estilo