1 Tema 5: Presentación de documentos XML con CSS Ricardo Eíto Brun Sevilla, 23-25 de octubre 2002

2 Guíon del tema Hojas de estilo - ventajas Hojas de estilo - ventajas CSS y XSL CSS y XSL Estructura y sintáxis CSS Estructura y sintáxis CSS Selectores CSS Selectores CSS  Propiedades CSS  Asociar hojas de estilo a documentos XML

3 Hojas de estilo Los lenguajes de marcas (SGML, XML, HTML, etc.) diferencian entre: Los lenguajes de marcas (SGML, XML, HTML, etc.) diferencian entre: La estructura y contenido informativo del documentoLa estructura y contenido informativo del documento Su presentación en pantalla o impresoraSu presentación en pantalla o impresora Una hoja de estilo contiene instrucciones sobre cómo se debe presentar un documento en pantalla o al imprimirlo Una hoja de estilo contiene instrucciones sobre cómo se debe presentar un documento en pantalla o al imprimirlo Una hoja de estilo se puede presentar: Una hoja de estilo se puede presentar: En un documento o archivo a parte – opción preferibleEn un documento o archivo a parte – opción preferible Dentro del documento, en su cabeceraDentro del documento, en su cabecera

4 Hojas de estilo La utilización de hojas de estilo permite: La utilización de hojas de estilo permite: Garantizar la presentación homogenea y consistente de una colección de documentosGarantizar la presentación homogenea y consistente de una colección de documentos Cambiar fácilmente las opciones de presentación, en un único lugar (la hoja de estilo CSS)Cambiar fácilmente las opciones de presentación, en un único lugar (la hoja de estilo CSS) Publicar un mismo contenido con distintas presentaciones, sin necesidad de modificar los documentosPublicar un mismo contenido con distintas presentaciones, sin necesidad de modificar los documentos Aplicar a la documentación HTML opciones de presentación avanzadas: espacio interlineal, márgenes, etc.Aplicar a la documentación HTML opciones de presentación avanzadas: espacio interlineal, márgenes, etc. Posicionar elementos en la página.Posicionar elementos en la página.

5 Lenguajes para crear hojas de estilo Distintas alternativas para los distintos lenguajes de marcas: Distintas alternativas para los distintos lenguajes de marcas: SGML -> FOSI, DSSSLSGML -> FOSI, DSSSL HTML -> CSSHTML -> CSS XML -> XSL FO y CSSXML -> XSL FO y CSS Las hojas de estilo CSS (Cascading Style Sheets), son la “mejor” opción para presentar documentación electrónica Las hojas de estilo CSS (Cascading Style Sheets), son la “mejor” opción para presentar documentación electrónica XSL FO – aún no ha evolucionado lo suficiente, es incompleta XSL FO – aún no ha evolucionado lo suficiente, es incompleta XSLT – Lenguaje de transformación, no de presentación XSLT – Lenguaje de transformación, no de presentación

6 Estructura de una hoja de estilo CSS Contiene una o más reglas Contiene una o más reglas Cada regla determina qué presentación se debe aplicar a una o más instancias de un elemento XML o HTML Cada regla determina qué presentación se debe aplicar a una o más instancias de un elemento XML o HTML La regla cuenta con: La regla cuenta con: Un selector – que identifica a qué instancias de los elementos que forman el documento se debe aplicar la reglaUn selector – que identifica a qué instancias de los elementos que forman el documento se debe aplicar la regla Unas declaraciones – que indican qué opciones de presentación se deben aplicar: tipo de letra, espacion interlineal, márgenes, etc.Unas declaraciones – que indican qué opciones de presentación se deben aplicar: tipo de letra, espacion interlineal, márgenes, etc.

7 Estructura de una regla CSS Detrás del selector, se escriben entre llaves, las declaraciones. Detrás del selector, se escriben entre llaves, las declaraciones. En cada declaración se asigna valor a una propiedad (nombre reservado) En cada declaración se asigna valor a una propiedad (nombre reservado) El nombre de la propiedad se separa del valor mediante dos puntos El nombre de la propiedad se separa del valor mediante dos puntos Las declaraciones de una misma regla, se separan entre sí mediante punto y coma Las declaraciones de una misma regla, se separan entre sí mediante punto y coma Podemos escribir las declaraciones en líneas aparte, o seguidas (no se interpreta el espacio en blanco) Podemos escribir las declaraciones en líneas aparte, o seguidas (no se interpreta el espacio en blanco)

8 Ejemplo: regla CSS P{font-family : Arial ; color : blue ; color : blue ; font-size : 12pt } font-size : 12pt } H1{ display : block ; font-family : Verdana ; font-size : 12pt } titulo, term { display : block ; font-family : Arial ; font-size : 24pt }

9 CSS - Selectores SelectorSintáxis Se aplica a: Universal * {declaraciones} Todos los elementos del documento. Selector de tipo Elem1{declaraciones } Todas las instancias u ocurrencias del elemento elem1 Selector de grupo Elem1,elem2{declar aciones} Todas las ocurrencias de los elementos que indican, y que se separan mediante comas Descendientes Elem1 elem2{declaraciones } Todos los elementos elem2 que son descendientes de los elementos elem1 Espacios de nombre HTML\:TABLE { declaraciones } Elementos que proceden de un espacio de nombres (HTML)

10 CSS - Selectores SelectorSintáxis Se aplica a: Hijo Elem1>elem2{declar aciones} Todos los elemento elem2 que son hijos directos de los elementos elem1 Adyacente Elem1+elem2{declar aciones} Todos los elementos elem2 que se encuentran inmediatamente a continuación de un elemento elem1. Es decir, a los elementos elem2 que van precedidos directamente por un elemento elem1. Selector de atributo Elem1[atr]{declaraci ones} Todos los elementos que contienen un atributo con nombre atr.

11 CSS - Selectores SelectorSintáxis Se aplica a: Selector de atributo con valor Elem[atr=val ]{declaracion es} Todos los elementos que contienen un atributo atr que recogen el valor val. Selector basado en el atributo CLASS Elem.val{dec laraciones} Todos los elementos Elem cuyo atributo CLASS recoja el valor val Selector basado en el atributo ID Elem#val{de claraciones} Todos los elementos elem cuyo atributo ID recoja el valor val. Selector de primera línea Elem.first- line{declaraci ones} A la primera línea de los elementos elem. Selector de primera letra Elem.first- letter{declar aciones} A la primera letra de los elementos elem. Pseudo-selectores before y after Elem:before { content:value } Escribe el valor de la propiedad content antes o después del contenido del elemento

12 El atributo CLASS Este atributo puede añadirse a cualquier elemento HTML Este atributo puede añadirse a cualquier elemento HTML Se utiliza para “marcar” ciertas ocurrencias de un elemento, para: Se utiliza para “marcar” ciertas ocurrencias de un elemento, para: Asociarlas a una regla de una hoja de estilo yAsociarlas a una regla de una hoja de estilo y Presentarlas de forma diferente al resto de ocurrencias de ese mismo elemento.Presentarlas de forma diferente al resto de ocurrencias de ese mismo elemento. La sintáxis correcta es: La sintáxis correcta es: Elemento.valor { declaraciones } Elemento.valor { declaraciones }