1 / 77

Tema 5: Presentación de documentos XML con CSS

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.

cinderella
Download Presentation

Tema 5: Presentación de documentos XML con CSS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


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

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

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

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

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

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

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

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

  9. CSS - Selectores

  10. CSS - Selectores

  11. CSS - Selectores

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

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

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

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

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

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

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

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

  20. Ejemplo pseudo-selectores HTML

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

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

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

  24. Ejemplo pseudo-selectores before y after

  25. Medidas y distancias en CSS

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

  27. Colores

  28. Colores

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

  30. Asociar docs XML con hojas estilo CSS • En la instrucción de procesamiento se utilizan dos calificadores: type y href.

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

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

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

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

  35. Propiedad display • Acepta los siguientes valores:

  36. Ejemplo Propiedad display

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

  38. Ejemplo Propiedad display

  39. Propiedades relativas al tipo de letra

  40. Propiedades relativas al tipo de letra

  41. Propiedades relativas al tipo de letra

  42. Propiedades relativas al tipo de letra

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

  44. Ejemplo

  45. Propiedades para bloques

  46. Ejemplo

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

  48. Ejemplo

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

  50. Ejemplo

More Related