Tutorial de hojas de estilo para XML

Pgina 1


Tutorial de Hojas de Estilo en Cascada(CSS) para XML
Introduccin
Qu es y qu herramientas vamos a usar
En este tutorial veremos los elementos necesarios para desarrollar hojas de estilo en
cascada (Cascading Style Sheets, CSS) para documentos XML.
Las CSS nos van a permitir formatear el aspecto de un documento XML, de forma que
podremos dar distintos aspectos a nuestros documentos XML, sin necesidad de realizar
ninguna transformacin sobre ellos. Primero veremos una pequea introduccin a CSS.
Y posteriormente entraremos en CSS1 (pensado para HTML, pero aplicable en XML) y
CSS2 (pensado para XML)
Para ir empezando, las nicas herramientas que nos harn falta son:
Un editor para poder escribir las CSS, por ejemplo, el notepad en windows y el
xemacs en Linux
Un navegador que soporte XML y CSS para XML, por ejemplo, usaremos el
Internet Explorer 5 (o superior) o el Mozilla (cualquier versin). Es aconsejable
utilizar, a ser posible, las ltimas versiones de lo navegadores para un mayor
soporte del estndar CSS.


ndice
Escribiendo y Utilizando CSS para XML
1. Cascading Style Sheets (CSS)
1. Introduccin
2. CSS para HTML vs CSS para XML
3. Como especificar un fichero CSS en un documento XML
4. Ejercicios
2. CSS1 para XML
1. Reglas de estilo o unidades CSS
2. Selectores
3. El atributo STYLE
4. Herencia
5. Estilos en Cascada
6. Comentarios
7. Valores
Longitud
URL
Color
Tutorial de hojas de estilo para XML

Pgina 2


Palabras clave
8. Propiedades
Display
Propiedad white-space
Propiedades de Fuentes
Color
Propiedades BackGround
Propiedades Text
Propiedades Box
3. CSS2 para XML
1. Nuevos Selectores
2. Formateo de Pginas
3. Formateo Visual
Display
Height y Width
Overflow
Clip
Visibility
Cursor
Colores
Fuentes
Text-shadow
Vertical-align
4. Formateo de Cajas
Propiedades Outline
Propiedades de posicionamiento
4. Enlaces y sitios de referencia.

1.- Introduccin
CSS, Cascading Style Sheets, hojas de estilo en cascada, es un lenguaje sencillo para
la aplicacin de estilos a un elemento XML. Es decir, podremos ver nuestros
documentos XML en el navegador como si de una pgina HTML se tratase, aunque sto
slo 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
caractersticas de los estndares no funcionan o funcionan en un navegador y no en otro,
pero ese no es problema del estndar,sino que no todos los navegadores estn
preparados.
Para un mismo documento XML se pueden tener varias CSS y as estar formateado de
diferentes formas, segn nuestros propsitos 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
Tutorial de hojas de estilo para XML

Pgina 3


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 estn
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.-Cmo especificar un fichero CSS
Para poder visualizar un documento XML es necesario especificar qu formato se debe
utilizar. Para este propsito se utiliza la instruccin 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 instruccin
posee dos atributos.
href: indica la direccin absoluta o relativa donde se encuentra el fichero de
estilos. En este caso el valor de href podra 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:
Tutorial de hojas de estilo para XML

Pgina 4


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.
1.- Reglas de estilo o Unidades CSS
Un fichero CSS contiene una serie de reglas de estilo o, tambin llamadas, unidades
css. Dichas unidades css se componen de un selector(normalmente el nombre de una
etiqueta de nuestro documento XML) y una lista o cadena de estilos. Dicha lista consta
de un conjunto de pares de elementos separados por el caracter ; donde cada par, est
formado por el nombre de una propiedad y un valor, separndose con el caracter :
Sintaxis:

Selector {propiedad:valor; propiedad:valor; ...
propiedad:valor}

2.-Selectores
El selector ms utilizado es simplemente el nombre de la etiqueta a la que se refiere la
regla.
Ejemplo:

ejemplo {display: block; color: blue}

La agrupacin de elementos se realiza mediante una lista de los nombres de las reglas
separadas por comas. A esta prctica se le denomina Agrupacin de selectores.
Ejemplo documento xml con agrupacin de selectores:
<?xml version="1.0" encoding="UTF-7"?>
<?xml-stylesheet href="ejemplo1.css" type="text/css"?>
<TEXTOS>
<POEMA>
<VERSO> La princesa est triste... qu tendr
la princesa?</VERSO>
<VERSO> Los suspiros se escapan de su boca de
fresa,</VERSO>
<VERSO> que ha perdido la risa, que ha perdido
el color.</VERSO>
<VERSO>... </VERSO>
</POEMA>
<CITA> Algunos gallos creen que el solo sale slo para
ellos
</CITA>
</TEXTOS>
Tutorial de hojas de estilo para XML

Pgina 5


Ejemplo documento CSS con agrupacin de selectores:
POEMA,CITA {display: block; color: blue}
Existe un tipo de elementos especiales denominados pseudo-elementos que hacen
referencia a dos elementos especiales que algunas veces necesitan estilos especficos
como son los elementos first-letter y first-line. La forma de referenciarlos es :
ELEMENTO:pseudo-elemento Lista_de_Estilos
Ejemplo documento css con pseudo-elementos:
POEMA {display: block; color: blue}
CITA {display: block; color: red}
CITA:first-letter {color: green}
Para los casos en que el mismo elemento necesite formatearse de diferente forma, se
utiliza CLASS. La forma de utilizar CLASS es la siguiente. En el fichero CSS se
especifica la regla general de formateo y la regla para los elementos especiales y en el
fichero XML se identifican esos elementos con el atributo CLASS.
Ejemplo de documento XML,usando CLASS:
<?xml version="1.0" encoding="UTF-7"?>
<?xml-stylesheet href="ejemplo3.css" type="text/css"?>
<POEMA>
<VERSO CLASS="PRIMERO" > La princesa est triste... qu
tendr la princesa?</VERSO>
<VERSO> Los suspiros se escapan de su boca de fresa,</VERSO>
<VERSO> que ha perdido la risa, que ha perdido el
color.</VERSO>
<VERSO CLASS="PRIMERO" >... </VERSO>
</POEMA>
Ejemplo de documento CSS, usando CLASS:
POEMA { display: block }
VERSO.PRIMERO{ color: blue }
VERSO{ display: block; color: black}
En otras ocasiones es posible que se desee seleccionar un nico elemento para asignarle
un estilo especial, en este caso es posible seleccionarlo mediante el atributo ID. Para
este caso la forma de utilizar el ID es la siguiente
Ejemplo de documento XML,usando ID:
<?xml version="1.0" encoding="UTF-7"?>
<?xml-stylesheet href="ejemplo4.css" type="text/css"?>
<POEMA>
<VERSO ID="PRIMERO" > La princesa est triste... qu tendr
la princesa?</VERSO>
<VERSO> Los suspiros se escapan de su boca de fresa,</VERSO>
<VERSO> que ha perdido la risa, que ha perdido el
color.</VERSO>
<VERSO>... </VERSO>
Tutorial de hojas de estilo para XML

Pgina 6


</POEMA>
Ejemplo de documento CSS, usando ID:
POEMA { display: block }
VERSO#PRIMERO{ color: blue }
VERSO{ display: block; color: black}
La ltima forma de seleccionar un elemento es mediante contexto. Es decir se desea
aplicar estilo a algunos elementos dependiendo del contexto en el que se encuentren,
para esta prctica se procede:
Ejemplo de XML, usando contexto:
<?xml version="1.0" encoding="UTF-7"?>
<?xml-stylesheet href="ejemplo5.css" type="text/css"?>
<POEMA>
<PRIMERO>
<VERSO> La princesa est triste... qu tendr la
princesa?</VERSO>
</PRIMERO>
<VERSO> Los suspiros se escapan de su boca de fresa,</VERSO>
<VERSO> que ha perdido la risa, que ha perdido el
color.</VERSO>
<VERSO>... </VERSO>
</POEMA>
Ejemplo de CSS, usando contexto:
POEMA {display:block;}
VERSO {color: black}
PRIMERO {display:block}
PRIMERO VERSO {color: blue}
3.- El atributo STYLE
En casos muy raros, es posible que el usuario desee aplicar un estilo concreto, una sla
vez a un elemento sin modificar el fichero con extensin css, para esto se utiliza el
atributo STYLE. El atributo STYLE posee mayor precedencia que el estilo definido en
el fichero css.
Ejemplo de XML, usando STYLE:
<?xml version="1.0" encoding="UTF-7"?>
<?xml-stylesheet href="ejemplo6.css" type="text/css"?>
<POEMA>
<VERSO STYLE="color:blue"> La princesa est triste... qu
tendr la princesa?</VERSO>
<VERSO> Los suspiros se escapan de su boca de fresa,</VERSO>
<VERSO> que ha perdido la risa, que ha perdido el
color.</VERSO>
<VERSO>... </VERSO>
</POEMA>
Tutorial de hojas de estilo para XML

Pgina 7


Ejemplo de CSS, usando STYLE:
POEMA {display:block;}
VERSO {color: red}
Nota: Esta opcin no est disponible todava en el navegador Mozilla, aunque s
funciona en el IE5. Esa prctica no est muy recomendada puesto que siempre es
posible evitarla utilizando una etiqueta distinta para estos elementos.
4.-Herencia
No es necesario que todas las reglas especifiquen que estilo utilizar puesto que los
elementos especficos heredan por defecto el estilo de los elementos ms generales que
los incluyen.
Ejemplo de XML, usando herencia:
<?xml version="1.0" encoding="UTF-7"?>
<?xml-stylesheet href="ejemplo7.css" type="text/css"?>
<POEMA>
<VERSO> La <NOMBRE>princesa</NOMBRE> est triste... qu
tendr la princesa?</VERSO>
<VERSO> Los suspiros se escapan de su boca de fresa,</VERSO>
<VERSO> que ha perdido la risa, que ha perdido el
color.</VERSO>
<VERSO>... </VERSO>
</POEMA>
Ejemplo de CSS, usando herencia:
POEMA {display: block }
VERSO {display: block; font-size: 20pt; font-family: sans-serif}
NOMBRE {font-style: italic; font-family: Helvetica }
En el ejemplo, el elemento NOMBRE hereda el tamao de letra y redefine aquello que
le interesa como la familia de fuente que utilizar. Hay que tener cuidado con utilizar
especificaciones muy concretas para un elemento general puesto que eso puede
provocar que los elementos hijos tengan que redefinir todas las opciones. Otro problema
es que si se utiliza familias de fuente diferentes, es posible que los tamaos salgan muy
dispares, para evitar este problema se suelen utilizan medidas de fuente relativas, o
porcentajes que veremos ms adelante.
5.- Estilos en Cascada
A un mismo fichero es posible adjuntar ms de un fichero de estilos, y esto puede
provocar que un mismo elemento posea varias reglas de estilo asignadas y
contradictorias entre si, por lo que se determina un orden de aplicacin de estas reglas
denominado estilos en cascada.
Existen varias formas de asignar un fichero de estilo:
xml-stylesheet.
Tutorial de hojas de estilo para XML

Pgina 8


La directiva @import.
Utilizando el browser ya sea para utilizar los estilos por defecto o para utilizar un
fichero de estilos especfico.
La primera forma est clara. Respecto a la segunda debe incluirse en la primera lnea del
fichero css y el formato es el siguiente: @import url(direccion relativa o absoluta);
Ejemplo de CSS, usando import:
@import url("subs.css");
VERSO { color: blue }
El orden de importacin de los ficheros de estilos es el orden de las declaraciones, y las
referencias circulares no estn permitidas.
El orden en el que se aplican las reglas es muy sencillo. Generalmente si existen ms de
una regla para un mismo elemento, se aplica la regla ms especfica. Por ejemplo: En
una regla con un atributo ID y CLASS tendra preferencia la aplicacin del ID primero
y despues de la clase y en su defecto la regla del elemento general y sino las reglas que
rigen el elemento padre y si no existen las reglas generales de estilo del navegador.
Nota:El orden en cascada puede a veces llevar a confusin.
6.- Comentarios
Los comentarios en las hojas de estilo son similares a los comentarios de C. /*... */.
Ejemplo de CSS con comentarios:
POEMA{display:block;} /* Estilos generales para un poema*/
VERSO{color: black; } /* Estilos especficos para el verso*/
7.- Valores
Los valores de las propiedades pueden ser de cuatro tipos:
Longitud: Cuando estamos trabajando con el tamao de algo, por ejemplo, de las
fuentes
URL: Cuando necesitamos un objeto externo, por ejemplo, una imagen
Color
Palabra clave: Hay propiedades que slo pueden tomar determinados valores
7.1.- Longitud
La longitud se utiliza para propiedades que expresan tamao y se pueden utilizar tres
tipos de longitud:
1. Longitud absoluta: Pueden ser:
o Inch(pulgadas): in ( 1inch=2.53cm )
o Centimetros: cm
Tutorial de hojas de estilo para XML

Pgina 9


o Milimetros: mm
o Puntos: pt ( 1pt=1/72inch )
o Picas: pc ( 1pc=12pt )
Ejemplo de CSS con longitudes absolutas:
POEMA{ font-size: 1in } /* Ejemplo de in */
VERSO{ margin: 1.5cm } /* Ejemplo de cm */
CITA { margin: 1000mm } /* Ejemplo de mm */

2. Longitud relativa: Pueden ser:
o EME; em (tamao de la fuente que se est usando)
o Equis; ex (tamao de la letra 'x' en la fuente que se est usando )
o Pixel; px
Ejemplo de CSS con longitudes relativas:
POEMA{ font-size: 12px } /* Ejemplo de px */
VERSO{ margin: 0.5em } /* Ejemplo de em */
CITA { margin: 1ex } /* Ejemplo de ex */
3. Porcentajes: Se puede expresar un tamao relativo como un porcentaje del valor
actual de la propiedad.
Ejemplo de CSS con porcentajes:
POEMA{ font-size: 120% } /* Ejemplo de % */
7.2.- URL
Este valor se puede aplicar a las propiedades que indican la imagen del fondo, y
las imagenes de una lista, background-image, list-style-image y list-style. El
formato para especificar una URL es mediante la funcion url(). Como
argumento recibe una direccin relativa o absoluta que puede o no ir con
comillas simples o dobles.
Ejemplo de XML:
<?xml version="1.0" encoding="UTF-7"?>
<?xml-stylesheet href="ejemplo8.css" type="text/css"?>
<POEMA>
<VERSO> La <NOMBRE>princesa</NOMBRE> est triste...
qu tendr la <NOMBRE>princesa</NOMBRE>?</VERSO>
<VERSO> Los suspiros se escapan de su boca de
fresa,</VERSO>
<VERSO> que ha perdido la risa, que ha perdido el
color.</VERSO>
<VERSO>... </VERSO>
</POEMA>
Ejemplo de CSS usando url:
POEMA {display: block; background-image: url(fondo-azul.jpg) }
Tutorial de hojas de estilo para XML

Pgina
10


VERSO {display: block; font-size: 20pt; font-family: sans-
serif}
NOMBRE {font-style: italic; font-family: Helvetica }
Los caracteres especiales como los espacios, comas, etc.; deben ser escapados
con la siguiente tabla:
Espacio %20
, %2C
' %27
" %22
( %2B
) %2C
~ %7E
7.3.- Color
Existen muchas propiedades cuyo valor es un color y para indicar un color, CSS
define cuatro formas diferentes, por nombre, por componentes hexadecimales,
por componentes enteras y por porcentajes.
o Por nombre: Los valores son:
aqua black blue fuchsia
gray green lime maroon
navy olive purple red
silver teal white yellow
o Componentes Hexadecimales: Ejemplo : #FFFFFF, Blanco y el #000000, Negro.
o Componentes Enteras: Ejemplo : rgb(255,255,255), Blanco y el rgb(0,0,0),
Negro.
o Porcentajes: Ejemplo : rgb(100%,100%,100%), Blanco y el rgb(0%,0%,0%),
Negro.
Ejemplo de XML:
<?xml version="1.0" encoding="UTF-7"?>
<?xml-stylesheet href="ejemplo9.css" type="text/css"?>
Tutorial de hojas de estilo para XML

Pgina
11


<POEMA>
<VERSO> La <NOMBRE>princesa</NOMBRE> est triste...
qu tendr la <NOMBRE>princesa</NOMBRE>?</VERSO>
<VERSO> Los suspiros se escapan de su boca de
fresa,</VERSO>
<VERSO> que ha perdido la risa, que ha perdido el
color.</VERSO>
<VERSO>... </VERSO>
</POEMA>
Ejemplo de CSS usando colores:
POEMA {display: block; background-image: url(fondo-azul.jpg) }
VERSO {display: block; font-size: 20pt; font-family: sans-
serif; color:rgb(10,50,40)}
NOMBRE {font-style: italic; font-family: Helvetica;
color:#33CCAA }
7.4.- Palabras Clave
Estos son los valores ms variables de los cuatro y sern introducidas
detenidamente cuando se hable de cada una de las propiedades.
8.- Propiedades
8.1.- Display
La propiedad display determina como va a ser mostrado un elemento, qu
espacio le va a ser asignado para su aparicin en pantalla.
Existen cuatro posibles valores para esta propiedad: block, inline, list-item y
none.
o block: Estos elementos se separan unos de otros generalmente por un salto de
lnea.
o inline: El elemento forma parte de la lnea.
o list-item: El elemento es parte de una lista. En este caso existen tres
propiedades adicionales que son:
list-style-type: Que puede tomar los valores disc, (propiedad por
defecto), circle, square, decimal, lower-roman, upper-roman, lower-
alpha, upper-alpha y none.
list-style-image: Toma la URL de la imagen a mostrar.
list-style-position: Determina si los indicativos de la lista van a ser
puestos fuera outside o dentro inside de la lista.
o none: Esta propiedad ser para los elementos invisibles, puesto que no se les
asignar espacio para ser mostrados.
Nota: La opcin list-item no est soportada por ningn navegador actualmente.
EJERCICIO 2:
Averigua cual es la opcin por defecto de la propiedad display en el navegador y
Tutorial de hojas de estilo para XML

Pgina
12


prueba la herencia con el fichero del primer ejemplo.
8.2.- Propiedad white-space
Esta propiedad indica si los espacios, tabuladores o retornos de carro del fichero
fuente son significativos o no. Los valores que puede tomar son normal, nowrap
y pre.
o normal: El funcionamiento es exactamente igual que en HTML y es la opcin
por defecto.
o nowrap: Respeta los saltos de lnea pero dentro de cada lnea actua de forma
normal.
o pre: Actua como la etiqueta PRE en HTML.
EJERCICIO 3:
Comprobar si en nuestro navegador est implementada esta propiedad.
8.3.- Propiedades de Fuentes
Existen cinco propiedades para los tipos de letra que son:
o font-family: El valor que puede tomar es una lista separadas por comas de
nombres de familias de fuentes que son (por ejemplo): Serif, sans-serif,
Monospace, Cursive ,Fantasy, etc.. La lista proporciona simplemente un orden
de preferencia a la hora de mostrar el texto. Tambin es posible indicar el
nombre concreto de la fuente detras del nombre de su familia. El valor de esta
propiedad se hereda por los elementos anidados o hijos.
o font-style: Los valores disponibles son normal, italic y oblique(igual que italic).
o font-variant: Puede tomar dos valores normal y small-caps(todas maysculas y
las maysculas ms grandes) .
o font-weight: Los valores que puede tomar son normal, bold, bolder, lighter,
100 ... 900.
o font-size: El tamao puede ser especificado como un tamao normal ( 14pt
por ejemplo) o mediante una palabra clave.
Con palabras clave:
xx-small
x-small
small
medium (opcin por defecto)
large
x-large
xx-large
Todas estas medidas son relativas a la fuente activa en la pgina.
Otra forma de expresar tamao con palabras clave de forma relativa es
teniendo en cuenta el tamao de fuente del padre, esto se puede hacer
expresando el tamao mediante un porcentaje o mediante larger o
Tutorial de hojas de estilo para XML

Pgina
13


smaller
Existe una propiedad que engloba todas las propiedades relacionadas con la
fuente denominada font. Esta propiedad toma como valor una lista de valores
separados por espacios cuyo orden debe ser: estilo, variante y ancho de fuente
que deben aparecer al principio en cualquier orden y adems cualquiera de ellos
puede ser omitido. El siguiente elemento debe ser el tamao que no puede ser
omitido y justo despues y de forma opcional puede aparecer el caracter / y el
ancho de la lnea de escritura. El ltimo valor es la familia de la fuente y es un
valor que no se puede omitir.
Ejemplos de CSS para expresar caractersticas de una fuente.
POEMA {font: bold x-large Helvetica, sans-serif }
POEMA {font: italic smaller serif }
POEMA {font: italic 14pt/100pt serif }
EJERCICIO 4:
Realiza pruebas en tu fichero para comprobar que todas las opciones funcionan.
8.4.- Color
Esta propiedad se puede expresar mediante una palabra clave, nmeros
decimales, porcentajes o un nmero hexadecimal. Esta propiedad es heredada
por los elementos hijos.
8.5.- Propiedades BackGround
Esta propiedad expresa el color del fondo y puede tomar valores de color o
valores de la direccin de una imagen y engloba a varias propiedades
individuales.
o background-color: Los valores posibles son cualquier expresin de color.
Tambien admite el valor transparent que hace que el elemento tome el color
del elemento superior, es el valor por defecto.
o background-image: Como valor puede tomar cualquier direccin relativa o
absoluta de una imagen con la funcin url(). Si para un elemento se especifica
esta propiedad y la anterior, el orden de precedencia hace que aparezca como
fondo la imagen.
Si esta propiedad se aplica al elemento principal, la imagen se toma
como la propiedad background del elemento BODY de HTML. en
cualquier otro caso se aplica slo al espacio del elemento.
o background-repeat: Esta propiedad indica cmo se utiliza la imagen de fondo
asignada para rellenar el fondo. Los valores que puede tomar son: repeat,
repeat-x, repeat-y y no-repeat.
o background-attachment: Los posibles valores son scroll y fixed. Nota: Esta
propiedad no la soporta ningn navegador.
o background-position: Indica la posicin de la imagen con respecto a la ventana
Tutorial de hojas de estilo para XML

Pgina
14


del navegador. Los valores que puede tomar son:
Palabras clave: top, center, bottom, left, rigth.
Porcentajes: Se puede indicar la posicin indicando un porcentaje con
respecto al elemento padre. Se deben dar dos porcentajes, x e y
respectivamente.
Posiciones absolutas: utilizando dos medidas para la x y la y
respectivamente.
Ejemplos de cada una de las anteriores son:.
POEMA {background-image: url(fondo-azul.jpg);
background-repeat:no-repeat;
background-position: bottom}
POEMA {background-image: url(fondo-azul.jpg);
background-repeat:no-repeat;
background-position: 25% 50%}
POEMA {background-image: url(fondo-azul.jpg);
background-repeat:no-repeat;
background-position: 1cm 3cm}
POEMA {background-image: url(fondo-azul.jpg);
background-repeat:no-repeat;
background-position: top right}
Al igual que con las propiedades de las fuentes la propiedad background
engloba las 5 anteriores. El valor de esta propiedad es una lista de elementos
separados por espacios en el orden background-image, background-color,
background-repeat, background-attachment y background-position.
EJERCICIO 5:
Realiza en el fichero css de ejemplo las modificaciones necesarias para que
aparezca la imagen de fondo sin repetirse en diferentes posiciones del
navegador.
EJERCICIO 6:
Realiza las mismas pruebas pero asignando un color de fondo.
8.6.- Propiedades Text
Este conjunto de propiedades resumen la apariencia del texto.
En este grupo hay 8 propiedades:
o word-spacing: Permite expander o contraer el espacio entre palabras. Puede
tomar cualquien valor de longitud y el valor normal es 1em.
o letter-spacing: Permite expander o contraer el espacio entre letras. Puede
tomar cualquien valor de longitud y el valor normal es 0.3em.
o text-decoration: Puede tomar uno de estos cinco valores: none, underline,
overline, line-through y blink. Y ninguno son autoexcluyentes excepto blink.
o vertical-align: Especifica la posicin relativa de un elemento respecto a la lnea
de escritura. Los valores que puede tomar son baseline, sub, super, top, text-
top, middle, bottom y text-bottom.
o text-transform: Permite indicar que tipo de letra utilizar. Los valores
Tutorial de hojas de estilo para XML

Pgina
15


permitidos son capitalize, uppercase, lowercase y none.
o text-align: Indica la alineacin del texto left, right, center y justify. Se aplica a
elementos de bloque.
o text-indent: Indica la indentacin de la primera lnea de los elementos de
bloque. Los posibles valores es cualquier medida de longitud.
o line-height: Indica la distancia entre una lnea de escritura y la siguiente. Puede
tomar cualquier valor absoluto de longitud o un porcentaje que indica la altura
con respecto al alto de la letra.
EJERCICIO 7:
Formatear el fichero XML de ejemplo para que aparezcan dos etiquetas con un
tamao de letra diferente.
8.7.- Propiedades Box
Este conjunto de propiedades permite especificar las propiedades de ancho, alto,
margenes, bordes de los espacios para mostrar los elementos.
En este grupo se incluyen:
30. Propiedades de mrgenes: Especifican la cantidad de espacio que se aade a un
bloque fuera de su borde. Se especifican mediante:
margin-top
margin-bottom
margin-left
margin-right
La propiedad margin incluye a las otras cuatro recibiendo cuatro
valores top, bottom right y left.
La consecuencia de estas propiedades depende de si el elemento es de
bloque o es un elemento in-line.
31. Propiedades de bordes: Los bordes se pueden especificar con:
a. border-style: que puede tomar los valores
dotted ..........
dashed - - - - -
solid ----------
double ==========
froove (no soportado)
ridge (con volumen)
inset (borde 3D hacia dentro)
outset(borde 3D hacia fuera)
La forma de especificar un borde es por ejemplo:
VERSO {display: block; border-style: dotted dashed
solid double } /* -> top, left, bottom, right*/
VERSO {display: block; border-style: dotted dashed
solid } /* -> top, dashed(left, right), bottom*/
VERSO {display: block; border-style: dotted dashed }
/* ->dotted(top, bottom), dashed (left, right)*/
VERSO {display: block; border-style: dotted } /* ->
Tutorial de hojas de estilo para XML

Pgina
16


dotted (top, left, bottom, right)*/
b. border-width: Que engloba border-bottom-width, border-top-width, border-right-width
y border-left-width. Cada uno toma un valor de longitud.
c. border-color: Especifica los colores de los bordes, y admite, uno, dos,
tres o cuatro valores de colores.
Las propiedades de los bordes se agrupan tambien como:
border-top
border-right
border-bottom
border-left
border
Cada una de las cuatro primeras puede admitir valores de ancho, estilo y
color para cada uno de los bordes.
La ultima propiedad border admite valores de ancho, estilo y color para
los cuatro bordes.
32. Propiedades de ajuste: Especifican el espacio entre el bloque y el borde del bloque. Se
especifica mediante:
padding-bottom
padding-top
padding-left
padding-right
Todas admiten un valor de longitud. Y se agrupan las cuatro como
padding.
33. Propiedades de tamao: Es posible obligar a una caja a tener unas dimensiones
determinadas. Las propiedades que te permiten esto son width y height. Los valores por
defecto de estas propiedades es auto. Se aplican a elementos de bloque.
34. Propiedades de posicionamiento: Su utilidad es para cambiar la posicin por
defecto de cada caja y son float y clear.
float: Puede ser inicializada a none, left o right. Hace flotar un
elemento a la derecha o izquierda de su posicin dentro del texto. Se
utiliza mucho con imgenes.
clear: Especifica si un elemento puede o no tener y donde elementos
flotantes. Los valores posibles son : none, left, both y right. Si se
especifica que no puede tener elementos flotantes a la derecha,
clear:right por ejemplo y los tiene el texto se mover hacia abajo hasta
que el elemento flotante desaparezca.
EJERCICIO 8:
Formatear el fichero XML de ejemplo para que aparezca todo en un cuadrado de
color con bordes 4 pixels .
Tutorial de hojas de estilo para XML

Pgina
17



1.- CSS 2 para XML
La especificacin de CSS2 fue publicada en W3C en 1998 tanto para HTML como para
XML, aunque es con XML donde toma la potencia real que tiene.
CSS2 incorpora herramientas para los desarrolladores WEB y para los diseadores y no
slo aade funcionabilidad sino que tambin redefine algunas de las ya especificadas en
CSS1. Estas nuevas caractersticas permiten al usuario selecionar y formatear elementos
de forma precisa.
Se han aadido pseudoClases, y pseudoElementos que permiten dar formato a objetos
seleccionados, objetos apuntados, etc. Se han aadido los tipos de medios. Esta nueva
caracterstica permite crear formatos diferentes dependiendo del tipo de mdio que se
vaya a utilizar para mostrarlo, video, TV, impresoras, etc. Se aade la base para manejar
otros lenguajes como el Chino y el rabe.
2.- Nuevos Selectores
Utilizando CSS2 se pueden seleccionar elementos basandose en un patron. El
navegador busca ese patrn y despues aplica las reglas especificadas para l.
En la siguiente tabla se resumen todos los selectores y su forma de trabajar.
Patrn Significado
* Selector universal.

E Selector de elementos del tipo E.

E F
Selector del elemento del tipo F descendiente de un
elemento del tipo E.

E > F Selectiona cualquier elemento F hijo del elemento E.

E:first-child
Selecciona todos los elementos E que son el primer hijo del
elemento padre de que se trate.

E:active Selecciona todos los elementos E que estn seleccionados.

E:hover Seleciona los elementos E apuntados por el ratn.

E:lang(c)
Selecciona los elementos E que estn diseados para
utilizar el lenguaje c utilizando el atributo xml:lang.

Tutorial de hojas de estilo para XML

Pgina
18


E + F
Selecciona todos los elementos F cuyo inmediato hermano
es un elemento E.

E[atributo]
Selecciona todos los elementos E con el atributo
especificado.

E[atributo="mi_valor"]
Selecciona todos los elementos E con el atributo
especificado e inicializado a mi_valor.

E[atributo~="mi_valor"]
Selecciona todos los elementos E con el atributo
inicializado a una lista de valores entre el que se incluye
mi_valor

E[lang|="codigo"]
Selector de todos los elementos E con codigo asignado al
atributo lang.

E#mi_ID
Selecciona cualquier elemento E con el atributo ID igual a
mi_ID.

1. Selector Universal: Sirve para especificar propiedades comunes a todos los elementos.
Tambin se puede combinar con pseudo-clases para asignar propiedades a elementos
con un determinado atributo.
Por ejemplo:
*:before{content:"_________"}

Muestra una raya delante de cada elemento.
2. Selectores de descendientes: Es posible seleccionar elementos descendientes o hijos
de un elemento determinado. Supongamos un poema que est dividido en estrofas y
estas en versos. Con el selector
3. POEMA * VERSO

Este selector representa todos los versos que son nietos de un poema. Con el
selector
ESTROFA > VERSO

Se seleccionan los versos que son hijos directos de una estrofa.
Todo esto se puede combinar realizando por ejemplo la siguiente seleccion:
POEMA ESTROFA > VERSO:first-letter

Tutorial de hojas de estilo para XML

Pgina
19


Selecciona la primera letra de todos los versos dentro de una estrofa y a su vez
hijas de un poema.
4. Selectores de hermanos: Este selector utiliza el smbolo +.
Por ejemplo:
ESTROFA + NOTAS

Selecciona el elemento NOTAS que existe justo detras de un elemento
ESTROFA.
5. Selectores por Atributos: Un selector por atributos especifica un atributo o valor de
ste para seleccionar elementos.
Por ejemplo:
ESTROFA[NUMERO="2"]

Selecciona el elemento ESTROFA que tiene el valor 2 en el atributo NUMERO.
6. Selectores @rules
o @page: Mediante esta directiva se selecciona la caja que engloga a una
pgina. As el programador puede especificar propiedades de dicha pgina
como los margenes, orientacin, etc. Esta directiva puede tomar tres pseudo-
clases. Todo esto se ampliar en el formateo de pginas.
o @import: Sirve al igual que en CSS1 para incluir ficheros de reglas de estilo
externos. As es posible combinar ficheros sencillos de reglas para formatear
textos ms complicados incluyendo varios ficheros de estilos sencillos. La
forma de utilizar esta regla es la siguiente:
Por ejemplo:
@import url(poesia.css)

Pero a diferencia de CSS1 se debe especificar para qu tipo de mdio
est hecho el fichero de estilo:
@import url(poesia.css) screen;

Este ejemplo inluir el fichero poesia.css para mostrar en pantalla
nuestro fichero XML. En el caso de que existieran reglas que se solapan
en CSS2 tiene mayor importancia la regla del fichero de estilos asignado
al fichero XML frente a los ficheros importados.
o @media: Representan el conjunto posible de medios en los que va a poder ser
visualizado el fichero XML y representa el conjunto de caractersticas para
Tutorial de hojas de estilo para XML

Pgina
20


cada uno de estos medios.
o @media print{ POESIA{font-size: 20pt; font-family:
Times, serif}}
Indica que cuando el texto sea impreso, se utilizar una fuente de tamao
20pt y una letra Times o serif en su defecto.
Tambien se pueden especificar reglas comunes:
@media print,screen{ POESIA{font-size: 20pt; font-family:
Times, serif}}
Que indica que para la impresora y para la pantalla una POESIA se
mostrar con las mismas caractersticas.
Los diferentes tipos de medios son:
all: Todos los dispositivos.
aural: Dispositivos de audicin. Dispositivo continuo y sonoro.
braille: Dispositivos de salida Braille. Dispositivo continuo y tactil.
embossed: Dispositivos paginados y tctiles, por ejemplo una
impresora Braille.
handheld: Dispositivo visual, como un Palm Pilot.
print: Impresoras, se trata de un dispositivo paginado y visual.
projection: Representa a presentaciones projectadas sobre una
pantalla, sobre trasparencias o sobre una impresora. Se trata de un
dispositivo paginado y visual.
screen: Representa a la salida por monitor. Se trata de un dispositivo
continuo y visual.
tty: Monitores antiguos monocromo. Es continuo y visual.
tv: Representa la telvisin y es un dispositivo visual y aural.
No todos los tipos de medios estn soportados todava pero lo estarn.
El tipo de cada medio determina las propiedades que cada uno puede
manejar puesto que algunas propiedades solo se pueden aplicar a
dispositivos paginados por ejemplo.
o @font-face: Este mecanismo proporciona una descripcion de como el software
debe seleccionar las fuentes de acuerdo con las especificaciones del usuario.
Busqueda exacta: El software elige una fuente local de la misma
familia que la especificada.
Busqueda inteligente: El software elige una fuente que est disponible
en el cliente y que es la ms parecida en apariencia a la solicitada.
Sistesis de fuente: El software construye la fuente ms parecida a la
solicitada.
Busqueda en el servidor: El software descarga la fuente desde una
direccin especificada.
Busqueda combinada: El software construye la fuente pero mientras
est descargndose la fuente especificada mediante una direccin.
Tutorial de hojas de estilo para XML

Pgina
21


Cada declaracin lleva una informacin detallada acerca de la fuente.
Estas declaraciones se denominan descriptores de fuente y se pueden
clasificar en tres tipos:
Los que proporcionan un enlace entre el uso de una regla de fuente y
su descripcin.
Los que proporcionan una direccin de localizacin ya sea de la fuente
o de sus caractersticas.
Los que proporcionan informacin de caracter para la fuente.
Cada regla font-face se aplica a un slo tipo de fuente por lo que si en el
fichero CSS utiliza ms de una ser necesario especificar una regla font-
face para cada tipo de fuente.
@font-face {font-family: "Comic Sans"; src:
url(http://metalab.unc.edu/xml/fonts/comicsans)}
o @charset: Existen tres formas de especificar el conjunto de caracteres en el
que el fichero de estilo CSS est escrito y tienen la siguiente precedencia.
Un parametro charset en un campo Content-Type.
Una regla @charset.
Especificacin de algn atributo o propiedad asociado con el
documento como encoding.
Cada fichero CSS puede tener una sla regla @charset que debe
aparecer en la primera lnea del documento. El conjunto de caracteres
asignado debe ser un nombre vlido por ejemplo:
@charset "ISO-8859-1"
Esta regla asigna el conjunto de caracteres del latn al fichero.
7. Pseudo-Elementos Existen dos pseudo-elementos :before y :after que seleccionan el
elemento anterior y posterior al elemento que se aplican.
8. ESTROFA:after {content: "________"}
En este ejemplo se indica que despues de cada estrofa, se debe colocar
"________". Si en vez de un texto se desea indicar algn smbolo se pueden
utilizar estas dos opciones:
o open-quote: Insertan una comilla de apertura.
o close-quote: Insertan una comilla de cierre.
9. Pseudo-Clases Este tipo de selectores basa su operacin en la posicin del ratn, en el
foco de los elementos, etc. La aplicacin de estas pseudo-clases es en algunos casos
autoexcluyente. En el caso de que existiera algn conflicto el orden de aplicacin de
reglas en cascada lo resuelve.
o :first-child: Seleccionan el primer hijo de un elemento.
o :hover: Selecciona el elemento que el ratn est apuntando. Slo funciona en
Mozilla.
o :active: Selecciona el elemento que tiene esta activo (sobre el que se pincha).
Slo funciona en Mozilla.
Tutorial de hojas de estilo para XML

Pgina
22


o :lang():Selecciona los elementos en un lenguaje especfico.
o AUTOR:lang(es) {direction:"rtl"}
Esta regla cambia la direccin de los elementos escritos en espaol.
o :rigth, :left, :first: Se aplican slo a la directiva @page. Y te permite indicar
diferentes estilos para las pginas pares, impares o para la primera pgina.
o @page:right {margin: 3cm}
o @page:left {margin: 5cm}
o @page:first {margin: 7cm}
EJERCICIO 9:
Formatear el fichero XML de ejemplo para que aparezca la primera letra de los
contenidos de varias etiquetas, de diferente tamao.
3.- Formateo de pginas
Se indican mediante @page y se aplican a una pgina no a un elemento individual de
XML. CSS2 asume que las pginas son rectngulares. Las propiedades disponibles son:
1. size: Especifica el alto y ancho de una pgina y se puede especificar mediante una o
dos longitudes absolutas o mediante las palabras clave auto, portrait, landscape y
inherit.
2. margin: Especifica el margen de la pgina. mediante uno, dos, tres o cuatro longitudes
absolutas.
3. mark: Sirve para situar marcas en la pgina. La propiedad puede tomar cuatro valores
crop, cross, inherit y none.
4. page: Esta propiedad es utilizada con cualquier elemento diferente de @page. Y sirve
para asignar propiedades a la pgina de un elemento. Los valores que puede tomar
page son identificados mediante reglas @page.
Por ejemplo:
@page narrow {size: 9cm 18cm}
@page rotated {size: landscape}
POEMA {page: narrow}
ESTROFA {page: rotated}
5. page-break-before, page-break-after, page-break-inside: Inserta un salto de pgina
antes, despues o en el medio del elemento que la define. Se aplica a cualquier
elemento diferente de @page.Cuando alguna de estas propiedades se inicializa a auto
nunca se fuerza un salto de pgina. Los valores que puede tomar son always y avoid
que fuerzan o impiden un salto.
4.- Formateo Visual
4.1.- Display
CSS2 aade nuevas formas de la propiedad display que son:
inline: Esto cambia respeco a CSS1 puesto que esta es la opcin por defecto.
Tutorial de hojas de estilo para XML

Pgina
23


block:
list-item:
run-in y compact: Formatean la salida segn inline o block dependiendo del contexto.
No estn en uso todava.
marker: identifica un bloque que contiene caracteres generados desde el fichero de
estilo. Se utiliza slo con los pseudo elementos :before y :after.
table, : Para elementos tablas.
inline-table:Para tablas en lnea.
table-row-group:: Para grupos de celdas en una fila.
table-header-group: Para grupos de celdas de cabecera.
table-footer-group: Para grupos de celdas de pie.
table-row: Lnea de tabla.
table-column-group: Para grupos de celdas en una columna.
table-column: Columna de tabla.
table-cell: Celda de una tabla.
table-caption: Titulo de una tabla.
none: El elemento no posee espacio, as que es invisible
Por ejemplo:
POESIA {display: table}
ESTROFA{display:table-row}
VERSO{display:table-cell}
Este ejemplo alinea todos los versos en celdas. El resultado es una tabla de tres
columnas, puesto que en cada estrofa existen tres versos.
EJERCICIO 10:
Realiza los cambios necesarios para que aparezcan los versos en una tabla.
4.2.- Height y Width
Estas dos propiedades permiten fijar el tamao de la caja que contiene a cada elemento.
El tamao por defecto de una caja de un elemento se calcula segn su contenido, pero
este calculo se puede modificar mediante seis propiedades:
min-width:Mnima anchura del elemento.
max-width:Mxima anchura del elemento.
min-height: Mnima altura del elemento.
max-height: Mxima altura del elemento.
height: Altura.
width: Anchura.
EJERCICIO 11:
Comprobar cual es la implementacin de estas propiedades en nuestro navegador.
4.3.- Overflow
Cuando el tamao de la caja asignado es menor que el necesario, entonces esta
propiedad permite especificar qu hacer con la parte no visible. Las posibilidades son:
Tutorial de hojas de estilo para XML

Pgina
24


auto: Automticamente mostrar el texto con scroll o no.
hidden: Ocultar el texto no visible
scroll: Muestra barras de scroll para poder ver la totalidad del texto.
visible: Muestra todo el texto.
EJERCICIO 12:
Mostrar cada estrofa en una ventana independiente con barras de scroll.
4.4.- Clip
Indica qu porcin del texto debe mostrarse cuando existe un overflow. la forma de
indicarlo es mediante la funcin rect(top, bottom, left, right).
Ejemplo de utilizacin:
VERSO {height: 80px; width: 150px; overflow:auto; clip:
rect(5px,5px,5px,5px) }
Nota: Esta propiedad slo funciona en el IExplorer 5.0.
4.5.- Visibility
La visibilidad de un elemento puede ser visible, hidden, collapse ( Lo mismo que
hidden en algunos elementos pero es diferente en tablas por ejemplo ), y inherit.
EJERCICIO 13:
Explica la diferencia entre hidden y poner la propiedad display con none.
4.6.- Cursor
Se trata de la propiedad que especifica el cursor del ratn cuando el elemento es
apuntado por ste. Los posibles valores son:
auto: El que el browser tenga por defecto.
crosshair: La flecha.
default: El cursor por defecto de cada plataforma.
hand: Una mano.
move: Icono de movimiento.
e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize y w-resize: Son los
diferentes cursores de cambio de tamao y apuntadores en diferentes direcciones.
text: Cursor para el texto.
wait: Cursor de espera.
help: Cursor de ayuda.
Nota: Esta propiedad slo funciona en el IExplorer 5.0.
4.7.- Colores
CSS2 Aade una nueva forma de asignar colores y es utilizando los mismos colores que
Tutorial de hojas de estilo para XML

Pgina
25


el entorno est utilizando. Algunas de las posibilidades son:
Color Descripcin
ActiveBorder Borde de una ventana activa
Background Color de fondo del escritorio
ButtonHighlight Boton seleccionado
ButtonShadow Sombra de los botones
ButtonText Color del texto de los botones
Highlight Elementos seleccionados
HighlightText Texto seleccionado
InactiveBorder Borde inactivo
InactiveCaption Color de un ttulo inactivo
InactiveCaptionText Color del texto de un ttulo inactivo
InfoBackground Color de fondo de la ayuda
InfoText Color del texto de la ayuda
Menu Menu
MenuText Texto del men
Scrollbar Barra de scroll
ThreeDDarkShadow Sombra oscura en 3D
ThreeDFace Cara principal en 3D
ThreeDHighlight Cara de iluminacin en 3D
ThreeDLightShadow Sombra clara 3D
ThreeDShadow Sombra 3D
Window Ventana
Tutorial de hojas de estilo para XML

Pgina
26


WindowFrame Frame de la ventana
WindowText Texto de la ventana
4.8.- Fuentes
CSS2 aporta una serie de propiedades nuevas para las fuentes que son:
1. font-size-adjust: La facilidad para entender una fuente depende de su parmetro x-
height. Esta propiedad preserva el valor de este parmetro ante posibles desajustes.
Admite valores como ".58". Es otra forma de espresar el tamao de una fuente pero
mediante el parmetro x-height.
2. font-stretch: Especifica el espacio entre caracteres. Los posibles valores que puede
tomar son:
o normal
o ultra-condensed
o extra-condensed
o condensed
o semi-condensed
o semi-expanded
o expanded
o extra-expanded
o ultra-expanded
o wider
o narrower
o inherit
Nota: Esta propiedad no funciona en Mozilla.
4.9.- text-shadow
Especifica el color y tamao de la sombra de un texto. El formato es: text-shadow: color
distancia-h-texto, distancia-v-texto
VERSO {text-shadow: red -5pt -5pt}
Nota: No est disponible en Mozilla.
4.10.- Vertical-align
Especifica el desplazamiento del texto respecto a la base de la lnea. Puede tomar los
valores baseline, sub, super, top, middle, bottom, text-top y text-bottom.
5.- Formateo de Cajas
CSS2 aade opciones que nos permiten situar una caja en un aposicin concreta, dentro
de otra caja o en una ventana.
Tutorial de hojas de estilo para XML

Pgina
27


Para ello se utilizan las propiedades de posicionamiento y las propiedades outline.
5.1.- Propiedades Outline
La diferencia entre este tipo de lnea y un borde es que el borde se aade al ancho de la
caja mientras que una lnea de este tipo no.
1. outline-style: Es anloga a border-style y toma los mismos valores.
2. outline-width: Indica el grosor de la lnea y puede tomar thin, medium y thick.
3. outline-color: Igual que cualquier color
4. outline: Resume las tres anteriores. tomando los datos en el orden ancho, estilo y color
Nota: No est disponible en Mozilla.
5.2.- Propiedades de posicionamiento
Este conjunto de propiedades manejan la posicin de una caja. El nombre de la
propiedad es position y los valores que puede tomar son:
static: Es el valor por defecto.
relative: Toma una posicin relativa a su normal posicionamiento. Esta nueva posicin
se indican mediante las propiedades top y left.
absolute: La nueva posicin del elemento se fija respecto al bloque que lo contiene.
Esta nueva posicin se indican mediante las propiedades top y left. El resultado no
oculta los elementos solapados.
fixed: La nueva posicin del elemento se fija respecto a la esquina superior izquierda
del browser. Esta nueva posicin se indican mediante las propiedades top y left. Oculta
los elementos que se solapan.
EJERCICIO 14:
Muestra el fichero sonatinaFormateo.xml y formatea tu fichero de ejemplo de forma
parecida.
EJERCICIO 15:
Haz un segundo CSS para tu fichero de ejemplo. (que no se parezca en nada al primero)
Un fichero CSS contiene una serie de reglas de estilo o, tambin llamadas, unidades css.
Dichas unidades css se componen de un selector(normalmente el nombre de una etiqueta de
nuestro documento XML) y una lista o cadena de estilos. Dicha lista consta de un conjunto de
pares de elementos separados por el caracter ; donde cada par, est formado por el nombre
de una propiedad y un valor, separndose con el caracter :
Sintaxis:

Selector {propiedad:valor; propiedad:valor; ... propiedad:valor}


Tutorial de hojas de estilo para XML

Pgina
28


Enlaces
http://www.w3c.org/Style/CSS: Pgina principal de las CSS
http://www.w3.org/TR/REC-CSS1 : Especificacin de las CSS1
http://www.w3.org/TR/REC-CSS2/ : Especificacin de las CSS2
http://zvon.org/xxl/CSS2Reference/Output/index.html: Referencias de CSS 2
con ejemplos
http://geneura.ugr.es/~gustavo/css/css.shtml: Tutorial sobre CSS1 para HTML