Curso XML
Hojas de estilo

Indice

1.- ¿Qué es CSS?
2.- CSS para HTML vs CSS para XML
3.- Cómo especificar un fichero CSS
4.- Reglas generales de las reglas de Estilo
4.1.- Unidades CSS
4.2.- Selectores
4.3.- El atributo STYLE
4.4.- Herencia
4.5.- Estilos en Cascada
4.6.- Comentarios
4.7.- Valores
4.7.1.- Longitud
4.7.2.- URL
4.7.3.- Color
4.7.4.- Palabras Clave
4.8.- Propiedades
4.8.1.- Display
4.8.2.- Propiedad white-space
4.8.3.- Propiedades de Fuentes
4.8.4.- Color
4.8.5.- Propiedades BackGround
4.8.6.- Propiedades Text
4.8.7.- Propiedades Box

5.- Introducción a CSS 2
5.1.- Nuevos Selectores
5.2.- Formateo de páginas
5.3.- Formateo Visual
5.3.1.- Display
5.3.2.- Height y Width
5.3.3.- Overflow
5.3.4.- Clip
5.3.5.- Visibility
5.3.6.- Cursor
5.3.7.- Colores
5.3.8.- Fuentes
5.3.9.- text-shadow
5.3.10.- Vertical-align
5.4.- Formateo de Cajas
5.4.1.- Propiedades Outline
5.4.2.- Propiedades de posicionamiento

6.- Ejercicios 7.- Enlaces

Curso XML
Hojas de estilo

arriba

¿Qué es CSS?

CSS es un lenguaje sencillo para la aplicación de estilos a un elemento XML. Un documento XML puede estar formateado de muchas diferentes formas y propósitos por lo que sería muy útil utilizar un sólo documento XML y diferentes posibles formateos dependiendo del uso que se le vaya a dar al documento..

CSS, Cascading Style Sheets, hojas de estilo en cascada, fue introducido en 1996 como el standar para añadir información de estilo a los documentos HTML. Pero este uso estaba restringido sólo a las etiquetas propias de HTML. Con XML estas reglas de estilo pueden aplicarse a todos los elementos.

CSS tiene dos versiones denominadas CSS1 y CSS2 aparecidas en 1996 y 1998 respectivamente. Aunque el problema en este caso no es el standar, sino el procesamiento de este puesto que en la actualidad no todos los navegadores están preparados para su procesamiento.

CSS se expresa mediante reglas en un fichero de texto plano. Cada regla contiene el nombre del elemento al que se aplica y el estilo definido.

arriba

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 e procesamiento de instrucciones, simplemente la hoja de estilos se incluye como un ta style.
Los navegadores HTML tienen un formateo restringido, mientras que XML no.

arriba

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

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet href="mi_fichero.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://geneura.ugr.es/~maribel/xml/css/mi_fichero.css". En el ejemplo el fichero se denomina mi_fichero.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:
Salva el fichero "sonatina.xml" en tu usuario con el nombre sonNNNAP1.xml y añadele los tags y directivas necesarias para que se formatee con el fichero sonNNNAP1.css de formatos.
Crea el fichero sonNNNAP1.css vacio y muestra el fichero sonNNNAP1.xml en el navegador.

arriba

Reglas generales de las reglas de Estilo

arriba

Unidades CSS

En este apartado se va a indicar cómo se especifica la lista de estilos a aplicar a un selector. La lista consta de un conjunto de pares de elementos separados por el carácter ";" formados por el nombre de una propiedad y un valor y separados por el carácter ":".

Sintaxis:

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

arriba

Selectores

Una regla de estilo consta de dos partes: El selector y la cadena de estilos.

El selector más utilizado es simplemente el nombre de la etiqueta a la que se refiere la regla. Tambien el selector puede especificar multiples elementos o elementos con un determinado ID o una determinada CLASS.

La agrupación de elementos se realiza mediante una lista de los nombres de las etiquetas separadas por comas. A esta práctica se le denomina Agrupación de selectores.

Existe un tipo de elementos especiales denominados pseudo-elementos que hacen referencia a dos elementos especiales que algunas veces necesitan estilos específicos como son los elementos first-letter y first-line. La forma de referenciarlos es : ELEMENTO:pseudo-elemento Lista_de_Estilos

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 2 de fichero XML
<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>... </VERSO>
</POEMA>

Ejemplo 2 de fichero CSS
POEMA { display: block }
VERSO.PRIMERO{ color: blue }
VERSO{ display: block; color: black}

Nota: Esta opción no está disponible todavía en el navegador Mozilla, aunque sí funciona en el IE5. Esa práctica no está muy recomendada puesto que siempre es posible evitarla utilizando una etiqueta distinta para estos elementos.

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 3 de fichero XML
<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>
</POEMA>

Ejemplo 3 de fichero CSS
POEMA {display:block;}
VERSO#PRIMERO{color: blue}
VERSO{ 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 práctica se procede:

Ejemplo 4 de fichero XML
<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 4 de fichero CSS
POEMA {display:block;}
VERSO {color: black}
PRIMERO {display:block}
PRIMERO VERSO {color: blue}

arriba

El atributo STYLE

En estrañas circunstancias, es posible que el usuario desee aplicar un estilo concreto, una sóla vez a un elemento sin modificar el fichero con extensión css, para esto se utiliza el atributo STYLE.

Ejemplo 5 de fichero XML
<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>

Ejemplo 5 de fichero CSS
POEMA {display:block;}
VERSO {color: black; color: black}

El atributo STYLE posee mayor precedencia que el estilo definido en el fichero css.

arriba

Herencia

No es necesario que todas las reglas especifiquen que estilo utilizar puesto que los elementos específicos heredan por defecto el estilo de los elementos más generales que los incluyen.

Ejemplo 6 de fichero XML
<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 6 de fichero CSS
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 tamaño de letra y redefine aquello que le interesa como la familia de fuente que utilizar. Hay que tener cuidado son 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 tamaños salgan muy dispares, para evitar este problema se suelen utilizan medidas de fuente relativas, o porcentajes que veremos más adelante.

arriba

Estilos en Cascada

A un mismo fichero es posible adjuntar más 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 aplicación de estas reglas denominado estilos en cascada.

Existen varias formas de asignar un fichero de estilo:

xml-stylesheet.
La directiva @import.
Utilizando el browser ya sea para utilizar los estilos por defecto o para utilizar un fichero de estilos específico.

La primera forma está clara. Respecto a la segunda debe incluirse en la primera línea del fichero css y el formato es el siguiente: @import url(direccion relativa o absoluta);

El orden de importación de los ficheros de estilos es el orden de las declaraciones, y as referencias circulares no están permitidas.

El orden en el que se aplican las reglas es muy sencillo. Generalmente si existen más de una regla para un mismo elemento, se aplica la regla más específica. Por ejemplo: En una regla con un atributo ID y CLASS tendría preferencia la aplicación 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.

En concreto se aplica:

Reglas del autor.
Reglas importadas.
Orden de reglas en el fichero css.

Nota:El orden en cascada puede a veces llevar a confusión.

arriba

Comentarios

Los comentarios en las hojas de estilo son similares a los comentarios de C. /*... */.

arriba

Valores

Los valores pueden ser de cuatro tipos:

Longitud
URL
Color
Palabra clave

arriba

Longitud

La longitud se utiliza para propiedades que expresan tamaño y se pueden utilizar tres tipos de longitud:

Longitud absoluta: Pueden ser:
- Inch; in
- Centimetros; cm
- Milimetros; mm
- Puntos; pt
- Picas; pc
Longitud relativa: Pueden ser:
- EME; em
- Equis; ex
- Pixel; px

Porcentages: Se puede expresar un tamaño relativo como un porcentage del valor actual de la propiedad.

arriba

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 dirección relativa o absoluta que puede o no ir con comillas simples o dobles.

Ejemplo 7 de fichero XML
<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 7 de fichero CSS
POEMA {display: block; background-image: url(fondo-azul.jpg) }
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

arriba

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.

Por nombre: Los valores son:

aqua black blue fuchsia

gray green lime maroon

navy olive purple red

silver teal white yellow
Componentes Hexadecimales: Ejemplo : #FFFFFF, Blanco y el #000000, Negro.
Componentes Enteras: Ejemplo : rgb(255,255,255), Blanco y el rgb(0,0,0), Negro.
Porcentajes: Ejemplo : rgb(100%,100%,100%), Blanco y el rgb(0%,0%,0%), Negro.

Ejemplo 8 de fichero XML
<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 8 de fichero CSS
POEMA {display: block; background-image: url(fondo-azul.jpg) }
VERSO {display: block; font-size: 20pt; font-family: sans-serif}
NOMBRE {font-style: italic; font-family: Helvetica }

arriba

Palabras Clave

Estos son los valores más variables de los cuatro y serán introducidas detenidamente cuando se hable de cada una de las propiedades.

arriba

Propiedades

arriba

Display

La propiedad display determina como va a ser mostrado un elemento, qué espacio le va a ser asignado para su aparición en pantalla.

Existen cuatro posibles valores para esta propiedad: block, inline, list-item y none.

block: Estos elementos se separan unos de otros generalmente por un salto de línea.
inline: El elemento forma parte de la línea.
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.
none: Esta propiedad será para los elementos invisibles, puesto que no se les asignará espacio para ser mostrados.

Nota: La opción list-item no está soportada por ningún navegador actualmente.

EJERCICIO 2:
Averigua cual es la opción por defecto de la propiedad display en el navegador y prueba la herencia con el fichero sonNNNAP1.css.

arriba

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.

normal: El funcionamiento es exactamente igual que en HTML y es la opción por defecto.
nowrap: Respeta los saltos de línea pero dentro de cada línea actua de forma normal.
pre: Actua como la etiqueta PRE en HTML.

EJERCICIO 3:
Comprobar si en nuestro navegador está implementada esta propiedad.

arriba

Propiedades de Fuentes

Existen cinco propiedades para los tipos de letra que son:

font-family: El valor que puede tomar es una lista separadas por comas de nombres de familias de fuentes que son: Serif, sans-serif, Monospace, Cursive y Fantasy. La lista proporciona simplemente un orden de preferencia a la hora de mostrar el texto. También 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.
font-style: Los valores disponibles son normal, italic y oblique.
font-variant: Puede tomar dos valores normal y small-caps.
font-weight: Los valores que puede tomar son normal, bold, bolder, lighter, 100 ... 900.
font-size: El tamaño puede ser especificado como un tamaño normal ( 14pt por ejemplo) o mediante una palabra clave.
Con palabras clave:
- xx-small
- x-small
- small
- medium (opción por defecto)
- large
- x-large
- xx-large
Todas estas medidas son relativas a la fuente activa en la página.
Otra forma de expresar tamaño con palabras clave de forma relativa es teniendo en cuenta el tamaño de fuente del padre, esto se puede hacer expresando el tamaño mediante un porcentaje o mediante larger o 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 además cualquiera de ellos puede ser omitido. El siguiente elemento debe ser el tamaño que no puede ser omitido y justo despues y de forma opcional puede aparecer el caracter / y el ancho de la línea de escritura. El último valor es la familia de la fuente y es un valor que no se puede omitir.

Ejemplos de reglas para espresar características 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.

arriba

Color

Esta propiedad se puede expresar mediante una palabra clave, números decimales, porcentajes o un número hexadecimal. Esta propiedad es heredada por los elementos hijos.

arriba

Propiedades BackGround

Esta propiedad expresa el color del fondo y puede tomar valores de color o valores de la dirección de una imagen y engloba a varias propiedades individuales.

background-color: Los valores posibles son cualquier expresión de color. Tambien admite el valor transparent que hace que el elemento tome el color del elemento superior, es el valor por defecto.
background-image: Como valor puede tomar cualquier dirección relativa o absoluta de una imagen con la función 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 sólo al espacio del elemento.
background-repeat: Esta propiedad indica cómo 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.
background-attachment: Los posibles valores son scroll y fixed. Nota: Esta propiedad no la soporta ningún navegador.
background-position: Indica la posición de la imagen con respecto a la ventana del navegador. Los valores que puede tomar son:
- Palabras clave: top, center, bottom, left, rigth.
- Porcentajes: Se puede indicar la posición 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 sonNNNAP1.css 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.

arriba

Propiedades Text

Este conjunto de propiedades resumen la apariencia del texto.

En este grupo hay 8 propiedades:

word-spacing: Permite expander o contraer el espacio entre palabras. Puede tomar cualquien valor de longitud y el valor normal es 1em.
letter-spacing: Permite expander o contraer el espacio entre letras. Puede tomar cualquien valor de longitud y el valor normal es 0.3em.
text-decoration: Puede tomar uno de estos cinco valores: none, underline, overline, line-through y blink. Y ninguno son autoexcluyentes excepto blink.
vertical-align: Especifica la posición relativa de un elemento respecto a la línea de escritura. Los valores que puede tomar son baseline, sub, super, top, text-top, middle, bottom y text-bottom.
text-transform: Permite indicar que tipo de letra utilizar. Los valores permitidos son capitalize, uppercase, lowercase y none.
text-align: Indica la alineación del texto left, right, center y justify. Se aplica a elementos de bloque.
text-indent: Indica la indentación de la primera línea de los elementos de bloque. Los posibles valores es cualquier medida de longitud.
line-height: Indica la distancia entre una línea 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 sonNNNAP1.xml para que aparezca el autor y el título en un tamaño de letra diferente.

arriba

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:

Propiedades de márgenes: Especifican la cantidad de espacio que se añade 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.
Propiedades de bordes: Los bordes se pueden especificar con:
1. border-style: que puede tomar los valores
  - dotted
  - dashed
  - solid
  - double
  - froove
  - ridge
  - inset
  - outset
  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 }-> dotted (top, left, bottom, right)
2. border-width: Que engloba border-bottom-width, border-top-width, border-right-width y border-left-width. Cada uno toma un valor de longitud.
3. 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.
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.
Propiedades de tamaño: 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.
Propiedades de posicionamiento: Su utilidad es para cambiar la posición 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 posición dentro del texto. Se utiliza mucho con imágines.
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 sonNNNAP1.xml para que aparezca el poema en una posición separada del borde de la página.

arriba

Introducción a CSS 2

La especificación 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 diseñadores y no sólo añade funcionabilidad sino que también redefine algunas de las ya especificadas en CSS1. Estas nuevas características permiten al usuario selecionar y formatear elementos de forma precisa.

Se han añadido pseudoClases, y pseudoElementos que permiten dar formato a objetos seleccionados, objetos apuntados, etc. Se han añadido los tipos de medios. Esta nueva característica permite crear formatos diferentes dependiendo del tipo de médio que se vaya a utilizar para mostrarlo, video, TV, impresoras, etc. Se añade la base para manejar otros lenguajes como el Chino y el Árabe.

arriba

Nuevos Selectores

Utilizando CSS2 se pueden seleccionar elementos basandose en un patron. El navegador busca ese patrón y despues aplica las reglas especificadas para él.

En la siguiente tabla se resumen todos los selectores y su forma de trabajar.

Patrón	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:link	Selecciona todos los elementos E de un enlace que no ha sido todavía visitado.
E:visited	Seleciona todos los elementos E enlace que han sido visitados
E:active	Selecciona todos los elementos E que están seleccionados.
E:hover	Seleciona los elementos E apuntados por el ratón.
E:focus	Selecciona los elementos E que tienen el foco.
E:lang(c)	Selecciona los elementos E que están diseñados para utilizar el lenguaje natural c utilizando el atributo sml:lang.
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.

Selector Universal: Sirve para especificar propiedades comunes a todos los elementos. También 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.
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
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

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

Selecciona el elemento NOTAS que existe justo detras de un elemento ESTROFA.
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.
Selectores @rules
- @page: Mediante esta directiva se selecciona la caja que engloga a una página. Así el programador puede especificar propiedades de dicha página como los margenes, orientación, etc. Esta directiva puede tomar tres pseudo-clases. Todo esto se ampliará en el formateo de páginas.
- @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 más 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 médio 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.
- @media: Representan el conjunto posible de medios en los que va a poder ser visualizado el fichero XML y representa el conjunto de características para cada uno de estos medios.
  @media print{ POESIA{font-size: 20pt; font-family: Times, serif}}
  
  Indica que cuando el texto sea impreso, se utilizará una fuente de tamaño 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 características.
  Los diferentes tipos de medios son:
  - all: Todos los dispositivos.
  - aural: Dispositivos de audición. Dispositivo continuo y sonoro.
  - braille: Dispositivos de salida Braille. Dispositivo continuo y tactil.
  - embossed: Dispositivos paginados y táctiles, 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 telévisión y es un dispositivo visual y aural.
  No todos los tipos de medios están soportados todavía pero lo estarán.
  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.
- @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 más parecida en apariencia a la solicitada.
  - Sistesis de fuente: El software construye la fuente más parecida a la solicitada.
  - Busqueda en el servidor: El software descarga la fuente desde una dirección especificada.
  - Busqueda combinada: El software construye la fuente pero mientras está descargándose la fuente especificada mediante una dirección.
  Cada declaración lleva una información detallada a cerca 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 descripción.
  - Los que proporcionan una dirección de localización ya sea de la fuente o de sus características.
  - Los que proporcionan información de caracter para la fuente.
  Cada regla font-face se aplica a un sólo tipo de fuente por lo que si en el fichero CSS utiliza más 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)}
- @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.
  - Especificación de algún atributo o propiedad asociado con el documento como encoding.
  Cada fichero CSS puede tener una sóla regla @charset que debe aparecer en la primera línea del documento. El conjunto de caracteres asignado debe ser un nombre válido por ejemplo:
  @charset "ISO-8859-1"
  
  Esta regla asigna el conjunto de caracteres del latín al fichero.
Pseudo-Elementos Existen dos pseudo-elementos :before y :after que seleccionan el elemento anterior y posterior al elemento que se aplican.
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 algún símbolo se pueden utilizar estas dos opciones:
- open-quote: Insertan una comilla de apertura.
- close-quote: Insertan una comilla de cierre.
Pseudo-Clases Este tipo de selectores basa su operación en la posición del ratón, en el foco de los elementos, etc. La aplicación de estas pseudo-clases es en algunos casos autoexcluyente. En el caso de que existiera algún conflicto el orden de aplicación de reglas en cascada lo resuelve.
- :first-child: Seleccionan el primer hijo de un elemento.
- :link, :visited, :active: Son mutuamente excluyentes. Para aclarar que hacen cada regla es mejor poner el siguiente ejemplo:
  AUTOR:link {color:"red"}
  AUTOR:visited {color:"gray"}
  AUTOR:active {color:"lime"}
  
  Estas tres reglas permiten mostrar un supuesto enlace de color diferente si no ha sido visitado, si ha sido visitado o si está activo.
- :hover: Selecciona el elemento que el ratón está apuntando.
- :focus: Selecciona el elemento que tiene el foco.
- :lang():Selecciona los elementos en un lenguaje específico.
  AUTOR:lang(he) {direction:"rtl"}
  
  Esta regla cambia la dirección de los elementos escritos en hebreo.
- :rigth, :left, :first: Se aplican sólo a la directiva @page. Y te permite indicar diferentes estilos para las páginas pares, impares o para la primera página.
  @page:right {margin: 3cm}
  @page:left {margin: 5cm}
  @page:first {margin: 7cm}br>

EJERCICIO 9:
Formatear el fichero sonNNNAP1.xml para que aparezca la primera letra de cada uno de los versos de diferente tamaño.

EJERCICIO 10:
Realiza los cambios necesarios para que aparezca la primera letra de cada verso dentro de cada estrofa de un tamaño diferente.

arriba

Formateo de páginas

Se indican mediante @page y se aplican a una página no a un elemento individual de XML. CSS2 asume que las páginas son rectángulares. Las propiedades disponibles son:

size: Especifica el alto y ancho de una página y se puede especificar mediante una o dos longitudes absolutas o mediante las palabras clave auto, portrait, landscape e inherit.
margin: Especifica el margen de la página. mediante uno, dos, tres o cuatro longitudes absolutas.
mark: Sirve para situar marcas en la página. La propiedad puede tomar cuatro valores crop, cross, inherit y none.
page: Esta propiedad es utilizada con cualquier elemento diferente de @page. Y sirve para asignar propiedades a la página 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}
page-break-before, page-break-after, page-break-inside: Inserta un salto de página 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 página. Los valores que puede tomar son always y avoid que fuerzan o impiden un salto.

arriba

Formateo Visual

arriba

Display

CSS2 añade nuevas formas de la propiedad display que son:

inline: Esto cambia respeco a CSS1 puesto que esta es la opción por defecto.
block:
list-item:
run-in y compact: Formatean la salida según inline o block dependiendo del contexto. No están en uso todavía.
marker: identifica un bloque que contiene caracteres generados desde el fichero de estilo. Se utiliza sólo con los pseudo elementos :before y :after.
table, : Para elementos tablas.
inline-table:Para tablas en línea.
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: Línea 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 11:
Realiza los cambios necesarios para que aparezcan los versos en una tabla.

arriba

Height y Width

Estas dos propiedades permiten fijar el tamaño de la caja que contiene a cada elemento. El tamaño por defecto de una caja de un elemento se calcula según su contenido, pero este calculo se puede modificar mediante seis propiedades:

min-width:Mínima anchura del elemento.
max-width:Máxima anchura del elemento.
min-height: Mínima altura del elemento.
max-height: Máxima altura del elemento.
height: Altura.
width: Anchura.

EJERCICIO 12:
Comprobar cual es la implementación de estas propiedades en nuestro navegador.

arriba

Overflow

Cuando el tamaño de la caja asignado es menor que el necesario, entonces esta propiedad permite especificar qué hacer con la parte no visible. Las posibilidades son:

auto: Automáticamente 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 13:
Mostrar cada estrofa en una ventana independiente con barras de scroll.

arriba

Clip

Indica qué porción del texto debe mostrarse cuando existe un overflow. la forma de indicarlo es mediante la función rect(top, bottom, left, right).

Ejemplo de utilización:

VERSO {height: 80px; width: 150px; overflow:auto; clip: rect(5px,5px,5px,5px) }

Nota: Esta propiedad sólo funciona en el IExplorer 5.0.

arriba

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 14:
Explica la diferencia entre hidden y poner la propiedad display con none.

arriba

Cursor

Se trata de la propiedad que especifica el cursor del ratón 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 tamaño y apuntadores en diferentes direcciones.
text: Cursor para el texto.
wait: Cursor de espera.
help: Cursor de ayuda.

Nota: Esta propiedad sólo funciona en el IExplorer 5.0.

arriba

Colores

CSS2 Añade una nueva forma de asignar colores y es utilizando los mismos colores que el entorno esté utilizando. Algunas de las posibilidades son:

Color	Descripción
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 título inactivo
InactiveCaptionText	Color del texto de un título 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 iluminación en 3D
ThreeDLightShadow	Sombra clara 3D
ThreeDShadow	Sombra 3D
Window	Ventana
WindowFrame	Frame de la ventana
WindowText	Texto de la ventana

arriba

Fuentes

CSS2 aporta una serie de propiedades nuevas para las fuentes que son:

font-size-adjust: La facilidad para entender una fuente depende de su parámetro x-height. Esta propiedad preserva el valor de este parámetro ante posibles desajustes. Admite valores como ".58". Es otra forma de espresar el tamaño de una fuente pero mediante el parámetro x-height.
font-stretch: Especifica el espacio entre caracteres. Los posibles valores que puede tomar son:
- normal
- ultra-condensed
- extra-condensed
- condensed
- semi-condensed
- semi-expanded
- expanded
- extra-expanded
- ultra-expanded
- wider
- narrower
- inherit
Nota: Esta propiedad no funciona en Mozilla.

arriba

text-shadow

Especifica el color y tamaño de la sombra de un texto. El formato es: text-shadow: color distancia-h-texto, distancia-v-texto

VERSO {text-shadow: red -5pt -5pt}Dpto de Arquitectura y Tecnología de los Computadores

Nota: No está disponible en Mozilla.

arriba

Vertical-align

Especifica el desplazamiento del texto respecto a la base de la línea. Puede tomar los valores baseline, sub, super, top, middle, bottom, text-top y text-bottom.

arriba

Formateo de Cajas

CSS2 añade opciones que nos permiten situar una caja en un aposición concreta, dentro de otra caja o en una ventana.

Para ello se utilizan las propiedades de posicionamiento y las propiedades outline.

arriba

Propiedades Outline

La diferencia entre este tipo de línea y un borde es que el borde se añade al ancho de la caja mientras que una línea de este tipo no.

outline-style: Es análoga a border-style y toma los mismos valores.
outline-width: Indica el grosor de la línea y puede tomar thin, medium y thick.
outline-color: Igual que cualquier color
outline: Resume las tres anteriores. tomando los datos en el orden ancho, estilo y color

Nota: No está disponible en Mozilla.

arriba

Propiedades de posicionamiento

Este conjunto de propiedades manejan la posición 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 posición relativa a su normal posicionamiento. Esta nueva posición se indican mediante las propiedades top y left.
absolute: La nueva posición del elemento se fija respecto al bloque que lo contiene. Esta nueva posición se indican mediante las propiedades top y left. El resultado no oculta los elementos solapados.
fixed: La nueva posición del elemento se fija respecto a la esquina superior izquierda del browser. Esta nueva posición se indican mediante las propiedades top y left. Oculta los elementos que se solapan.

arriba

Ejercicios

EJERCICIO 15:
Muestra el fichero sonatinaFormateo.xml y formatea tu fichero sonNNNAP1.xml de forma análoga.

EJERCICIO 16:
Repite todos los pasos anteriores y produce dos ficheros de formateo diferentes para el fichero notesalves.xml.

EJERCICIO 17:
Repite todos los pasos anteriores y produce dos ficheros de formateo diferentes para el fichero Fuenteovejuna.xml.

arriba

Enlaces

http://www.w3c.org/Style/CSS
http://zvon.org/xxl/CSS2Reference/Output/index.html

aqua	black	blue	fuchsia
gray	green	lime	maroon
navy	olive	purple	red
silver	teal	white	yellow

Curso XML Hojas de estilo

Indice

Curso XML Hojas de estilo

¿Qué es CSS?

CSS para HTML vs CSS para XML

Cómo especificar un fichero CSS

Reglas generales de las reglas de Estilo

Unidades CSS

Selectores

El atributo STYLE

Herencia

Estilos en Cascada

Comentarios

Valores

Longitud

URL

Color

Palabras Clave

Propiedades

Display

Propiedad white-space

Propiedades de Fuentes

Color

Propiedades BackGround

Propiedades Text

Propiedades Box

Introducción a CSS 2

Nuevos Selectores

Formateo de páginas

Formateo Visual

Display

Height y Width

Overflow

Clip

Visibility

Cursor

Colores

Fuentes

text-shadow

Vertical-align

Formateo de Cajas

Propiedades Outline

Propiedades de posicionamiento

Ejercicios

Enlaces

Curso XML
Hojas de estilo

Curso XML
Hojas de estilo