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

Presentación del tema: "Tema 5: Presentación de documentos XML con CSS Ricardo Eíto Brun Sevilla, 23-25 de octubre 2002."— Transcripción de la presentación:

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 }

13 El atributo CLASS <HTML><HEAD> Este manual explica cómo Este manual explica cómo trabajar con el navegador Netscape trabajar con el navegador Netscape Navigator, actualmente en la versión Navigator, actualmente en la versión 4.5. 4.5. Haga doble clic sobre el icono de Haga doble clic sobre el icono de Netscape Navigator en el escritorio de Netscape Navigator en el escritorio de Windows. Windows. </BODY></HTML>

14 El atributo CLASS H1 {font-weight:bold;color : blue} H1 {font-weight:bold;color : blue} P.AUTOR { font-size : 12pt; P.AUTOR { font-size : 12pt; color : black; color : black; font-family : "Times New Roman"; font-family : "Times New Roman"; text-indent : 2,5em} text-indent : 2,5em} P { font-size : 10pt; P { font-size : 10pt; color : blue; color : blue; font-family : Arial; font-family : Arial; text-indent : 3em} text-indent : 3em}

15 Atributo ID Su propósito es asignar a las instancias de un elementos un identificador único. Su propósito es asignar a las instancias de un elementos un identificador único. Este identificador permitirá: Este identificador permitirá: Crear enlaces que tengan como destino un elemento con un ID determinado, yCrear 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.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: 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 } #valorID { declaraciones }

16 Pseudo-selectores para enlaces HTML El elemento se utiliza en HTML para indicar el origen y el destino de enlaces hipertexto. El elemento 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 HREF determina el origen de un hipervínculo. Junto con el atributo NAME determinará el destino 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: Por ejemplo, para crear un enlace con HTML que nos llevase a la URL http://www.sedic.es, incluiríamos el siguiente elemento:http://www.sedic.es Website Sedic Website Sedic

17 Pseudo-selectores para enlaces HTML CSS incluye tres pseudo-selectores dedicados al elemento A: 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: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: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. 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. De esta forma se puede diferenciar claramente qué enlaces han sido seleccionados y cuales no.

18 Ejemplo pseudo-selectores HTML http://www.w3.org/Profiles/XHTML- transitionalhttp://www.w3.org/Profiles/XHTML- transitional Ejemplo con enlace hipertexto Ejemplo con enlace hipertexto Esta es la primera parte del documento de ejemplo. Esta es la primera parte del documento de ejemplo. Haz clic en este enlace para visitar el sitio web de Anaya Multimedia. Haz clic en este enlace para visitar el sitio web de Anaya Multimedia. http://www.anayamultimedia.es </documento>

19 Ejemplo pseudo-selectores HTML * { display : block ; font-family : verdana ; font-family : verdana ; font-size : 12pt } 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 <bibliografia><libro> Federico Pareja Federico Pareja Novela de juventud Novela de juventud <ano-publicacion>2000</ano-publicacion></libro><libro> Juan Valverde Juan Valverde Historias de mi ciudad Historias de mi ciudad <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-family : Arial ; font-size : 16pt; font-size : 16pt; margin-top : 16pt } margin-top : 16pt }

24 Ejemplo pseudo-selectores before y after

25 Medidas y distancias en CSS MedidaDescripción cmCentímetros MmMilímetros Pt Puntos. Se utilizan principalmente para indicar el tamaño de la letra y el espacio interlineal. Un punto equivale 1/72 pulgadas. Pc Picas. Una pica equivale a 12 puntos. In Pulgadas (inches en inglés). Una pulgada equivale a 2,54 cm.

26 Colores En una hoja de estilo CSS también se pueden especificar qué colores se deben utilizar 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. Los colores se aplican a letras, bordes, color de fondo, etc. CSS establece tres mecanismos para indicar un color CSS establece tres mecanismos para indicar un color nombre reservado para el color: red, blue, yellow, etc.nombre reservado para el color: red, blue, yellow, etc. código hexadecimal correspondiente al color ocó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.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. 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 Nombre color Código hexadecimal blue0000FF green008000 redFF0000 yellowFFFF00 black000000 aqua00FFFF fuchsiaFF00FF Gray808080

28 Colores Nombre color Código hexadecimal Olive808080 SilverC0C0C0 whiteFFFFFF Purple800080 Navy000080 Maroon800000 lime00FF00 Teal008080

29 Asociar docs XML con hojas estilo CSS Se utiliza la instrucción de procesamiento Se utiliza la instrucción de procesamiento 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 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 se escribe a continuación de la declaración XML La instrucción de procesamiento se escribe a continuación de la declaración XML Sintáxis: Sintáxis:

30 Asociar docs XML con hojas estilo CSS En la instrucción de procesamiento se utilizan dos calificadores: type y href. En la instrucción de procesamiento se utilizan dos calificadores: type y href. Type Tipo de la hoja de estilo. En el caso de las hojas de estilo CSS, recogerá el valor text/css escrito entre comillas dobles. Href URL absoluta o relativa de la hoja de estilo, es decir, del archivo con extensión.CSS que contiene las instrucciones de formateo. Se escribe entre comillas dobles.

31 Ejemplo Estilos y formateo Hojas de estilo CSS Este es un documento de ejemplo asociado a una hoja de estilo con nombre ejemplo_5.css

32 Asociar docs HTML con hojas estilo CSS Se utiliza el elemento LINK, que define una relación entre dos recursos: Se utiliza el elemento LINK, que define una relación entre dos recursos: El elemento LINK se escribe en el elemento HEAD El elemento LINK se escribe en el elemento HEAD Rel Tipo de relación. En el caso de las hojas de estilo CSS, recogerá el valor stylesheet escrito entre comillas dobles. href URL absoluta o relativa de la hoja de estilo, es decir, del archivo con extensión.CSS que contiene las instrucciones de formateo. Se escribe entre comillas dobles.

33 CSS - Propiedades Las agrupamos en los siguientes apartados: Las agrupamos en los siguientes apartados: la propiedad DISPLAYla propiedad DISPLAY propiedades relativas al tipo de letrapropiedades relativas al tipo de letra propiedades aplicables a párrafos: espacio interlineal, márgenes, bordes, etc.propiedades aplicables a párrafos: espacio interlineal, márgenes, bordes, etc. propiedades relativas a fondos de pantalla.propiedades relativas a fondos de pantalla.

34 Propiedad display Indica si el contenido de un elemento será visible o se ocultará. Indica si el contenido de un elemento será visible o se ocultará. En el primer caso, se podrá indicar si: En el primer caso, se podrá indicar si: su contenido se va a mostrar en un bloque o párrafo aparte, osu 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.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 La propiedad DISPLAY también se utiliza para formatear listas y tablas

35 Propiedad display Acepta los siguientes valores: Acepta los siguientes valores: None El elemento permanecerá oculto Block El elemento se muestra en un bloque o párrafo aparte. Inline El elemento se muestra en el mismo bloque o párrafo que el elemento anterior, siempre que el elemento anterior se le haya aplicado también el valor inline a la propiedad DISPLAY. List- item El elemento se muestra como una entrada en una lista. Table El elemento y los elementos que contiene se van a presentar en forma de tabla.

36 Ejemplo Propiedad display

37 datos-Personales { font-family : verdana; font-size : 12pt } 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 PropiedadDescripción Font-family Tipo de letra que se va a utilizar: Arial, Times, Verdana, etc. Font-style Indica si el texto tiene que aparecer en cursiva o no. Acepta los valores normal, oblique e italic. Font-variant Permite utilizar versales. Acepta los valores regular - para no aplicar versales - o small-caps – para utilizar versales -. MSIE5 no soporta esta propiedad correctamente, y utiliza mayúsculas en lugar de versales. Font-size Tamaño de la letra. Se suele indicar en puntos, por ejemplo 8pt, 10pt ó 12pt.

40 Propiedades relativas al tipo de letra PropiedadDescripción Color Color de la letra. Se puede indicar mediante la palabra reservada al color, por ejemplo red, blue, white, etc., o mediante su código hexadecimal o el código RGB Font-weight Intensidad de la letra. Permite indicar si la letra debe ser negrita o no. Toma como valor un número comprendido en una escala numérica que va de 100 a 900. El valor 400 es el correspondiente a la letra normal o regular, y el 700 corresponde a la negrita. La intensidad de la letra también se puede indicarse con los valores ‘normal’, ‘bold’

41 Propiedades relativas al tipo de letra PropiedadDescripción Text- decoration Indica si el texto se debe escribir subrayado, tachado, o con una línea por encima. Acepta los valores underline, overline, line-through y none, que es el valor por defecto. Text-transform Convierte el texto marcado a mayúsculas, a minúsculas, o escribe la letra inicial de cada palabra en mayúscula y el resto en minúsculas. Acepta los valores capitalize, uppercase, lowercase o none, que es el valor por defecto vertical-align Se utiliza para mostrar subíndices y superíndices. Acepta los valores sub, super, middle y baseline, que es el valor por defecto

42 Propiedades relativas al tipo de letra PropiedadDescripción font Esta propiedad permite indicar, en una única declaración, el estilo, intensidad, tamaño y tipo de letra. Esta propiedad equivale a las propiedades font-style, font-weight, font-size y font- family. Los valores se deben indicar separados por espacios en blanco, en el orden anterior. Un ejemplo de uso de esta propiedad sería: P { Font : italic bold 16pt Arial }

43 Ejemplo Datos-Personales { font-family : Tahoma; font-size : 18pt ; font-weight : bold ; font-size : 18pt ; font-weight : bold ; color : red } 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 } 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 PropiedadDescripción Background- color Color de fondo del párrafo. Line-height Determina el espaciado interlineal. Toma como valor un número de puntos fijos, o un porcentaje que se aplica al tamaño de la letra. Text-align Alineación o justificación del texto respecto al margen. Acepta los valores left, right, center o justify. Text-indent Indenta la primera línea del bloque texto a la derecha (si se asigna a la propiedad un valor positivo), o a la izquierda si el valor es negativo. Word-spacing Espacio entre palabras dentro de un mismo elemento. No está soportada por MS-IE. Letter-spacing Espacio entre las letras de una palabra.

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

51 Propiedades para márgenes PropiedadDescripción Margin-left Margen izquierdo Margin-right Margen derecho Margin-top Margen respecto al contenedor superior o al bloque situado justo encima. Margin-bottom Margen respecto al borde inferior de la página, o respecto al bloque situado justo debajo del bloque al cual se aplica el margen. Margin Permite establecer valor para los márgenes superior, derecho, inferior e izquierdo. Para ello se indicarán, en este orden y separados por comas, los valores para cada uno de estos márgenes. Si se indica un único valor, éste se aplicará a los cuatro márgenes.

52 Ejemplo titulo { font-family : verdana; font-size : 14pt; margin-top : 2cm ; margin-bottom : 2cm } p { display : block ; font-family : verdana ; font-size : 10pt ; margin-top : 12 pt; margin-left : 2cm ; margin-right : 2cm ; text-align : justify}

53 Ejemplo

54 Propiedades para bordes PropiedadDescripción Border-color Color de la línea del borde Border-width Grosor o anchura del borde. Se puede indicar una anchura en una unidad de medida válida, o utilizar las palabras reservadas thin, medium y thick. Border-style Estilo de línea del borde. Por ejemplo, se puede usar una línea continua, una discontinua, una doble línea, una línea de puntos, un borde realzado o en relieve o hundido. Para ello, se utilizan las palabras reservadas solid, dashed, double, dotted, outset o inset y groove y ridge.

55 Propiedades para bordes PropiedadDescripción Border y border-top, border-left, border-right y border-bottom Estas cinco propiedades permiten indicar el color, anchura y estilo de los bordes a los que se aplican con una única propiedad. Todas ellas tomarán como valor, en este orden, la anchura, el estilo y el color del borde que se quiera utilizar, separados por un espacio en blanco. El valor para estas propiedades se deberá indicar según lo indicado para las propiedades border-color, border-width y border-style en los apartados anteriores.

56 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 { border : thin solid black ; text-align : right ; margin-top : 18pt ; line-height : 14pt } line-height : 14pt } p.ajustadoIzquierda { border : medium double black ; text-align : left ; margin-top : 18pt ; line- height : 10pt } p.centrado { border : medium inset red ; text-align : center ; margin-top : 18pt ; line-height : 24pt } p.justificado { border : medium outset red ;text- align : justify ; margin-top : 18pt ; line-height : 16pt }

57 Ejemplo

58 Propiedad padding PropiedadDescripción padding Indica el espacio en blanco que se debe dejar entre el borde y el contenido del bloque (texto, imagen, etc.) Esta propiedad toma como valor una distancia expresada en una de las unidades de medida válidas (mm, cm, pt, etc.), o un porcentaje relativo a la anchura o altura del bloque. CSS también incluye las propiedades padding-top, padding-right, padding-bottom y padding-left, que se aplican respectivamente, a la distancia entre el borde superior, derecho, inferior e izquierdo y el contenido del bloque.

59 Ejemplo

60 Ejemplo Par-1 { display : block ; border : thin solid red } Par-2 { display : block ; border : thin solid red ; Padding : 1cm } Par-3 { display : block ; border : thin solid red ; Padding : 2cm 1cm }

61 Ejemplo

62 Propiedades para fondos PropiedadDescripción Background- color Especifica el color de fondo Background- image Indica qué imagen aparecerá como fondo del elemento. Toma como valor la URL donde se encuentra el fichero de imagen. La URL se debe escribir utilizando la siguiente sintáxis: Background-image : URL(url) Background- repeat Indica cómo se debe repetir una imagen seleccionada como fondo de un elemento. Acepta los valores repeat, repeat-x, repeat-y y no-repeat Background- position Toma como valor las palabras reservadas center, top, bottom, left o right, una distancia expresada en una unidad de medida válida, o un porcentage.

63 Propiedades para formatear listas Una lista contiene una serie de entradas precedidas por un carácter especial que puede ser un número, una letra mayúscula, minúscula, o un símbolo como un círculo, un recuadro, etc. Una lista contiene una serie de entradas precedidas por un carácter especial que puede ser un número, una letra mayúscula, minúscula, o un símbolo como un círculo, un recuadro, etc. La especificación CSS incluye una serie de propiedades para mostrar elementos en forma de listas. La especificación CSS incluye una serie de propiedades para mostrar elementos en forma de listas. Microsoft Internet Explorer y Netscape Navigator 6 permiten utilizar estas propiedades con documentos XML, si bien sí pueden utilizarse para formatear documentos HTML. Microsoft Internet Explorer y Netscape Navigator 6 permiten utilizar estas propiedades con documentos XML, si bien sí pueden utilizarse para formatear documentos HTML.

64 Propiedades para formatear listas En el lenguaje HTML se utilizan marcas o etiquetas que determinan la presentación de los contenidos en pantalla, entre ellas las etiquetas UL, OL y LI, que se aplican para listas. En el lenguaje HTML se utilizan marcas o etiquetas que determinan la presentación de los contenidos en pantalla, entre ellas las etiquetas UL, OL y LI, que se aplican para listas. El elemento UL se utiliza para presentar una lista no ordenadaEl elemento UL se utiliza para presentar una lista no ordenada El elemento OL se utiliza para presentar una lista ordenada en la cual las entradas van precedidas por un número que indica el orden de cada entrada en la lista.El elemento OL se utiliza para presentar una lista ordenada en la cual las entradas van precedidas por un número que indica el orden de cada entrada en la lista. En ambos casos, tanto para las listas ordenadas como para las no ordenadas, cada entrada de la lista se escribirá entre las etiquetas y.En ambos casos, tanto para las listas ordenadas como para las no ordenadas, cada entrada de la lista se escribirá entre las etiquetas y.

65 Propiedades para formatear listas Código HTML Presentación <UL><LI>Madrid</LI> Barcelona Barcelona <LI>Sevilla</LI><LI>Bilbao</LI></UL>  Madrid  Barcelona  Sevilla  Bilbao <OL><LI>Madrid</LI> Barcelona Barcelona <LI>Sevilla</LI><LI>Bilbao</LI></OL> 1. Madrid 2. Barcelona 3. Sevilla 4. Bilbao

66 Propiedades para formatear listas PropiedadDescripción Display Para presentar un elemento en forma de lista, es necesario utilizar la propiedad display junto con el valor list-item List-style-type  Indica qué carácter precede a cada entrada de la lista. Puede ser un número, una letra minúscula, mayúscula, un bullet circular, etc.  Acepta los siguientes valores: DiscDisc CircleCircle SquareSquare DecimalDecimal Lower-romanLower-roman Upper-romanUpper-roman Lower-alphaLower-alpha Upper-alphaUpper-alpha

67 Propiedades para formatear listas PropiedadDescripción List-style-position Indica cómo se debe indentar la Segunda, tercera, etc. Líneas de la entrada de la lista en el caso de que ésta ocupe más de una liínea. Acepta los valores outside – en este caso todas las líneas estarán comenzarán a la misma altura que la primera línea -, e inside – en este caso la segunda, tercera y el resto de líneas comenzarán a la misma altura que la imagen o carácter que precede la entrada de la lista List-style-image Permite situar una imagen precediendo a cada entrada de la lista. Tomará como valor la URL de la imagen, utilizando la sintaxis: List-style-image : URL(url)

68 Propiedades para formatear listas PropiedadDescripción Marker-offset Esta propiedad se utiliza para indicar la distancia que debe hacer entre el carácter o imagen que precede al texto de cada entrada, y el texto de la entrada propiamente dicho. Toma como valor una distancia expresada en una unidad de medida válida. Esta propiedad no está soportada por MSIE5 List-style Combinación de las propiedades anteriores. Toma como valor los valores utilizados para indicar el tipo de carácter, la posicíopn o la imagen que debe preceder a cada entrada de la lista.

69 Propiedades para formatear tablas Valor prop. display Descripción Table Se creará una tabla con el contenido del elemento. La tabla se presentará como un bloque, con un salto de línea antes y otro después. Table-row El elemento constituirá una fila de la tabla Table-cell El elemento constituirá una celda en la tabla. In-line-table Se creará una tabla que no se mostrará como un bloque, sino como un objeto en línea. Es decir, el texto del elemento contenedor fluirá a su alrededor. La propiedad display puede tomar valores para presentar Información en formato tabular:

70 Propiedades para formatear tablas Valor prop. display Descripción Table-row-group Permite utilizar un elemento del documento XML para agrupar dos o más filas a las que se quiere aplicar una presentación común. Equivaldía al elemento TBODY del lenguaje HTML Table-header-group Permite agrupar filas para que sirvan como cabecera de la tabla. Equivaldría al elemento THEAD del lenguaje HTML Table-footer-group Permite agrupar filas para que sirvan como pié de la tabla. Equivaldría al elemento TFOOT del lenguaje HTML. Table-caption Muestra el texto del elemento como título de la tabla. Se utiliza con la propiedad caption-side

71 Ejemplo Informe de Ventas Zona Sur Informe de Ventas Zona Sur <ventas><ventas-delegacion><deleg>Getafe</deleg> Jaime Márquez Jaime Márquez <ventas-pts>2300000</ventas-pts></ventas-delegacion><ventas-delegacion><deleg>Alcorcón</deleg> Fabián Pastor Fabián Pastor <ventas-pts>1300000</ventas-pts></ventas-delegacion></ventas></informe>

72 Ejemplo Ventas { display : table } Ventas-delegacion { display : table-row } Deleg,vendedor,ventas-pts { display : table-cell }

73 Ejemplo Ventas { display : in-line-table ; float: right } ventas-delegacion { display : table-row } deleg,vendedor,ventas-pts { display : table-cell }

74 Propiedades para posicionar bloques PropiedadDescripción Width Anchura de un bloque. Se debe expresar en una unidad válida: cm, mm, etc. Height Altura de un bloque Float Indica si un elemento debe aparecer flotante o no. Si es un elemento flotante, el texto del elemento que le contiene fluirá alrededor del bloque position Indica cómo se va a posicionar un bloque. Sólo se aplica a elementos cuya propiedad display recoja el valor block. Top Indica a qué distancia del borde superior del bloque contenedor se va a situar un bloque

75 Propiedades para posicionar bloques PropiedadDescripción Right Indica a qué distancia del borde derecho del bloque contenedor se va a situar el bloque. Left Indica a qué distancia del borde izquierdo del bloque contenedor se va a situar el bloque. Bottom Indica a qué distancia del borde inferior del bloque contenedor se va a situar el bloque. Overflow Esta propiedad se utilizará cuando el contenido de un elemento supera el espacio que se le ha reservado.

76 Propiedades para posicionar bloques

77 Propiedades para posicionar bloques