Cascading Style Sheets 2 (CSS2) Para XML

CSS 2 Para XML

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.- CSS 2 para XML

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.

2.- 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:active	Selecciona todos los elementos E que están seleccionados.
E:hover	Seleciona los elementos E apuntados por el ratón.
E:lang(c)	Selecciona los elementos E que están diseñados para utilizar el lenguaje c utilizando el atributo xml: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 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 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.
- :hover: Selecciona el elemento que el ratón está apuntando. Sólo funciona en Mozilla.
- :active: Selecciona el elemento que tiene esta activo (sobre el que se pincha). Sólo funciona en Mozilla.
- :lang():Selecciona los elementos en un lenguaje específico.
```
          AUTOR:lang(es) {direction:"rtl"}
```
  Esta regla cambia la dirección de los elementos escritos en español.
- :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}
```

EJERCICIO 9:
Formatear el fichero XML de ejemplo para que aparezca la primera letra de los contenidos de varias etiquetas, de diferente tamaño.

3.- 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 y 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.

4.- Formateo Visual

4.1.- 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 10:
Realiza los cambios necesarios para que aparezcan los versos en una tabla.

4.2.- 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 11:
Comprobar cual es la implementación de estas propiedades en nuestro navegador.

4.3.- 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 12:
Mostrar cada estrofa en una ventana independiente con barras de scroll.

4.4.- 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.

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 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.

4.7.- 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

4.8.- 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.

4.9.- 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}

Nota: No está disponible en Mozilla.

4.10.- 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.

5.- 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.

5.1.- 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.

5.2.- 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.

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, también 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, separándose con el caracter :

Sintaxis:


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