Tema 5: Presentaci

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
• CSS y XSL
• Estructura y sintáxis 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
• 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 -gt FOSI, DSSSL
• HTML -gt CSS
• XML -gt 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 lt gt
• Las declaraciones de una misma regla, se separan
  entre sí mediante punto y coma lt gt
• 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
Selector Sintáxis Se aplica a
Universal declaraciones Todos los elementos del documento.
Selector de tipo Elem1declaraciones Todas las instancias u ocurrencias del elemento elem1
Selector de grupo Elem1,elem2declaraciones Todas las ocurrencias de los elementos que indican, y que se separan mediante comas
Descendientes Elem1 elem2declaraciones 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
Selector Sintáxis Se aplica a
Hijo Elem1gtelem2declaraciones Todos los elemento elem2 que son hijos directos de los elementos elem1
Adyacente Elem1elem2declaraciones 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 Elem1atrdeclaraciones Todos los elementos que contienen un atributo con nombre atr.
11
CSS - Selectores
Selector Sintáxis Se aplica a
Selector de atributo con valor Elematrvaldeclaraciones Todos los elementos que contienen un atributo atr que recogen el valor val.
Selector basado en el atributo CLASS Elem.valdeclaraciones Todos los elementos Elem cuyo atributo CLASS recoja el valor val
Selector basado en el atributo ID Elemvaldeclaraciones Todos los elementos elem cuyo atributo ID recoja el valor val.
Selector de primera línea Elem.first-linedeclaraciones A la primera línea de los elementos elem.
Selector de primera letra Elem.first-letterdeclaraciones A la primera letra de los elementos elem.
Pseudo-selectores before y after Elembefore contentvalue 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
• 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

• ltHTMLgt
• ltHEADgt
• ltLINK REL"stylesheet" TYPE"text/css"
  HREF"ejemplo_6.css"gt
• lt/HEADgt
• ltBODYgt
• ltP CLASS"autor"gtEste manual explica cómo
• trabajar con el navegador Netscape
  
• Navigator, actualmente en la versión
• 4.5.lt/Pgt
• ltPgtHaga doble clic sobre el icono de
• Netscape Navigator en el escritorio de
• Windows.lt/Pgt
• lt/BODYgt
• lt/HTMLgt

14
El atributo CLASS

• H1 font-weightboldcolor 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 ltAgt 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
• lta hrefhttp//www.sedic.esgtWebsite Sediclt/agt

17
Pseudo-selectores para enlaces HTML

• CSS incluye tres pseudo-selectores dedicados al
  elemento A
• Alink
• Aactived
• Avisited
• Alink permite indicar cual debe ser la
  presentación inicial del enlace.
• Aactived permite indicar cual debe ser la
  presentación del enlace en el momento en el que
  el usuario hace clic en él.
• Avisited 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

• lt?xml version1.0?gt
• lt?xml-stylesheet typetext/css
  hrefhojaEstilo.css?gt
• ltdocumento xmlnsHTMLhttp//www.w3.org/Profiles/
  XHTML-transitionalgt
• lttitulogtEjemplo con enlace hipertextolt/titulogt
• ltpargtEsta es la primera parte del documento de
  ejemplo.lt/pargt
• ltpargtHaz clic en este ltHTMLA HREFhttp//www.ana
  yamultimedia.esgtenlace para visitar el sitio web
  de Anaya Multimedia.lt/HTMLAgtlt/pargt
• lt/documentogt

19
Ejemplo pseudo-selectores HTML

• display block
• font-family verdana
• font-size 12pt
• HTML\A color green
• HTML\Aactived color red
• HTML\Avisited color black

20
Ejemplo pseudo-selectores HTML
21
Ejemplo pseudo-selectores before y after

• lt?xml version1.0?gt
• ltbibliografiagt
• ltlibrogt
• ltautorgtFederico Parejalt/autorgt
• lttitulogtNovela de juventudlt/titulogt
• ltano-publicaciongt2000lt/ano-publicaciongt
• lt/librogt
• ltlibrogt
• ltautorgtJuan Valverdelt/autorgt
• lttitulogtHistorias de mi ciudadlt/titulogt
• ltano-publicaciongt2000lt/ano-publicaciongt
• lt/bibliografiagt

22
Ejemplo pseudo-selectores before y after

• autorbefore content Autor
• font-family Arial
• font-size 16 pt
• color red
• font-weight bold
•  
• titulobefore content Título
• font-family Arial
• font-size 16 pt
• color red
• font-weight bold
•  

23
Ejemplo pseudo-selectores before y after

• ano-publicacionbefore 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
Medida Descripción
cm Centímetros
Mm Milí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
• 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
Nombre color Código hexadecimal
blue 0000FF
green 008000
red FF0000
yellow FFFF00
black 000000
aqua 00FFFF
fuchsia FF00FF
Gray 808080
28
Colores
Nombre color Código hexadecimal
Olive 808080
Silver C0C0C0
white FFFFFF
Purple 800080
Navy 000080
Maroon 800000
lime 00FF00
Teal 008080
29
Asociar docs XML con hojas estilo CSS

• Se utiliza la instrucción de procesamiento
• lt?xml-stylesheet...?gt
• 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
  lt?xml-stylesheet...?gt se escribe a continuación
  de la declaración XML
• Sintáxis
• lt?xml-stylesheet type"text/css
  href"Fichero.css"gt
•  

30
Asociar docs XML con hojas estilo CSS

• 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
lt?xml version1.0?gt lt?xml-stylesheet
typetext/css hrefejemplo_5.css?gt ltdocumentogt
ltsecciongt lttitulogtEstilos y formateo
lt/titulogt lt/secciongt ltsecciongt
lttitulogtHojas de estilo CSSlt/titulogt ltpgtEste
es un documento de ejemplo asociado a una hoja
de estilo con nombre ejemplo_5.csslt/pgt lt/seccio
ngt lt/documentogt
32
Asociar docs HTML con hojas estilo CSS

• Se utiliza el elemento LINK, que define una
  relación entre dos recursos
• ltLINK RELstylesheet HREFurlgt
• 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
• 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

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
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
Propiedad Descripció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
Propiedad Descripció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
Propiedad Descripció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
Propiedad Descripció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
• 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
Propiedad Descripció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
Propiedad Descripció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
Propiedad Descripció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
Propiedad Descripció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
• 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
Propiedad Descripció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
Propiedad Descripció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.
• 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.

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.
• El 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.
• En ambos casos, tanto para las listas ordenadas
  como para las no ordenadas, cada entrada de la
  lista se escribirá entre las etiquetas ltLIgt y
  lt/LIgt.

65
Propiedades para formatear listas
Código HTML Presentación
ltULgt ltLIgtMadridlt/LIgt ltLIgtBarcelonalt/LIgt ltLIgtSevillalt/LIgt ltLIgtBilbaolt/LIgt lt/ULgt Madrid Barcelona Sevilla Bilbao
ltOLgt ltLIgtMadridlt/LIgt ltLIgtBarcelonalt/LIgt ltLIgtSevillalt/LIgt ltLIgtBilbaolt/LIgt lt/OLgt Madrid Barcelona Sevilla Bilbao

•  

66
Propiedades para formatear listas
Propiedad Descripció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 Disc Circle Square Decimal Lower-roman Upper-roman Lower-alpha Upper-alpha

•  

67
Propiedades para formatear listas
Propiedad Descripció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
Propiedad Descripció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
La propiedad display puede tomar valores para
presentar Información en formato tabular
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.

•  

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

• lt?xml version"1.0"?gt
• ltinforme periodicidad"trimestral"gt
• lttitulogtInforme de Ventas Zona Surlt/titulogt
• ltventasgt
• ltventas-delegaciongt
• ltdeleggtGetafelt/deleggt
• ltvendedorgtJaime M225rquezlt/vendedorgt
• ltventas-ptsgt2300000lt/ventas-ptsgt
• lt/ventas-delegaciongt
• ltventas-delegaciongt
• ltdeleggtAlcorc243nlt/deleggt
• ltvendedorgtFabi225n Pastorlt/vendedorgt
• ltventas-ptsgt1300000lt/ventas-ptsgt
• lt/ventas-delegaciongt
• lt/ventasgt
• lt/informegt

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
Propiedad Descripció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
Propiedad Descripció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

•