Download
1 / 77
840 likes | 1.28k Views
Tema 5: Presentación de documentos XML con CSS. Ricardo Eíto Brun Sevilla, 23-25 de octubre 2002. Hojas de estilo - ventajas CSS y XSL Estructura y sintáxis CSS Selectores CSS. Guíon del tema. Propiedades CSS Asociar hojas de estilo a documentos XML. Hojas de estilo.
E N D
Tema 5: Presentación de documentos XML con CSS Ricardo Eíto Brun Sevilla, 23-25 de octubre 2002
Hojas de estilo - ventajas CSS y XSL Estructura y sintáxis CSS Selectores CSS Guíon del tema • Propiedades CSS • Asociar hojas de estilo a documentos XML
Hojas de estilo • Los lenguajes de marcas (SGML, XML, HTML, etc.) diferencian entre: • La estructura y contenido informativo del documento • Su 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 se puede presentar: • En un documento o archivo a parte – opción preferible • Dentro del documento, en su cabecera
Hojas de estilo • La utilización de hojas de estilo permite: • Garantizar 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) • Publicar 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. • Posicionar elementos en la página.
Lenguajes para crear hojas de estilo • Distintas alternativas para los distintos lenguajes de marcas: • SGML -> FOSI, DSSSL • HTML -> CSS • XML -> XSL FO y CSS • 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 • XSLT – Lenguaje de transformación, no de presentación
Estructura de una hoja de estilo CSS • 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 • La regla cuenta con: • Un 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.
Estructura de una regla CSS • Detrás del selector, se escriben entre llaves, las declaraciones. • En cada declaración se asigna valor a una propiedad (nombre reservado) • 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 < ; > • Podemos escribir las declaraciones en líneas aparte, o seguidas (no se interpreta el espacio en blanco)
Ejemplo: regla CSS P { font-family : Arial ; color : blue ; font-size : 12pt } H1 { display : block ; font-family : Verdana ; font-size : 12pt } titulo, term { display : block ; font-family : Arial ; font-size : 24pt }
El atributo CLASS • Este atributo puede añadirse a cualquier elemento HTML • Se utiliza para “marcar” ciertas ocurrencias de un elemento, para: • Asociarlas a una regla de una hoja de estilo y • Presentarlas de forma diferente al resto de ocurrencias de ese mismo elemento. • La sintáxis correcta es: Elemento.valor { declaraciones }
El atributo CLASS <HTML> <HEAD> <LINK REL="stylesheet" TYPE="text/css" HREF="ejemplo_6.css"> </HEAD> <BODY> <P CLASS="autor">Este manual explica cómo trabajar con el navegador Netscape Navigator, actualmente en la versión 4.5.</P> <P>Haga doble clic sobre el icono de Netscape Navigator en el escritorio de Windows.</P> </BODY> </HTML>
El atributo CLASS H1 {font-weight:bold;color : blue} P.AUTOR { font-size : 12pt; color : black; font-family : "Times New Roman"; text-indent : 2,5em} P { font-size : 10pt; color : blue; font-family : Arial; text-indent : 3em}
Atributo ID • Su propósito es asignar a las instancias de un elementos un identificador único. • Este identificador permitirá: • Crear enlaces que tengan como destino un elemento con un ID determinado, y • Aplicar formateos y reglas de estilo a un elemento específico del documento, diferenciándolo de todos los demás. • Para indicar en una regla que se quiere aplicar un formato a un elemento con un ID determinado, se escribirá como selector el valor del atributo ID precedido del signo #, tal y como se muestra a continuación: #valorID { declaraciones }
Pseudo-selectores para enlaces HTML • El elemento <A…> se utiliza en HTML para indicar el origen y el destino de enlaces hipertexto. • Junto con el atributo HREF determina el origen de un hipervínculo. • Junto con el atributo NAME determinará el destino de un hipervínculo. • Por ejemplo, para crear un enlace con HTML que nos llevase a la URL http://www.sedic.es, incluiríamos el siguiente elemento: <a href=”http://www.sedic.es>Website Sedic</a>
Pseudo-selectores para enlaces HTML • CSS incluye tres pseudo-selectores dedicados al elemento A: • A:link • A:actived • A:visited • A:link permite indicar cual debe ser la presentación inicial del enlace. • A:actived permite indicar cual debe ser la presentación del enlace en el momento en el que el usuario hace clic en él. • A:visited permite indicar cual debe ser la presentación del enlace cuando el usuario ya ha hecho clic en él. • De esta forma se puede diferenciar claramente qué enlaces han sido seleccionados y cuales no.
Ejemplo pseudo-selectores HTML <?xml version=”1.0”?> <?xml-stylesheet type=”text/css” href=”hojaEstilo.css”?> <documento xmlns:HTML=”http://www.w3.org/Profiles/XHTML-transitional”> <titulo>Ejemplo con enlace hipertexto</titulo> <par>Esta es la primera parte del documento de ejemplo.</par> <par>Haz clic en este <HTML:A HREF=”http://www.anayamultimedia.es”>enlace para visitar el sitio web de Anaya Multimedia.</HTML:A></par> </documento>
Ejemplo pseudo-selectores HTML * { display : block ; font-family : verdana ; font-size : 12pt } HTML\:A { color : green } HTML\:A:actived { color : red } HTML\:A:visited { color : black }
Ejemplo pseudo-selectores before y after <?xml version=”1.0”?> <bibliografia> <libro> <autor>Federico Pareja</autor> <titulo>Novela de juventud</titulo> <ano-publicacion>2000</ano-publicacion> </libro> <libro> <autor>Juan Valverde</autor> <titulo>Historias de mi ciudad</titulo> <ano-publicacion>2000</ano-publicacion> </bibliografia>
Ejemplo pseudo-selectores before y after autor:before { content : “Autor: ” ; font-family : Arial ; font-size : 16 pt; color : red ; font-weight : bold } titulo:before { content : “Título: ” ; font-family : Arial ; font-size : 16 pt; color : red ; font-weight : bold }
Ejemplo pseudo-selectores before y after ano-publicacion:before { content : “Publicado en: ” ; font-family : Arial ; font-size : 16 pt; color : red ; font-weight : bold } * { display : block ; font-family : Arial ; font-size : 16pt; margin-top : 16pt }
Colores • En una hoja de estilo CSS también se pueden especificar qué colores se deben utilizar • Los colores se aplican a letras, bordes, color de fondo, etc. • CSS establece tres mecanismos para indicar un color • nombre reservado para el color: red, blue, yellow, etc. • código hexadecimal correspondiente al color o • código RGB, que indica la distribución del color rojo, verde y azul en la composición de un color determinado. • Podemos conocer el código RGB o hexadecimal de un color determinado con cualquier herramienta de diseño: Paint Shop Pro, Photoshop, etc.
Asociar docs XML con hojas estilo CSS • Se utiliza la instrucción de procesamiento <?xml-stylesheet...?> • la instrucción de procesamiento crea un vínculo desde el documento XML hacia un archivo externo que contiene las instrucciones de formateo, y que tendrá la extensión .CSS. • La instrucción de procesamiento <?xml-stylesheet...?> se escribe a continuación de la declaración XML • Sintáxis: <?xml-stylesheet type="text/css“ href="Fichero.css">
Asociar docs XML con hojas estilo CSS • En la instrucción de procesamiento se utilizan dos calificadores: type y href.
Ejemplo <?xml version=”1.0”?> <?xml-stylesheet type=”text/css” href=”ejemplo_5.css”?> <documento> <seccion> <titulo>Estilos y formateo </titulo> </seccion> <seccion> <titulo>Hojas de estilo CSS</titulo> <p>Este es un documento de ejemplo asociado a una hoja de estilo con nombre ejemplo_5.css</p> </seccion> </documento>
Asociar docs HTML con hojas estilo CSS • Se utiliza el elemento LINK, que define una relación entre dos recursos: <LINK REL=“stylesheet” HREF=“url”> • El elemento LINK se escribe en el elemento HEAD
CSS - Propiedades • Las agrupamos en los siguientes apartados: • la propiedad DISPLAY • propiedades relativas al tipo de letra • propiedades aplicables a párrafos: espacio interlineal, márgenes, bordes, etc. • propiedades relativas a fondos de pantalla.
Propiedad display • Indica si el contenido de un elemento será visible o se ocultará. • En el primer caso, se podrá indicar si: • su contenido se va a mostrar en un bloque o párrafo aparte, o • si se va a mostrar en el mismo párrafo o bloque que el elemento que le precede. • La propiedad DISPLAY también se utiliza para formatear listas y tablas
Propiedad display • Acepta los siguientes valores:
Ejemplo Propiedad display datos-Personales { font-family : verdana; font-size : 12pt } nombre { display : inline } apellido-1 { display : inline } apellido-2 { display : inline } fecha-nac { display : block } datos-Academicos { display : none }
Ejemplo Datos-Personales { font-family : Tahoma; font-size : 18pt ; font-weight : bold ; color : red } Nombre { display : inline } Apellido-1, Apellido-2 { display : inline ; Text-transform : uppercase } Fecha-nac { display : block } datos-academicos {font-family : Arial ; font-size : 14pt; color : blue } titulo { display : block; font-variant : small-caps ; text-decoration : underline } centro-docente { font-style : italic } curso-inicio { display : inline } curso-fin { display : inline }
Ejemplo Titulo { display : block ; font-family : tahoma ; font-size : 14 pt; color : white ; background-color : red } P { font-family : Tahoma ; font-size : 10 pt ; display : block } p.ajustadoDerecha { text-align : right ; margin-top : 18pt} p.ajustadoIzquierda { text-align : left ; margin-top : 18pt } p.centrado { text-align : center ; margin-top : 18pt } p.justificado { text-align : justify ; margin-top : 18pt }
Ejemplo Titulo { display : block ; font-family : tahoma ; font-size : 14 pt; color : white ; background-color : red } P { font-family : Tahoma ; font-size : 10 pt ; display : block } p.ajustadoDerecha { text-align : right ; margin-top : 18pt ; ; line-height : 14pt } p.ajustadoIzquierda { text-align : left ; margin-top : 18pt ; line-height : 10pt } p.centrado { text-align : center ; margin-top : 18pt ; line-height : 24pt } p.justificado { text-align : justify ; margin-top : 18pt ; line-height : 16pt }
