Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS)

Autor: F. Javier García Castellano
Web: http://decsai.ugr.es/~fjgc, Mail: fjgc@decsai.ugr.es

(C) GeNeura Team
Web: http://geneura.ugr.es, Mail: tutti@geneura.ugr.es

1.- Introducción

CSS, Cascading Style Sheets, hojas de estilo en cascada, es un lenguaje sencillo para la aplicación de estilos a un elemento XML. Es decir, podremos ver nuestros documentos XML en el navegador como si de una página HTML se tratase, aunque ésto sólo funcionará en browsers XML que soporten CSS (IE, Mozilla, Konqueror, Amaya, etc.).

CSS tiene dos versiones denominadas CSS1 y CSS2 aparecidas en 1996 y 1998 respectivamente. CSS1 fue introducida para html, pero se puede usar (y con menos restricciones) en XML. CSS2 sirven tanto para HTML como para XML, pero es en el XML donde alcanzan la potencia que tiene. Nos encontraremos que muchas características de los estándares no funcionan o funcionan en un navegador y no en otro, pero ese no es problema del estándar,sino que no todos los navegadores están preparados.

Para un mismo documento XML se pueden tener varias CSS y así estar formateado de diferentes formas, según nuestros propósitos o del posible uso que se le vaya a dar al documento. Las CSS se espresa mediante una serie de reglas que guardaremos en un fichero de texto. Cada regla contiene el nombre del elemento al que se aplica y el estilo definido.

Ejemplo fichero XML (ejemplo0.xml):

            <?xml version="1.0" encoding="UTF-7"?>
            <?xml-stylesheet href="ejemplo0.css" type="text/css"?>

            <ejemplo> Hola mundo ! </ejemplo>

Ejemplo fichero CSS (ejemplo0.css):

           
            ejemplo {display: block; color: blue}

2.- CSS para HTML vs CSS para XML

Las principales diferencias son:

Los elementos a los que se les pueden asignar una regla de estilo no están limitados.
Los navegadores HTML no entienden el procesamiento de instrucciones, simplemente la hoja de estilos se incluye como un etiqueta style.
Los navegadores HTML tienen un formateo restringido, mientras que XML no.

Como en este tutorial nos vamos a centrar en las hojas de estilo en cascada para XML, quien quiera conocer las hojas de estilo en cascada para HTML puede encontrar en http://geneura.ugr.es/~gustavo/css un tutorial muy bueno de CSS para HTML.

2.-Cómo especificar un fichero CSS

Para poder visualizar un documento XML es necesario especificar qué formato se debe utilizar. Para este propósito se utiliza la instrucción xml-stylesheet

Ejemplo:

            <?xml version="1.0" encoding="UTF-7"?>
            <?xml-stylesheet href="ejemplo0.css" type="text/css"?>

De este modo el fichero de estilos se incluye en el documento XML. La instrucción posee dos atributos.

href: indica la dirección absoluta o relativa donde se encuentra el fichero de estilos. En este caso el valor de href podría haber sido "http://flanagan.ugr.es/xml/css/ejemplo0.css". En el ejemplo el fichero se denomina ejemplo0.css y debe encontrarse en el mismo directorio que el que estamos escribiendo.
type: Representa el MIME tipo que se va a utilizar que será text/css para un fichero CSS.

EJERCICIO 1:
Coge un documento XML (un ejemplo que hayas hecho antes) y modificalo para que utilice como hoja de estilo en cascada el fichero micss1.css. Crea el fichero micss1.css vacio y muestra el documento XML en el navegador. No cojas un ejemplo con pocas etiquetas, por que no nos va a dar juego. Si no sabes cual coger utiliza sonatinal.txt y le pones etiquetas.