[Indice]


Estilos

¿Un nuevo estándar?

Con lo que hasta aquí llevamos visto de HTML, ya te habrás dado cuenta de que, cuando vas a crear un documento, se te presentan dos cuestiones básicas: la lógica, es decir, la estructura del documento (¿se pone un índice? ¿una barra de navegación?, ¿menús desplegables?, ¿con frames o sin frames?) y la física, que es la presentación o estética general del documento y sus contenidos, como las cabeceras, párrafos, pies, tipos de letra y colores, etc., las dos cosas juntas, a menudo, pueden ser complicadas de resolver con cierta armonía. Si tomas esta guía como ejemplo, verás que no se le ha dedicado mucho trabajo a la vista final. En efecto, me interesa más que entiendas lo que digo, que hacerlo muy bonito y no decir nada, y para mí es mucho más cómodo de escribir. Eso no significa que un documento no deba estar bien presentado, lo ideal es que tenga las dos cosas, pero es una cuestión de prioridades, de tiempo... o de necesidad, si se trata de un producto comercial que hay que vender.

Esta idea, la de separar los contenidos de la presentación, es la que se desarrolla con el que será en su día el sucesor del HTML: el XHTML. No es que el HTML ya esté extinguido; de hecho la mayoría de páginas web del mundo están todavía escritas en HTML, lo que equivale a hablar de muchos millones de páginas. Será, por tanto, un proceso largo que obligará a que los navegadores soporten ambos lenguajes durante bastante tiempo, y también a que los programadores los conozcan, aunque sólo sea para poder migrarlas o mantenerlas. El HTML, tal como lo conocemos hoy, no tiene ningún problema siempre que se lean las páginas en un ordenador convencional, pero presenta algunas dificultades para los nuevos medios audiovisuales, como los teléfonos móviles, PDAs, etc. Esta es, seguramente, la razón principal para impulsar el cambio, y es muy posible que muchas empresas opten por mantener dos versiones diferentes de sus sitios, porque, evidentemente, no pueden tener los mismos contenidos ni aspecto las destinadas a receptores de pequeño formato.

Si ya dominas el HTML, no temas adentrarte en el mundo XHTML; son prácticamente iguales. Solamente cambia un poco la sintaxis de algunas etiquetas (no todas), otras desaparecen (<FONT>), se abandona el maquetado con tablas y se hace con bloques o "capas" (<div>), se distingue entre mayúsculas y minúsculas y todos los elementos tienen que llevar cierre. Por ejemplo, el típico truncado de línea <BR> pasa a escribirse <br  />. Pero todo eso no sirve de mucho sin las hojas de estilo que veremos a continuación, y que también fiuncionan con el HTML de toda la vida, ya que inicialmente fueron diseñadas para él. Una ventaja indiscutible de estas técnicas, aparte de cumplir con los nuevos estándares, es que se consigue un maquetado más fino de la página, al poder trabajar con medidas mucho más pequeñas que el párrafo como hasta ahora.

Qué son las hojas de estilo

No es que el HTML no tuviese hasta aquí recursos de estilo, que ya hemos visto en páginas anteriores, como los tipos, tamaños y colores de letra (<FONT>), atributos de estilo de formularios y links, (<STYLE>) y otros, pero todos ellos están escritos embebidos en el propio código html. Estas definiciones típicas hacen muy trabajoso el cambiar de estilo un sitio entero, ya que eso implica que hay que editar todas las páginas del documento en muchos puntos de las mismas. Para intentar resolver este problema, se han implementado las hojas de estilo o CSS (Cascade Style Sheets).

El problema que tienen, por ahora, es que no todos los navegadores soportan el mismo tipo de lenguaje CSS, ni lo interpretan de la misma forma (a pesar de que existe un estándar como en el HTML), ni por supuesto, la misma versión de lenguaje. El estándar dice que un navegador que soporte la versión 2 de CSS también soportará la 1, eso dice, pero tal vez el navegador no lo sepa, o no soporte la 2, o ninguna y se cuelge irremisiblemente... Una de las peores cosas que tienen las hojas de estilo, es que si el navegador no entiende lo que hay en ellas, en lugar de ignorarla, puede colgarse, o en el mejor de los casos, ofrecer una imagen desoladora de nuestra página. Así pues, es buena idea probar las hojas de estilo con cuantos navegadores y distintas versiones de ellos se pueda, y saber con cuales no funciona, sin olvidar que en un determinado navegador, puede que todo funcione bien con una versión, pero con la siguiente tal vez algo deje de hacerlo correctamente. Y si es posible, procurar que el documento, sin aplicarle ningún estilo, solamente utilizando los valores por defecto, tenga una apariencia más o menos aceptable. Recuerda que no todo el mundo tiene la última versión de todo, ni usa el mismo navegador que tú. Por cierto: el navegador más popular del mundo no es precisamente el que mejor funciona, además de pasar olímpicamente de los estándares...

A todos estos problemas acaba de sumarse otro: la aparición de nuevos terminales de reducidas dimensiones, como teléfonos y tabletas que llevan distintos sistemas operativos, y por tanto nuevas y variadas versiones de navegadores que, por supuesto, también interpretan las cosas a su manera y no como tú esperas... Y otra cosa que rara vez funciona bien es imprimir una página: las impresoras tienen declarada la guerra a las CSS.

Para el XHTML se llegó hasta la versión 2.1 de CSS, y ya se está trabajando en la 3 que acompañará al html5. Al no haberse declarado oficialmente todavía estas versiones de languaje, no todos los navegadores las aceptan, y los que sí, de momento, de forma parcial.

La tecnología aplicada a las CSS es utilizable de cuatro formas distintas:

1.- En línea, que es la forma ya conocida, aunque aquí se utiliza una sintaxis algo diferente. Sea por ejemplo:

<P STYLE="font-size:20px; font-family:Courier; color:green";>Ejemplo de estilo</P>

Este es el resultado:

Ejemplo de estilo

2.- Por clase de estilo. Esta técnica consiste en definir una clase, que es un conjunto de propiedades de estilo agrupadas bajo un nombre. La clase creada se invoca desde un elemento <span>. Por ejemplo, para definir la clase prueba_cl:

<html>
<head><TITLE>Estilos</TITLE>

<style type="text/css">
 .prueba_cl{ font-size:20px; font-family:Courier; color:green;}
</style>

</head>
<body>

<span class="prueba_cl">Ejemplo de estilo</span>

</body>
</html>

3.- Por identificador de bloque, que al igual que la clase, consiste en definir un conjunto de propiedades de estilo agrupadas bajo un nombre, que se asignarán a un bloque. El identificador creado se invoca desde un elemento <div>. Por ejemplo, para definir el identificador prueba_id:

<html>
<head><title>Estilos</title>

<style type="text/css">
 #prueba_id{ font-size:20px; font-family:Courier; color:green;}
</style>

</head>
<body>

<div id="prueba_id">Ejemplo de estilo</div>

</body>
</html>

Y en ambos casos, este es el resultado:

Ejemplo de estilo

Como puedes ver, los dos ejemplos anteriores son casi iguales. A simple vista solamente cambia el caracter que hay delante del nombre prueba_, que es un punto para la clase y una almohadilla para el identificador, pero internamente, la diferencia estriba en que la clase puede ser utilizada por todos los bloques de texto que se quiera (generalmente solo contiene instrucciones de estilo), mientras que el identificador solamente se puede utilizar una vez, ya que es capaz de crear un bloque y no puede haber dos bloques con el mismo nombre.

Estas dos últimas técnicas, permiten cambiar algo más fácilmente el estilo de la página, ya que solamente habría que tocar la cabecera de cada una, pero si el documento tiene varios cientos de ellas, sigue siendo un trabajo importante. La solución para poder cambiar el estilo de todo el documento, editando solamente desde un sitio, es la cuarta forma:

4.- Por fichero de estilos externo Esto consiste en escribir las definiciones de estilo en un fichero aparte de las páginas, y referenciarlo en la cabecera de cada una. El fichero es un simple fichero de texto guardado con la extensión .css


<HTML>
<HEAD><TITLE>Estilos</TITLE>

<LINK REL="stylesheet" TYPE="text/css" HREF="estilo.css"> 

</HEAD>
<BODY>

Ejemplo de estilo

</BODY>
</HTML>

Este es el contenido del fichero estilo.css

/* Estilo para el cuerpo del documento */
BODY {font-size:20px; font-family:Courier; color:green;}

Y este sería el resultado:

Ejemplo de estilo

Como puedes ver, es lo mismo que se escribió en los ejemplos anteriores, pero ahora, en lugar de un nombre inventado por el usuario, se indica el nombre de un elemento HTML al que se quiere dar estilo propio, en este caso toda la página: BODY. Por supuesto, en el fichero se pueden incluir todos los elementos HTML que se quiera. También se pueden incluir en el fichero nombres que no coinciden con elementos HTML, tal como se ha hecho en los ejemplos 2 y 3, con la clase prueba_cl o el identificador prueba_id, invocándolos con el elemento correspondiente.

Cómo se escriben los ficheros CSS

El lenguaje utilizado para escribir las hojas de estilo son muy similares al lenguaje Java o JavaScript, aunque no es tan estricto en la sintaxis. Analicemos el ejemplo anterior:

estilo.css

/* Estilo para el cuerpo del documento */
BODY {font-size:20px; font-family:Courier; color:green;}

Como ya habrás adivinado, la primera línea es un comentario. Los caracteres /* y */ son los mismos que se utilizan en JavaScript.

A continuación tenemos una línea que comienza con el nombre de un elemento html: BODY lo que significa que todas las instrucciones que vienen a continuación, encerradas dentro de un par de llaves {   } (ojo, no son corchetes), igual que en javaScript, definirán los parámetros de estilo que hay que aplicarle a BODY. Al conjunto de declaraciones escritas dentro de las llaves, se le llama bloque de declaraciones, y cada bloque de declaraciones puede considerarse como una regla de estilo. Aunque en los ejemplos se han escrito las declaraciones en línea, no hay nada que impida hacerlo de otra forma:

/* Estilo para el cuerpo del documento */ 
BODY {
      font-size:20px; 
      font-family:Courier; 
      color:green;
     }

La W3C denomina a estos elementos HTML , como <BODY> o <P>, "selectores" y a los parámetros que indican propiedades, como color o font, "declaraciones". Si alguna de las declaraciones del bloque tiene un error de sintaxis, de lógica, o no es compatible con los recursos del navegador, simplemente se ignora y se ejecutan las demás (en teoría, claro). Los bloques de declaraciones pueden anidarse y formar bloques complejos, es decir, que una regla de estilo puede estar formada por varios bloques de declaraciones.

Cómo funcionan las CSS

Cuando una página es llamada por el navegador, primero se cargan los textos y los gráficos, después se aplica el estilo que contenga el código HTML, y por último, se aplica el estilo que indique la CSS. Este orden de carga hace que las instrucciones de estilo definidas en las CSS sean las que finalmente prevalecerán, anulando las que hubiese definidas en HTML (no todas, sólo las coincidentes).

No hay que seguir ningún orden especial para escribir las delaraciones ni sus nombres, pero ten presente que las declaraciones hechas para un elemento serán heredadas por sus descendientes, salvo que se indique lo contrario, redefiniendo valores para esos otros elementos. Por ejemplo, lo definido para el elemento <BODY> será heredado por todos los elementos de la página ya que <BODY> es el "padre" de todos los demás elementos. De la misma forma, lo declarado para un elemento <P> sería heredado por los posibles elementos que contenga, como <B> o <I>, y así sucesivamente. Este efecto de herencia de propiedades entre elementos relacionados es el origen del nombre de hojas de estilo en "cascada".

Resumiendo: cada elemento hereda las propiedades del elemento que lo contiene, y al contenedor se le llama elemento padre. No todas las propiedades son heredables y para cada propiedad se puede definir si ésta se hereda o no. Para forzar a que un elemento herede alguna propiedad que de otro modo no heredaría se utiliza la instrucción inherit que se puede aplicar a cualquier propiedad de cualquier elemento, pero teniendo claro que la herencia será siempre desde el padre inmediato.

Esta es la forma de conocer el "árbol genealógico" de un elemento:

Descendiente:   un elemento A es descendiente de otro B cuando B es padre de A o cuando B es padre de otro elemento que a su vez es padre de A.
Antepasado:   un elemento A es antepasado de otro B cuando B es su descendiente.
Hermano:   un elemento es hermano de otro cuando ambos comparten el mismo padre.

Además, según como se escriban las etiquetas se pueden conseguir cosas diferentes. Por ejemplo, con esta página:


<HTML>
<HEAD><TITLE>Estilos</TITLE>
<LINK REL="stylesheet" TYPE="text/css" HREF="estilo.css"> 
</HEAD>
<BODY>

<B>Negrita verde</B> Ejemplo de estilo verde

<P>Parrafo 1 <B>Negrita rojo</B></P>

<P>Parrafo 2</P>

</BODY>
</HTML>

Si escribimos esta hoja de estilo:

BODY {color:green}
P B {color:red}

Se obtiene:

Negrita verde  Ejemplo de estilo verde

Parrafo 1  Negrita rojo

Parrafo 2

Pero simplemente poniendo una coma entre P y B:

BODY {color:green}
P, B {color:red}

Se obtiene:

Negrita verde  Ejemplo de estilo verde

Parrafo 1  Negrita rojo

Parrafo 2

En el primer caso, queda claro que los dos elementos <P> del fichero html heredan el color verde de <BODY>, y al no haber ninguna coma entre P y B en la hoja de estilo, se está indicando que el color rojo es sólo para el texto en negrita cuando forme parte de P, pero en el segundo caso, con una coma separando P de B, se le indica que el color rojo es para el texto de ambos elementos, P y B, siempre, esté en el párrafo que esté, e incluso aunque no esté en un párrafo, como es el caso del texto "Negrita verde"

Unidades CSS

Los estilos, básicamente, consisten en alterar las dimensiones y posición por defecto de los distintos elementos de la página, y para eso necesitamos unidades de medida. Veamos las unidades empleadas en CSS.

Unidades relativas
Son las que dependen de la resolución de la pantalla del cliente o del tipo de letra base que se utilice en la página. Hay dos de este tipo: em que toma como referencia la anchura o altura de la letra M mayúscula de la fuente más relevante de la línea. Por ejemplo, si se escribe line-height:2em significa que la altura de la línea será 2 veces la altura máxima de las fuentes de esa línea.

La otra unidad, ex que hace referencia a la altura de la letra x minúscula, que es aproximadamente la mitad de la anterior M. Por ejemplo, al escribir line-height:2ex se indica que la altura de la línea será 2 veces la mitad de la altura máxima de la fuente usada.

Cuando se usa este tipo de unidades hay que tener cuidado al elegir los elementos HTML sobre los que se aplicarán y su estructura, ya que si se anidan, al heredar propiedades pueden resultar medidas muy reducidas o muy grandes.

Unidades absolutas
Que son las que no dependen de los factores externos que afectan a las unidades relativas antes descritas. Entre estas tenemos cm (centímetro), mm (milímetro), in (pulgadas), pt (puntos tipográficos, igual que los puntos de las fuentes de Windows), px (píxels de pantalla) y pc (picas).

Hasta que tengas cierta soltura en estos menesteres, puede no ser fácil acertar con la unidad adecuada en cada caso. Como orientación inicial, tal vez pueda ayudarte el saber que (aproximadamente) 1 px equivale a 0.28 mm o 0.011 in. 1 in son 2.54 cm. 1 pc son 12 pt. 1 pt equivale a 0.0139 in. 12 pt equivalen a 0.2 in.

Queda una pseudo unidad que no puede incluirse en ninguna de las dos clases anteriores: el porcentaje %   En efecto, este indicador de unidades, que no es en sí mismo una unidad, lo que hace es tomar la unidad de medida (la que sea) del elemento indicado y aplicarle el cálculo correspondiente al valor que indique el porcentaje.

Todas las propiedades tienen siempre un valor asignado, que puede ser el especificado en la CSS o el valor heredado. Si no se ha definido ninguno de los dos, el navegador usa el valor inicial, es decir, el valor predeterminado para cada propiedad.

Si en la CSS se especifica un valor relativo, el navegador procederá a calcular su valor absoluto, que es el único tipo con el que puede trabajar la pantalla. Por ejemplo, para hallar P {font-size: 125% } hay que tomar el valor del elemento padre de <P> y aplicarle un porcentaje de 125% para obtener el tamaño real del texto. Si <BODY> es el padre de <P> y tiene un tamaño de fuente de 10px, entonces <P> tendrá un tamaño de fuente de 12,5px (10x125%=12,5). Los elementos que sean hijos de <P> no van a heredar el valor especificado (125%) sino el valor computado (12,5px).

Pero puede suceder que el valor computado no pueda ser utilizado por el navegador debido a limitaciones técnicas. Tomando el resultado del ejemplo anterior, en ninguna pantalla es posible escribir una fuente de 12,5px, por lo que el navegador la ajustará a 12px ó a 13px, es decir al valor real.

Reglas especiales

Existen una reglas especiales llamadas reglas arroba que deben escribirse al principio de la hoja (si las hay), antes de cualquier otra regla. Además de indicar un estilo determinado, como las otras reglas, algunas sirven para realizar acciones, o ambas cosas. Por ejemplo:

@import "estilo2.css";

@media print {
  BODY { font-size: 10pt }
}

@page { margin: 2cm; }

@page :first {
    margin-top: 5cm;
}

En el ejemplo anterior, la primera de ellas,   @import   sirve para importar otra hoja de estilo para ser usada conjuntamente con la actual, (algo parecido a las includes de asp). Al utilizar esta regla hay que tener cuidado de que no haya instrucciones contradictorias entre la hoja llamada y la llamadora.

En la segunda regla del ejemplo,   @media print   indica que el estilo asignado a BODY será efectivo cuando la página sea impresa, pero no cuando sea visualizada normalmente en el navegador, para ese evento habrá que definir otra regla de las ya conocidas.

En la tercera y cuarta con @page se fija el margen de todas las páginas a 2 centímetros, y se establece el margen superior de la primera página en 5 centímetros.

Las reglas @page tienen la particularidad del contexto de página. En efecto, cuando se pagina un documento con estas reglas, se está asumiendo que el resultado será llevado a papel y encuadernado como un libro. Por ejemplo:


@page { 
   margin-left: 3cm; 
}

@page :left {
    margin-left: 4cm;
}
Con esta hoja de estilo, y una vez impreso el documento, el margen izquierdo en las páginas de la izquierda será de 4 cm. y en las de la derecha, también su margen izquierdo, será de 3 cm.

Al imprimir un documento a doble cara puede ocurrir que los márgenes en páginas izquierdas y derechas sean diferentes. Para controlar esto pueden utilizarse las pseudo-clases   :left o :right   Por ejemplo:


@page :left { 
   margin-left: 4cm;
   margin-right: 3cm;
}
@page :right { 
   margin-left: 3cm;
   margin-right: 4cm;
}

Otras reglas que pueden considerarse especiales son las que hacen referencia a los pseudo-elementos. En realidad se trata de elementos existentes, pero con especiales funcionalidades distintas de las que normalmente tiene el elemento base. Se escriben poniendo el elemento de que se trate seguido de dos puntos y el parámetro que se quiera utilizar:

:first-line   Permite actuar sobre la primera línea de un párrafo.
:first-letter   Lo mismo que el anterior pero actuando solamente sobre la primera letra.
:before     :after   con estos dos pseudo-elementos se puede insertar un contenido fijo por defecto antes o después de un elemento cualquiera.

Veamos algunos ejemplos:

P:first-line { text-transform: uppercase }

convierte la primera línea del párrafo en mayúsculas.

P:first-letter { font-size: 200%; font-weight: bold }

Incrementa el tamaño y el espesor de la primera letra del párrafo.

De forma similar, se puede conseguir que, por ejemplo, siempre que se utilice el elemento <H3>, CSS inserte un gráfico o escriba una frase delante, y lo mismo al final:

H3:before {content: "Tema: "}
P:after {content: url("migrafico.gif")}
BODY:after {content: "Fin de la obra"; }

Otros pseudo-elementos o pseudo-clases son las que se aplican a los links. Hay dos posibles modificaciones de estilo para este elemento; el color del enlace en sus distintos estados y si aparece subrayado o no. Teóricamente no debiera influir el orden en que se escriban los distintos estados en la CSS, pero es mejor escribir las declaraciones en el siguiente orden (por supuesto, los colores son libres):

a {text-decoration: none;}
a:link {color: #FF0000;}
a:visited {color: #00FF00;}
a:hover {color: #FF00FF;}
a:active {color: #0000FF;}
Donde link indica que el enlace no ha sido visitado, visited que el enlace ha sido visitado, active que el enlace está siendo pulsado, y hover que el ratón está pasando sobre él (sin pulsar).

Existen otras reglas que no influyen directamente sobre la composición de la página, como son los cursores. Se puede cambiar el aspecto del puntero del ratón con la propiedad   cursor: valor;   donde valor; puede ser:

Declaración cursor
Valor por defecto auto
Valores posibles auto
default
inherit
help
wait
text
move
pointer
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
Valor porcentual No aplicable
Se aplica a Todos
Se hereda?: Si

En lugar de uno de los nombres de puntero predeterminados, también se puede indicar uno creado por el usuario:

P { cursor: url("micursor.cur"), text; }

Para que el puntero indicado pueda funcionar, es necesario que exista en la máquina del cliente. Por ello, al igual que cuando se definen fuentes, conviene poner más de uno, por si el propuesto falla.


El selector universal

Se puede hacer referencia a todos los elementos de una página utilizando un selector especial que se representa por un asterisco. Por ejemplo:
* {color: red;}


[Indice]