INFORMATICAGUIA 7. HOJAS DE ESTILO EN CASCADA

Las hojas de estilo representan un gran avance con respecto a mejorar la apariencia de las pginas web. Adems hay otro aspecto muy interesante de las hojas de estilo, y es que separan por completo la informacin para la presentacin de una pgina de su contenido, con lo que se facilita mucho el diseo y revisin de las pginas, pues se puede variar la presentacin de una pgina, o de todo el conjunto de ellas, sin cambiar una sola lnea del cdigo del HTML. Se pueden definir variaciones de diseo por medio de las "clases". Por ejemplo, si se necesitan cinco estilos de prrafos diferentes, se pueden definir cinco clases para la etiqueta : P.normal, P.indentado, P.subrayado, P.rojo y P.dobleespacio.

Cmo funcionan?Las hojas de estilo en cascada nos permiten redefinir las reglas que utiliza el navegador para presentar una pgina del Web. Cada etiqueta define sus propias reglas para mostrar el texto que engloba. Con las hojas de estilo podemos cambiar cada una de estas reglas si lo deseamos. Es decir, podemos modificar a nuestro antojo el comportamiento de cada etiqueta. Hay tres maneras de aadir estilos a nuestras pginas Web.

Aadiendo instrucciones de estilo slo a etiquetas concretas, o a un grupo de ellas. Incluyendo las instrucciones de estilo en el documento HTML de una pgina concreta - de una manera anloga a cmo se incluye un script de Javascript. Esto permite cambiar la apariencia de una hoja entera. Enlazando todos documentos HTML de todas las pginas que componen un sitio del Web con un fichero de definicin del estilo. De esta manera, se puede cambiar la apariencia de mltiples pginas retocando un solo fichero.

1. Estilo para etiquetas concretas o grupos de etiquetasEste mtodo es el apropiado si slo se desea cambiar el estilo en unas secciones determinadas de una pgina. Con l podemos manipular las propiedades de alguna etiqueta o de algn grupo de etiquetas. Se hace aadiendo el atributo STYLE, que contiene una serie de propiedades, dentro de la etiqueta correspondiente. Veamos el siguiente ejemplo:

"Este es un prrafo normal, sin mrgenes a la izquierda ni a la derecha, con el color de su texto en negro".

"Quiero que este otro prrafo tenga un margen izquierdo de media pulgada, al igual que el margen derecho. Adems quiero que su texto sea de color verde".

Observe que se ponen entre comillas una serie de propiedades (ejemplo, margin-left), y despus de dos puntos se pone el valor de esa propiedad (0.5in o sea, 0.5 pulgadas). Las distintas propiedades debern estar separadas por punto y coma. Si queremos cambiar la apariencia de una seccin entera, se puede utilizar la etiqueta , con la que definimos el estilo globalmente para esa seccin. En el siguiente ejemplo cambiamos el color (a rojo) y el tamao de la fuente (a 16 puntos de altura) de un bloque de etiquetas por medio de la etiqueta , lo que tiene el mismo efecto que si hubiramos asignado este estilo separadamente a cada una de las etiquetas englobadas (,

y

):

La definicin del estilo (rojo y 16 puntos), afecta a todo el bloque de etiquetas. Este texto tambin es rojo y tiene 16 puntos de altura. Al igual que esta lnea.

Qu ocurre si a una de las etiquetas englobadas por DIV le introducimos un estilo distinto? Comprobmoslo introduciendo un estilo propio a la segunda etiqueta :

Veamos si la definicin del estilo (rojo y 16 puntos), afecta a todo el bloque de etiquetas, hasta la etiqueta de cierre de DIV. Esta lnea es azul, a pesar de estar englobada dentro de DIV, porque tiene su propio estilo. Esta otra cumple con el estilo de DIV, porque no tiene estilo propio.