Download - Tema 5: Presentación de documentos XML con CSS Ricardo Eíto Brun Sevilla, 23-25 de octubre 2002
Tema 5: Tema 5: Presentación de documentos Presentación de documentos XML con CSSXML con CSS
Ricardo Eíto BrunRicardo Eíto BrunSevilla, 23-25 de octubre 2002Sevilla, 23-25 de octubre 2002
Guíon del temaGuíon del tema
Hojas de estilo - Hojas de estilo - ventajasventajas
CSS y XSLCSS y XSL Estructura y Estructura y
sintáxis CSSsintáxis CSS Selectores CSSSelectores CSS
Propiedades CSS Asociar hojas de
estilo a documentos XML
Hojas de estiloHojas de estilo
Los lenguajes de marcas (SGML, XML, HTML, etc.) Los lenguajes de marcas (SGML, XML, HTML, etc.) diferencian entre: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 Una hoja de estilo contiene instrucciones sobre cómo se debe presentar un documento en cómo se debe presentar un documento en pantalla o al imprimirlopantalla 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
Hojas de estiloHojas 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 Garantizar la presentación homogenea y consistente de
una colección de documentosuna colección de documentos
• Cambiar fácilmente las opciones de presentación, en un Cambiar fácilmente las opciones de presentación, en un único lugar (la hoja de estilo CSS)único lugar (la hoja de estilo CSS)
• Publicar un mismo contenido con distintas Publicar un mismo contenido con distintas presentaciones, sin necesidad de modificar los presentaciones, sin necesidad de modificar los documentosdocumentos
• Aplicar a la documentación HTML opciones de Aplicar a la documentación HTML opciones de presentación avanzadas: espacio interlineal, márgenes, presentación avanzadas: espacio interlineal, márgenes, etc.etc.
• Posicionar elementos en la página.Posicionar elementos en la página.
Lenguajes para crear hojas de estiloLenguajes para crear hojas de estilo
Distintas alternativas para los distintos lenguajes de Distintas alternativas para los distintos lenguajes de marcas: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 Las hojas de estilo CSS (Cascading Style Sheets), son la “mejor” opción para presentar documentación la “mejor” opción para presentar documentación electrónicaelectrónica
XSL FO – aún no ha evolucionado lo suficiente, es XSL FO – aún no ha evolucionado lo suficiente, es incompletaincompleta
XSLT – Lenguaje de transformación, no de presentación XSLT – Lenguaje de transformación, no de presentación
Estructura de una hoja de estilo CSSEstructura de una hoja de estilo CSS
Contiene una o más reglasContiene una o más reglas Cada regla determina qué presentación se debe Cada regla determina qué presentación se debe
aplicar a una o más instancias de un elemento aplicar a una o más instancias de un elemento XML o HTMLXML o HTML
La regla cuenta con:La regla cuenta con:• Un selector – que identifica a qué instancias de los Un selector – que identifica a qué instancias de los
elementos que forman el documento se debe aplicar la elementos que forman el documento se debe aplicar la reglaregla
• Unas declaraciones – que indican qué opciones de Unas declaraciones – que indican qué opciones de presentación se deben aplicar: tipo de letra, espacion presentación se deben aplicar: tipo de letra, espacion interlineal, márgenes, etc.interlineal, márgenes, etc.
Estructura de una regla CSS Estructura de una regla CSS
Detrás del selector, se escriben entre llaves, las Detrás del selector, se escriben entre llaves, las
declaraciones.declaraciones.
En cada declaración se asigna valor a una En cada declaración se asigna valor a una
propiedad (nombre reservado)propiedad (nombre reservado)
El nombre de la propiedad se separa del valor El nombre de la propiedad se separa del valor
mediante dos puntos < : >mediante dos puntos < : > Las declaraciones de una misma regla, se separan Las declaraciones de una misma regla, se separan
entre sí mediante punto y coma < ; >entre sí mediante punto y coma < ; > Podemos escribir las declaraciones en líneas aparte, Podemos escribir las declaraciones en líneas aparte,
o seguidas (no se interpreta el espacio en blanco)o seguidas (no se interpreta el espacio en blanco)
Ejemplo: regla CSSEjemplo: regla CSS
PP {{ font-family : Arial ; font-family : Arial ;
color : blue ; color : blue ;
font-size : 12pt } font-size : 12pt }
H1H1 { { display : block ; display : block ; font-family : Verdana ; font-family : Verdana ;
font-size : 12pt }font-size : 12pt }
titulo, term { titulo, term { display : block ; display : block ;
font-family : Arial ; font-family : Arial ;
font-size : 24pt }font-size : 24pt }
CSS - SelectoresCSS - SelectoresSelectorSelector SintáxisSintáxis Se aplica a:Se aplica a:
UniversalUniversal * * {declaraciones}{declaraciones} Todos los elementos del Todos los elementos del documento.documento.
Selector de tipoSelector de tipo Elem1{declaracionesElem1{declaraciones}}
Todas las instancias u Todas las instancias u ocurrencias del elemento ocurrencias del elemento elem1elem1
Selector de Selector de grupogrupo
Elem1,elem2{declarElem1,elem2{declaraciones}aciones}
Todas las ocurrencias de Todas las ocurrencias de los elementos que los elementos que indican, y que se separan indican, y que se separan mediante comasmediante comas
DescendientesDescendientes Elem1 Elem1 elem2{declaracioneselem2{declaraciones}}
Todos los elementos Todos los elementos elem2 que son elem2 que son descendientes de los descendientes de los elementos elem1elementos elem1
Espacios de Espacios de nombrenombre
HTML\:TABLE HTML\:TABLE { declaraciones }{ declaraciones }
Elementos que proceden Elementos que proceden de un espacio de de un espacio de nombres (HTML)nombres (HTML)
CSS - SelectoresCSS - Selectores
SelectorSelector SintáxisSintáxis Se aplica a:Se aplica a:
HijoHijo Elem1>elem2{declarElem1>elem2{declaraciones}aciones}
Todos los elemento elem2 Todos los elemento elem2 que son hijos directos de que son hijos directos de los elementos elem1los elementos elem1
AdyacenteAdyacente Elem1+elem2{declarElem1+elem2{declaraciones}aciones}
Todos los elementos Todos los elementos elem2 que se encuentran elem2 que se encuentran inmediatamente a inmediatamente a continuación de un continuación de un elemento elem1. Es decir, elemento elem1. Es decir, a los elementos elem2 a los elementos elem2 que van precedidos que van precedidos directamente por un directamente por un elemento elem1.elemento elem1.
Selector de Selector de atributoatributo
Elem1[atr]Elem1[atr]{declaraciones}{declaraciones}
Todos los elementos que Todos los elementos que contienen un atributo con contienen un atributo con nombre atr.nombre atr.
CSS - SelectoresCSS - SelectoresSelectorSelector SintáxisSintáxis Se aplica a:Se aplica a:
Selector de Selector de atributo con valoratributo con valor
Elem[atr=valElem[atr=val]]{declaracion{declaraciones}es}
Todos los elementos que contienen Todos los elementos que contienen un atributo atr que recogen el valor un atributo atr que recogen el valor val.val.
Selector basado Selector basado en el atributo en el atributo CLASSCLASS
Elem.val{decElem.val{declaraciones}laraciones}
Todos los elementos Elem cuyo Todos los elementos Elem cuyo atributo CLASS recoja el valor valatributo CLASS recoja el valor val
Selector basado Selector basado en el atributo IDen el atributo ID
Elem#val{deElem#val{declaraciones}claraciones}
Todos los elementos elem cuyo Todos los elementos elem cuyo atributo ID recoja el valor val.atributo ID recoja el valor val.
Selector de Selector de primera líneaprimera línea
Elem.first-Elem.first-line{declaracline{declaraciones}iones}
A la primera línea de los elementos A la primera línea de los elementos elem.elem.
Selector de Selector de primera letraprimera letra
Elem.first-Elem.first-letter{declarletter{declaraciones}aciones}
A la primera letra de los elementos A la primera letra de los elementos elem.elem.
Pseudo-selectores Pseudo-selectores before y afterbefore y after
Elem:before Elem:before { content:val{ content:value}ue}
Escribe el valor de la propiedad Escribe el valor de la propiedad content antes o después del content antes o después del contenido del elementocontenido del elemento
El atributo CLASSEl atributo CLASS
Este atributo puede añadirse a cualquier Este atributo puede añadirse a cualquier elemento HTMLelemento HTML
Se utiliza para “marcar” ciertas ocurrencias de un Se utiliza para “marcar” ciertas ocurrencias de un elemento, para:elemento, para:• Asociarlas a una regla de una hoja de estilo y Asociarlas a una regla de una hoja de estilo y • Presentarlas de forma diferente al resto de Presentarlas de forma diferente al resto de
ocurrencias de ese mismo elemento. ocurrencias de ese mismo elemento. La sintáxis correcta es:La sintáxis correcta es: Elemento.valor { declaraciones }Elemento.valor { declaraciones }
El atributo CLASSEl atributo CLASS
<HTML> <HTML> <HEAD> <HEAD>
<LINK REL="stylesheet" TYPE="text/css" <LINK REL="stylesheet" TYPE="text/css" HREF="ejemplo_6.css"> HREF="ejemplo_6.css">
</HEAD> </HEAD> <BODY> <BODY>
<P CLASS="autor">Este manual explica cómo <P CLASS="autor">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.</P> 4.5.</P> <P>Haga doble clic sobre el icono de <P>Haga doble clic sobre el icono de Netscape Navigator en el escritorio de Netscape Navigator en el escritorio de Windows.</P> Windows.</P>
</BODY> </BODY> </HTML></HTML>
El atributo CLASSEl 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}
Atributo IDAtributo ID
Su propósito es asignar a las instancias de un elementos un Su propósito es asignar a las instancias de un elementos un identificador único. identificador único.
Este identificador permitirá:Este identificador permitirá:• Crear enlaces que tengan como destino un elemento Crear enlaces que tengan como destino un elemento
con un ID determinado, y con un ID determinado, y • Aplicar formateos y reglas de estilo a un elemento Aplicar formateos y reglas de estilo a un elemento
específico del documento, diferenciándolo de todos los específico del documento, diferenciándolo de todos los demás. demás.
Para indicar en una regla que se quiere aplicar un formato a Para indicar en una regla que se quiere aplicar un formato a un elemento con un ID determinado, se escribirá como un elemento con un ID determinado, se escribirá como selector el valor del atributo ID precedido del signo #, tal y selector el valor del atributo ID precedido del signo #, tal y como se muestra a continuación:como se muestra a continuación:
#valorID { declaraciones }#valorID { declaraciones }
Pseudo-selectores para enlaces HTMLPseudo-selectores para enlaces HTML
El elemento <A…> se utiliza en HTML para indicar el El elemento <A…> se utiliza en HTML para indicar el origen y el destino de enlaces hipertexto.origen y el destino de enlaces hipertexto.
Junto con el atributo HREF determina el origen de un Junto con el atributo HREF determina el origen de un hipervínculo. hipervínculo.
Junto con el atributo NAME determinará el destino de un Junto con el atributo NAME determinará el destino de un hipervínculo.hipervínculo.
Por ejemplo, para crear un enlace con HTML que nos Por ejemplo, para crear un enlace con HTML que nos llevase a la URL llevase a la URL http://http://www.sedic.eswww.sedic.es, incluiríamos el , incluiríamos el siguiente elemento:siguiente elemento:
<a href=”http://www.sedic.es>Website Sedic</a><a href=”http://www.sedic.es>Website Sedic</a>
Pseudo-selectores para enlaces HTMLPseudo-selectores para enlaces HTML
CSS incluye tres pseudo-selectores dedicados al CSS incluye tres pseudo-selectores dedicados al elemento A: elemento A: A:linkA:link A:actived A:actived A:visitedA:visited
A:link permite indicar cual debe ser la presentación A:link permite indicar cual debe ser la presentación inicial del enlace.inicial del enlace.
A:actived permite indicar cual debe ser la presentación A:actived permite indicar cual debe ser la presentación del enlace en el momento en el que el usuario hace clic del enlace en el momento en el que el usuario hace clic en él. en él.
A:visited permite indicar cual debe ser la presentación A:visited permite indicar cual debe ser la presentación del enlace cuando el usuario ya ha hecho clic en él.del enlace cuando el usuario ya ha hecho clic en él.
De esta forma se puede diferenciar claramente qué De esta forma se puede diferenciar claramente qué enlaces han sido seleccionados y cuales no. enlaces han sido seleccionados y cuales no.
Ejemplo pseudo-selectores HTMLEjemplo pseudo-selectores HTML
<?xml version=”1.0”?><?xml version=”1.0”?><?xml-stylesheet type=”text/css” <?xml-stylesheet type=”text/css”
href=”hojaEstilo.css”?>href=”hojaEstilo.css”?> <documento xmlns:HTML=”<documento xmlns:HTML=”
http://www.w3.org/Profiles/XHTML-transitionalhttp://www.w3.org/Profiles/XHTML-transitional”>”><titulo>Ejemplo con enlace hipertexto</titulo><titulo>Ejemplo con enlace hipertexto</titulo><par>Esta es la primera parte del documento de <par>Esta es la primera parte del documento de
ejemplo.</par>ejemplo.</par><par>Haz clic en este <HTML:A HREF=”<par>Haz clic en este <HTML:A HREF=”http://http://
www.anayamultimedia.eswww.anayamultimedia.es”>enlace para visitar el ”>enlace para visitar el sitio web de Anaya Multimedia.</HTML:A></par>sitio web de Anaya Multimedia.</HTML:A></par>
</documento></documento>
Ejemplo pseudo-selectores HTMLEjemplo pseudo-selectores HTML
* { display : block ; * { display : block ;
font-family : verdana ; font-family : verdana ;
font-size : 12pt }font-size : 12pt }
HTML\:A { color : green }HTML\:A { color : green }
HTML\:A:actived { color : red }HTML\:A:actived { color : red }
HTML\:A:visited { color : black }HTML\:A:visited { color : black }
Ejemplo pseudo-selectores HTMLEjemplo pseudo-selectores HTML
Ejemplo pseudo-selectores before y afterEjemplo pseudo-selectores before y after
<?xml version=”1.0”?><?xml version=”1.0”?><bibliografia><bibliografia>
<libro><libro><autor>Federico Pareja</autor><autor>Federico Pareja</autor><titulo>Novela de juventud</titulo><titulo>Novela de juventud</titulo><ano-publicacion>2000</ano-publicacion><ano-publicacion>2000</ano-publicacion>
</libro></libro><libro><libro>
<autor>Juan Valverde</autor><autor>Juan Valverde</autor><titulo>Historias de mi ciudad</titulo><titulo>Historias de mi ciudad</titulo><ano-publicacion>2000</ano-publicacion><ano-publicacion>2000</ano-publicacion>
</bibliografia></bibliografia>
Ejemplo pseudo-selectores before y afterEjemplo pseudo-selectores before y after
autor:before { content : “Autor: ” ;autor:before { content : “Autor: ” ;font-family : Arial ;font-family : Arial ;font-size : 16 pt;font-size : 16 pt;color : red ;color : red ;font-weight : bold }font-weight : bold }
titulo:before { content : “Título: ” ;titulo:before { content : “Título: ” ;
font-family : Arial ;font-family : Arial ;font-size : 16 pt;font-size : 16 pt;color : red ;color : red ;font-weight : bold }font-weight : bold }
Ejemplo pseudo-selectores before y afterEjemplo pseudo-selectores before y after
ano-publicacion:before { content : “Publicado en: ano-publicacion:before { content : “Publicado en: ” ; font-family : Arial ;” ; font-family : Arial ;
font-size : 16 pt;font-size : 16 pt;
color : red ;color : red ;
font-weight : bold }font-weight : bold }
* { display : block ;* { display : block ;
font-family : Arial ;font-family : Arial ;
font-size : 16pt;font-size : 16pt;
margin-top : 16pt }margin-top : 16pt }
Ejemplo pseudo-selectores before y afterEjemplo pseudo-selectores before y after
Medidas y distancias en CSSMedidas y distancias en CSS
MedidaMedida DescripciónDescripción
cmcm CentímetrosCentímetros
MmMm MilímetrosMilímetros
PtPt Puntos. Se utilizan principalmente para Puntos. Se utilizan principalmente para indicar el tamaño de la letra y el espacio indicar el tamaño de la letra y el espacio interlineal. interlineal.
Un punto equivale 1/72 pulgadas.Un punto equivale 1/72 pulgadas.
PcPc Picas. Una pica equivale a 12 puntos.Picas. Una pica equivale a 12 puntos.
InIn Pulgadas (inches en inglés). Una pulgada Pulgadas (inches en inglés). Una pulgada equivale a 2,54 cm.equivale a 2,54 cm.
ColoresColores
En una hoja de estilo CSS también se pueden En una hoja de estilo CSS también se pueden especificar qué colores se deben utilizar especificar qué colores se deben utilizar
Los colores se aplican a letras, bordes, color de Los colores se aplican a letras, bordes, color de fondo, etc.fondo, etc.
CSS establece tres mecanismos para indicar un CSS establece tres mecanismos para indicar un color color • nombre reservado para el colornombre reservado para el color:: red, blue, yellow, etc. 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 código RGB, que indica la distribución del color rojo, verde
y azul en la composición de un color determinado.y azul en la composición de un color determinado. Podemos conocer el código RGB o hexadecimal de Podemos conocer el código RGB o hexadecimal de
un color determinado con cualquier herramienta de un color determinado con cualquier herramienta de diseño: Paint Shop Pro, Photoshop, etc.diseño: Paint Shop Pro, Photoshop, etc.
ColoresColores
Nombre colorNombre color Código hexadecimalCódigo hexadecimal
blueblue 0000FF0000FF
greengreen 008000008000
redred FF0000FF0000
yellowyellow FFFF00FFFF00
blackblack 000000000000
aquaaqua 00FFFF00FFFF
fuchsiafuchsia FF00FFFF00FF
GrayGray 808080808080
ColoresColores
Nombre colorNombre color Código hexadecimalCódigo hexadecimal
OliveOlive 808080808080
SilverSilver C0C0C0C0C0C0
whitewhite FFFFFFFFFFFF
PurplePurple 800080800080
NavyNavy 000080000080
MaroonMaroon 800000800000
limelime 00FF0000FF00
TealTeal 008080008080
Asociar docs XML con hojas estilo CSSAsociar docs XML con hojas estilo CSS
Se utiliza la instrucción de procesamiento Se utiliza la instrucción de procesamiento <?xml-stylesheet...?><?xml-stylesheet...?> la instrucción de procesamiento crea un vínculo la instrucción de procesamiento crea un vínculo
desde el documento XML hacia un archivo externo desde el documento XML hacia un archivo externo que contiene las instrucciones de formateo, y que que contiene las instrucciones de formateo, y que tendrá la extensión .CSS. tendrá la extensión .CSS.
La instrucción de procesamiento <?xml-La instrucción de procesamiento <?xml-stylesheet...?> se escribe a continuación de la stylesheet...?> se escribe a continuación de la declaración XMLdeclaración XML
Sintáxis:Sintáxis: <?xml-stylesheet type="text/css“ href="Fichero.css"><?xml-stylesheet type="text/css“ href="Fichero.css">
Asociar docs XML con hojas estilo CSSAsociar docs XML con hojas estilo CSS
En En lala instrucción de procesamiento se utilizan instrucción de procesamiento se utilizan dos calificadores: type y href.dos calificadores: type y href.
TypeType Tipo de la hoja de estilo. En el caso de las hojas Tipo de la hoja de estilo. En el caso de las hojas de estilo CSS, recogerá el valor text/css escrito de estilo CSS, recogerá el valor text/css escrito entre comillas dobles.entre comillas dobles.
HrefHref URL absoluta o relativa de la hoja de estilo, es URL absoluta o relativa de la hoja de estilo, es decir, del archivo con extensión .CSS que decir, del archivo con extensión .CSS que contiene las instrucciones de formateo. Se contiene las instrucciones de formateo. Se escribe entre comillas dobles. escribe entre comillas dobles.
EjemploEjemplo
<?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 nombreejemplo_5.css</p>
</seccion> </documento>
Asociar docs HTML con hojas estilo CSSAsociar docs HTML con hojas estilo CSS
Se utiliza el elemento LINK, que define una relación entre Se utiliza el elemento LINK, que define una relación entre dos recursos:dos recursos:
<LINK REL=“stylesheet” HREF=“url”><LINK REL=“stylesheet” HREF=“url”> El elemento LINK se escribe en el elemento HEADEl elemento LINK se escribe en el elemento HEAD
RelRel Tipo de Tipo de relaciónrelación. En el caso de las hojas de estilo . En el caso de las hojas de estilo CSS, recogerá el valor CSS, recogerá el valor stylesheetstylesheet escrito entre escrito entre comillas dobles.comillas dobles.
hrefhref URL absoluta o relativa de la hoja de estilo, es URL absoluta o relativa de la hoja de estilo, es decir, del archivo con extensión .CSS que decir, del archivo con extensión .CSS que contiene las instrucciones de formateo. Se contiene las instrucciones de formateo. Se escribe entre comillas dobles. escribe entre comillas dobles.
CSS - PropiedadesCSS - Propiedades
Las agrupamos en los siguientes Las agrupamos en los siguientes apartados:apartados:• la propiedad la propiedad DISPLAYDISPLAY
• propiedades relativas al tipo de letrapropiedades relativas al tipo de letra• propiedades aplicables a párrafos: espacio propiedades aplicables a párrafos: espacio
interlineal, márgenes, bordes, etc.interlineal, márgenes, bordes, etc.• ppropiedades relativas a fondos de pantalla.ropiedades relativas a fondos de pantalla.
Propiedad displayPropiedad display
Indica si el contenido de un elemento será visible Indica si el contenido de un elemento será visible o se ocultará. 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 su contenido se va a mostrar en un bloque o párrafo
aparte, o aparte, o • si se va a mostrar en el mismo párrafo o bloque que el si se va a mostrar en el mismo párrafo o bloque que el
elemento que le precede.elemento que le precede. La propiedad DISPLAY también se utiliza para La propiedad DISPLAY también se utiliza para
formatear listas y tablasformatear listas y tablas
Propiedad displayPropiedad display
Acepta los siguientes valores: Acepta los siguientes valores:
NoneNone El elemento permanecerá ocultoEl elemento permanecerá oculto
BlockBlock El elemento se muestra en un bloque o párrafo El elemento se muestra en un bloque o párrafo aparte. aparte.
InlineInline El elemento se muestra en el mismo bloque o El elemento se muestra en el mismo bloque o párrafo que el elemento anterior, siempre que el párrafo que el elemento anterior, siempre que el elemento anterior se le haya aplicado también el elemento anterior se le haya aplicado también el valor inline a la propiedad DISPLAY. valor inline a la propiedad DISPLAY.
List-List-itemitem
El elemento se muestra como una entrada en una El elemento se muestra como una entrada en una lista. lista.
TableTable El elemento y los elementos que contiene se van El elemento y los elementos que contiene se van a presentar en forma de tabla. a presentar en forma de tabla.
Ejemplo Propiedad displayEjemplo Propiedad display
Ejemplo Propiedad displayEjemplo Propiedad display
datos-Personales { font-family : verdana;datos-Personales { font-family : verdana;
font-size : 12pt }font-size : 12pt }
nombre { display : inline } nombre { display : inline }
apellido-1 { display : inline }apellido-1 { display : inline }
apellido-2 { display : inline }apellido-2 { display : inline }
fecha-nac { display : block }fecha-nac { display : block }
datos-Academicos { display : none }datos-Academicos { display : none }
Ejemplo Propiedad displayEjemplo Propiedad display
Propiedades relativas al tipo de letraPropiedades relativas al tipo de letra
PropiedadPropiedad DescripciónDescripción
Font-familyFont-family Tipo de letra que se va a utilizar: Arial, Tipo de letra que se va a utilizar: Arial, Times, Verdana, etc. Times, Verdana, etc.
Font-styleFont-style Indica si el texto tiene que aparecer en Indica si el texto tiene que aparecer en cursiva o no. Acepta los valores normal, cursiva o no. Acepta los valores normal, oblique e italic. oblique e italic.
Font-variantFont-variant Permite utilizar versales. Acepta los Permite utilizar versales. Acepta los valores regular - para no aplicar versales - valores regular - para no aplicar versales - o small-caps – para utilizar versales -. o small-caps – para utilizar versales -. MSIE5 no soporta esta propiedad MSIE5 no soporta esta propiedad correctamente, y utiliza mayúsculas en correctamente, y utiliza mayúsculas en lugar de versales. lugar de versales.
Font-sizeFont-size Tamaño de la letra. Se suele indicar en Tamaño de la letra. Se suele indicar en puntos, por ejemplo 8pt, 10pt ó 12pt.puntos, por ejemplo 8pt, 10pt ó 12pt.
Propiedades relativas al tipo de letraPropiedades relativas al tipo de letra
PropiedadPropiedad DescripciónDescripción
Color Color Color de la letra. Se puede indicar Color de la letra. Se puede indicar mediante la palabra reservada al color, por mediante la palabra reservada al color, por ejemplo red, blue, white, etc., o mediante ejemplo red, blue, white, etc., o mediante su código hexadecimal o el código RGB su código hexadecimal o el código RGB
Font-weightFont-weight Intensidad de la letra. Permite indicar si la Intensidad de la letra. Permite indicar si la letra debe ser negrita o no.letra debe ser negrita o no.
Toma como valor un número comprendido Toma como valor un número comprendido en una escala numérica que va de 100 a en una escala numérica que va de 100 a 900. 900.
El valor 400 es el correspondiente a la El valor 400 es el correspondiente a la letra normal o regular, y el 700 letra normal o regular, y el 700 corresponde a la negrita. corresponde a la negrita.
La intensidad de la letra también se puede La intensidad de la letra también se puede indicarse con los valores ‘normal’, ‘bold’ indicarse con los valores ‘normal’, ‘bold’
Propiedades relativas al tipo de letraPropiedades relativas al tipo de letra
PropiedadPropiedad DescripciónDescripción
Text-Text-decorationdecoration
Indica si el texto se debe escribir Indica si el texto se debe escribir subrayado, tachado, o con una línea por subrayado, tachado, o con una línea por encima. Acepta los valores underline, encima. Acepta los valores underline, overline, line-through y none, que es el overline, line-through y none, que es el valor por defecto. valor por defecto.
Text-transform Text-transform Convierte el texto marcado a mayúsculas, Convierte el texto marcado a mayúsculas, a minúsculas, o escribe la letra inicial de a minúsculas, o escribe la letra inicial de cada palabra en mayúscula y el resto en cada palabra en mayúscula y el resto en minúsculas. minúsculas.
Acepta los valores capitalize, uppercase, Acepta los valores capitalize, uppercase, lowercase o nonelowercase o none,, que es el valor por que es el valor por defecto defecto
vertical-align vertical-align Se utilizSe utilizaa para mostrar subíndices y para mostrar subíndices y superíndices. superíndices.
Acepta los valores sub, super, middle y Acepta los valores sub, super, middle y baseline, que es el valor por defecto baseline, que es el valor por defecto
Propiedades relativas al tipo de letraPropiedades relativas al tipo de letra
PropiedadPropiedad DescripciónDescripción
fontfont Esta propiedad permite indicar, en una Esta propiedad permite indicar, en una única declaración, el estilo, intensidad, única declaración, el estilo, intensidad, tamaño y tipo de letra. tamaño y tipo de letra.
Esta propiedad equivale a las propiedades Esta propiedad equivale a las propiedades font-style, font-weight, font-size y font-font-style, font-weight, font-size y font-family.family.
Los valores se deben indicar separados por Los valores se deben indicar separados por espacios en blanco, en el orden anterior. espacios en blanco, en el orden anterior.
Un ejemplo de uso de esta propiedad sería:Un ejemplo de uso de esta propiedad sería:
P { Font : italic bold 16pt Arial }P { Font : italic bold 16pt Arial }
EjemploEjemplo
Datos-Personales { font-family : Tahoma;Datos-Personales { font-family : Tahoma; font-size : 18pt ; font-weight : bold ;font-size : 18pt ; font-weight : bold ; color : red }color : red }
Nombre { display : inline } Nombre { display : inline } Apellido-1, Apellido-2 { display : inline ;Apellido-1, Apellido-2 { display : inline ;Text-transform : uppercase }Text-transform : uppercase }Fecha-nac { display : block }Fecha-nac { display : block }datos-academicos {font-family : Arial ;datos-academicos {font-family : Arial ;
font-size : 14pt; color : blue }font-size : 14pt; color : blue }titulo { display : block; font-variant : small-caps ; titulo { display : block; font-variant : small-caps ;
text-decoration : underline }text-decoration : underline }centro-docente { font-style : italic }centro-docente { font-style : italic }curso-inicio { display : inline }curso-inicio { display : inline }
curso-fin { display : inline }curso-fin { display : inline }
EjemploEjemplo
Propiedades para bloquesPropiedades para bloques
PropiedadPropiedad DescripciónDescripción
Background-Background-colorcolor
Color de fondo del párrafo. Color de fondo del párrafo.
Line-heightLine-height Determina el espaciado interlineal. Toma Determina el espaciado interlineal. Toma como valor un número de puntos fijos, o como valor un número de puntos fijos, o un porcentaje que se aplica al tamaño de un porcentaje que se aplica al tamaño de la letra. la letra.
Text-align Text-align Alineación o justificación del texto respecto al Alineación o justificación del texto respecto al margen. Acepta los valores left, right, center margen. Acepta los valores left, right, center o justify. o justify.
Text-indentText-indent Indenta la primera línea del bloque texto a la Indenta la primera línea del bloque texto a la derecha (si se asigna a la propiedad un valor derecha (si se asigna a la propiedad un valor positivo), o a la izquierda si el valor es positivo), o a la izquierda si el valor es negativo. negativo.
Word-spacingWord-spacing Espacio entre palabras dentro de un mismo Espacio entre palabras dentro de un mismo elemento. No está soportada por MS-IE. elemento. No está soportada por MS-IE.
Letter-spacingLetter-spacing Espacio entre las letras de una palabra. Espacio entre las letras de una palabra.
EjemploEjemplo
EjemploEjemplo
Titulo { display : block ; font-family : tahoma ; Titulo { display : block ; font-family : tahoma ; font-size : 14 pt; color : white ; background-font-size : 14 pt; color : white ; background-color : red }color : red }
P { font-family : Tahoma ; font-size : 10 pt ; P { font-family : Tahoma ; font-size : 10 pt ; display : block }display : block }
p.ajustadoDerecha { text-align : right ; margin-p.ajustadoDerecha { text-align : right ; margin-top : 18pt}top : 18pt}
p.ajustadoIzquierda { text-align : left ; margin-top p.ajustadoIzquierda { text-align : left ; margin-top : 18pt }: 18pt }
p.centrado { text-align : center ; margin-top : 18pt p.centrado { text-align : center ; margin-top : 18pt }}
p.justificado { text-align : justify ; margin-top : p.justificado { text-align : justify ; margin-top : 18pt }18pt }
EjemploEjemplo
EjemploEjemplo
Titulo { display : block ; font-family : tahoma ; Titulo { display : block ; font-family : tahoma ; font-size : 14 pt; color : white ; background-font-size : 14 pt; color : white ; background-color : red }color : red }
P { font-family : Tahoma ; font-size : 10 pt ; P { font-family : Tahoma ; font-size : 10 pt ; display : block }display : block }
p.ajustadoDerecha { text-align : right ; margin-p.ajustadoDerecha { text-align : right ; margin-top : 18pt ; ; line-height : 14pt }top : 18pt ; ; line-height : 14pt }
p.ajustadoIzquierda { text-align : left ; margin-top p.ajustadoIzquierda { text-align : left ; margin-top : 18pt ; line-height : 10pt }: 18pt ; line-height : 10pt }
p.centrado { text-align : center ; margin-top : 18pt p.centrado { text-align : center ; margin-top : 18pt ; line-height : 24pt }; line-height : 24pt }
p.justificado { text-align : justify ; margin-top : p.justificado { text-align : justify ; margin-top : 18pt ; line-height : 16pt }18pt ; line-height : 16pt }
EjemploEjemplo
Propiedades para márgenesPropiedades para márgenes
PropiedadPropiedad DescripciónDescripción
Margin-left Margin-left Margen izquierdo Margen izquierdo
Margin-right Margin-right Margen derecho Margen derecho
Margin-top Margin-top Margen respecto al contenedor superior o al Margen respecto al contenedor superior o al bloque situado justo encima. bloque situado justo encima.
Margin-bottomMargin-bottom Margen respecto al borde inferior de la Margen respecto al borde inferior de la página, o respecto al bloque situado justo página, o respecto al bloque situado justo debajo del bloque al cual se aplica el margen. debajo del bloque al cual se aplica el margen.
MarginMargin Permite establecer valor para los márgenes Permite establecer valor para los márgenes superior, derecho, inferior e izquierdo.superior, derecho, inferior e izquierdo.
Para ello se indicarán, en este orden y Para ello se indicarán, en este orden y separados por comas, los valores para cada separados por comas, los valores para cada uno de estos márgenes. Si se indica un único uno de estos márgenes. Si se indica un único valor, éste se aplicará a los cuatro márgenes. valor, éste se aplicará a los cuatro márgenes.
EjemploEjemplo
titulo { titulo { font-family : verdana; font-family : verdana;
font-size : 14pt; font-size : 14pt;
margin-top : 2cm ; margin-top : 2cm ;
margin-bottom : 2cm }margin-bottom : 2cm }
p { p { display : block ; display : block ;
font-family : verdana ; font-family : verdana ;
font-size : 10pt ; font-size : 10pt ;
margin-top : 12 pt;margin-top : 12 pt;
margin-left : 2cm ; margin-left : 2cm ;
margin-right : 2cm ; margin-right : 2cm ;
text-align : justify}text-align : justify}
EjemploEjemplo
Propiedades para bordesPropiedades para bordes
PropiedadPropiedad DescripciónDescripción
Border-color Border-color Color de la línea del borde Color de la línea del borde
Border-width Border-width Grosor o anchura del borde. Se puede indicar Grosor o anchura del borde. Se puede indicar una anchura en una unidad de medida válida, una anchura en una unidad de medida válida, o utilizar las palabras reservadas thin, o utilizar las palabras reservadas thin, medium y thick. medium y thick.
Border-style Border-style Estilo de línea del borde. Por ejemplo, se Estilo de línea del borde. Por ejemplo, se puede usar una línea continua, una puede usar una línea continua, una discontinua, una doble línea, una línea de discontinua, una doble línea, una línea de puntos, un borde realzado o en relieve o puntos, un borde realzado o en relieve o hundido.hundido.
Para ello, se utilizan las palabras reservadas Para ello, se utilizan las palabras reservadas solid, dashed, double, dotted, outset o inset y solid, dashed, double, dotted, outset o inset y groove y ridge.groove y ridge.
Propiedades para bordesPropiedades para bordes
PropiedadPropiedad DescripciónDescripción
Border y Border y border-top, border-top, border-left, border-left, border-right y border-right y border-bottomborder-bottom
Estas cinco propiedades permiten indicar el Estas cinco propiedades permiten indicar el color, anchura y estilo de los bordes a los que color, anchura y estilo de los bordes a los que se aplican con una única propiedad.se aplican con una única propiedad.
Todas ellas tomarán como valor, en este Todas ellas tomarán como valor, en este orden, la anchura, el estilo y el color del orden, la anchura, el estilo y el color del borde que se quiera utilizar, separados por borde que se quiera utilizar, separados por un espacio en blanco. El valor para estas un espacio en blanco. El valor para estas propiedades se deberá indicar según lo propiedades se deberá indicar según lo indicado para las propiedades border-color, indicado para las propiedades border-color, border-width y border-style en los apartados border-width y border-style en los apartados anteriores. anteriores.
EjemploEjemplo
Titulo { display : block ; font-family : tahoma ; Titulo { display : block ; font-family : tahoma ; font-size : 14 pt; color : white ; background-font-size : 14 pt; color : white ; background-color : red }color : red }
P { font-family : Tahoma ; font-size : 10 pt ; display P { font-family : Tahoma ; font-size : 10 pt ; display : block }: block }
p.ajustadoDerecha { border : thin solid black ; text-p.ajustadoDerecha { border : thin solid black ; text-align : right ; margin-top : 18pt ; align : right ; margin-top : 18pt ;
line-height : 14pt }line-height : 14pt }p.ajustadoIzquierda { border : medium double black ; p.ajustadoIzquierda { border : medium double black ;
text-align : left ; margin-top : 18pt ; line-text-align : left ; margin-top : 18pt ; line-height : 10pt }height : 10pt }
p.centrado { border : medium inset red ; text-align : p.centrado { border : medium inset red ; text-align : center ; margin-top : 18pt ; line-height : 24pt }center ; margin-top : 18pt ; line-height : 24pt }
p.justificado { border : medium outset red ;text-align p.justificado { border : medium outset red ;text-align : justify ; margin-top : 18pt ; line-height : 16pt }: justify ; margin-top : 18pt ; line-height : 16pt }
EjemploEjemplo
Propiedad paddingPropiedad padding
PropiedadPropiedad DescripciónDescripción
paddingpadding IIndica el espacio en blanco que se debe dejar ndica el espacio en blanco que se debe dejar entre el borde y el contenido del bloque entre el borde y el contenido del bloque (texto, imagen, etc.) (texto, imagen, etc.)
Esta propiedad toma como valor una Esta propiedad toma como valor una distancia expresada en una de las unidades distancia expresada en una de las unidades de medida válidas (mm, cm, pt, etc.), o un de medida válidas (mm, cm, pt, etc.), o un porcentaje relativo a la anchura o altura del porcentaje relativo a la anchura o altura del bloque. bloque.
CSS también incluye las propiedades CSS también incluye las propiedades padding-top, padding-right, padding-bottom y padding-top, padding-right, padding-bottom y padding-left, que se aplican respectivamente, padding-left, que se aplican respectivamente, a la distancia entre el borde superior, a la distancia entre el borde superior, derecho, inferior e izquierdo y el contenido derecho, inferior e izquierdo y el contenido del bloque.del bloque.
EjemploEjemplo
EjemploEjemplo
Par-1 { display : block ;Par-1 { display : block ;
border : thin solid red }border : thin solid red }
Par-2 { display : block ;Par-2 { display : block ;
border : thin solid red ;border : thin solid red ;
Padding : 1cm }Padding : 1cm }
Par-3 { display : block ;Par-3 { display : block ;
border : thin solid red ;border : thin solid red ;
Padding : 2cm 1cm }Padding : 2cm 1cm }
EjemploEjemplo
Propiedades para fondosPropiedades para fondos
PropiedadPropiedad DescripciónDescripción
Background-Background-colorcolor
Especifica el color de fondoEspecifica el color de fondo
Background-Background-imageimage
Indica qué imagen aparecerá como fondo del Indica qué imagen aparecerá como fondo del elemento. Toma como valor la URL donde se elemento. Toma como valor la URL donde se encuentra el fichero de imagen.encuentra el fichero de imagen.
La URL se debe escribir utilizando la La URL se debe escribir utilizando la siguiente sintáxis:siguiente sintáxis:
Background-image : URL(url)Background-image : URL(url)
Background-Background-repeatrepeat
Indica cómo se debe repetir una imagen Indica cómo se debe repetir una imagen seleccionada como fondo de un elemento.seleccionada como fondo de un elemento.
Acepta los valores repeat, repeat-x, repeat-y Acepta los valores repeat, repeat-x, repeat-y y no-repeaty no-repeat
Background-Background-positionposition
Toma como valor las palabras reservadas Toma como valor las palabras reservadas center, top, bottom, left o right, una distancia center, top, bottom, left o right, una distancia expresada en una unidad de medida válida, o expresada en una unidad de medida válida, o un porcentage.un porcentage.
Propiedades para formatear listasPropiedades para formatear listas
Una lista contiene una serie de entradas precedidas por un Una lista contiene una serie de entradas precedidas por un carácter especial que puede ser un número, una letra carácter especial que puede ser un número, una letra mayúscula, minúscula, o un símbolo como un círculo, un mayúscula, minúscula, o un símbolo como un círculo, un recuadro, etc.recuadro, etc.
La especificación CSS incluye una serie de propiedades La especificación CSS incluye una serie de propiedades para mostrar elementos en forma de listas. para mostrar elementos en forma de listas.
Microsoft Internet Explorer y Netscape Navigator 6 Microsoft Internet Explorer y Netscape Navigator 6 permiten utilizar estas propiedades con documentos XML, si permiten utilizar estas propiedades con documentos XML, si bien sí pueden utilizarse para formatear documentos HTML.bien sí pueden utilizarse para formatear documentos HTML.
Propiedades para formatear listasPropiedades para formatear listas
En el lenguaje HTML se utilizan marcas o etiquetas que En el lenguaje HTML se utilizan marcas o etiquetas que determinan la presentación de los contenidos en pantalla, determinan la presentación de los contenidos en pantalla, entre ellas las etiquetas UL, OL y LI, que se aplican para entre ellas las etiquetas UL, OL y LI, que se aplican para listas.listas.• El elemento UL se utiliza para presentar una lista no El elemento UL se utiliza para presentar una lista no
ordenadaordenada• El elemento OL se utiliza para presentar una lista El elemento OL se utiliza para presentar una lista
ordenada en la cual las entradas van precedidas por un ordenada en la cual las entradas van precedidas por un número que indica el orden de cada entrada en la lista.número que indica el orden de cada entrada en la lista.
• En ambos casos, tanto para las listas ordenadas como En ambos casos, tanto para las listas ordenadas como para las no ordenadas, cada entrada de la lista se para las no ordenadas, cada entrada de la lista se escribirá entre las etiquetas <LI> y </LI>.escribirá entre las etiquetas <LI> y </LI>.
Propiedades para formatear listasPropiedades para formatear listas
Código HTMLCódigo HTML PresentaciónPresentación
<UL><UL>
<LI>Madrid</LI><LI>Madrid</LI>
<LI>Barcelona</<LI>Barcelona</LI>LI>
<LI>Sevilla</LI><LI>Sevilla</LI>
<LI>Bilbao</LI><LI>Bilbao</LI>
</UL></UL>
MadridMadrid BarcelonaBarcelona SevillaSevilla BilbaoBilbao
<OL><OL>
<LI>Madrid</LI><LI>Madrid</LI>
<LI>Barcelona</<LI>Barcelona</LI>LI>
<LI>Sevilla</LI><LI>Sevilla</LI>
<LI>Bilbao</LI><LI>Bilbao</LI>
</OL></OL>
1.1. MadridMadrid
2.2. BarcelonaBarcelona
3.3. SevillaSevilla
4.4. BilbaoBilbao
Propiedades para formatear listasPropiedades para formatear listas
PropiedadPropiedad DescripciónDescripción
DisplayDisplay Para presentar un elemento en forma de Para presentar un elemento en forma de lista, es necesario utilizar la propiedad lista, es necesario utilizar la propiedad display junto con el valor list-itemdisplay junto con el valor list-item
List-style-typeList-style-type Indica qué carácter precede a cada Indica qué carácter precede a cada entrada de la lista. Puede ser un entrada de la lista. Puede ser un número, una letra minúscula, número, una letra minúscula, mayúscula, un bullet circular, etc.mayúscula, un bullet circular, etc.
Acepta los siguientes valores:Acepta los siguientes valores: DiscDisc CircleCircle SquareSquare DecimalDecimal Lower-romanLower-roman Upper-romanUpper-roman Lower-alphaLower-alpha Upper-alphaUpper-alpha
Propiedades para formatear listasPropiedades para formatear listas
PropiedadPropiedad DescripciónDescripción
List-style-positionList-style-position Indica cómo se debe indentar la Indica cómo se debe indentar la Segunda, tercera, etc. Líneas de la Segunda, tercera, etc. Líneas de la entrada de la lista en el caso de que ésta entrada de la lista en el caso de que ésta ocupe más de una liínea.ocupe más de una liínea.
Acepta los valores outside – en este caso Acepta los valores outside – en este caso todas las líneas estarán comenzarán a la todas las líneas estarán comenzarán a la misma altura que la primera línea -, e misma altura que la primera línea -, e inside – en este caso la segunda, tercera inside – en este caso la segunda, tercera y el resto de líneas comenzarán a la y el resto de líneas comenzarán a la misma altura que la imagen o carácter misma altura que la imagen o carácter que precede la entrada de la listaque precede la entrada de la lista
List-style-imageList-style-image Permite situar una imagen precediendo a Permite situar una imagen precediendo a cada entrada de la lista. Tomará cada entrada de la lista. Tomará como valor la URL de la imagen, como valor la URL de la imagen, utilizando la sintaxis:utilizando la sintaxis:
List-style-image : URL(url)List-style-image : URL(url)
Propiedades para formatear listasPropiedades para formatear listas
PropiedadPropiedad DescripciónDescripción
Marker-offsetMarker-offset Esta propiedad se utiliza para indicar la Esta propiedad se utiliza para indicar la distancia que debe hacer entre el distancia que debe hacer entre el carácter o imagen que precede al texto carácter o imagen que precede al texto de cada entrada, y el texto de la entrada de cada entrada, y el texto de la entrada propiamente dicho.propiamente dicho.
Toma como valor una distancia Toma como valor una distancia expresada en una unidad de medida expresada en una unidad de medida válida. Esta propiedad no está soportada válida. Esta propiedad no está soportada por MSIE5por MSIE5
List-styleList-style Combinación de las propiedades Combinación de las propiedades anteriores. Toma como valor los valores anteriores. Toma como valor los valores utilizados para indicar el tipo de utilizados para indicar el tipo de carácter, la posicíopn o la imagen que carácter, la posicíopn o la imagen que debe preceder a cada entrada de la lista.debe preceder a cada entrada de la lista.
Propiedades para formatear tablasPropiedades para formatear tablas
Valor prop. Valor prop. displaydisplay
DescripciónDescripción
TableTable Se creará una tabla con el contenido del Se creará una tabla con el contenido del elemento. La tabla se presentará como elemento. La tabla se presentará como un bloque, con un salto de línea antes y un bloque, con un salto de línea antes y otro después.otro después.
Table-rowTable-row El elemento constituirá una fila de la El elemento constituirá una fila de la tablatabla
Table-cellTable-cell El elemento constituirá una celda en la El elemento constituirá una celda en la tabla. tabla.
In-line-tableIn-line-table Se creará una tabla que no se mostrará Se creará una tabla que no se mostrará como un bloque, sino como un objeto en como un bloque, sino como un objeto en línea. Es decir, el texto del elemento línea. Es decir, el texto del elemento contenedor fluirá a su alrededor.contenedor fluirá a su alrededor.
La propiedad display puede tomar valores para presentar Información en formato tabular:
Propiedades para formatear tablasPropiedades para formatear tablas
Valor prop. Valor prop. displaydisplay
DescripciónDescripción
Table-row-groupTable-row-group Permite utilizar un elemento del Permite utilizar un elemento del documento XML para agrupar dos o más documento XML para agrupar dos o más filas a las que se quiere aplicar una filas a las que se quiere aplicar una presentación común. Equivaldía al presentación común. Equivaldía al elemento TBODY del lenguaje HTMLelemento TBODY del lenguaje HTML
Table-header-groupTable-header-group Permite agrupar filas para que sirvan Permite agrupar filas para que sirvan como cabecera de la tabla. Equivaldría al como cabecera de la tabla. Equivaldría al elemento THEAD del lenguaje HTMLelemento THEAD del lenguaje HTML
Table-footer-groupTable-footer-group Permite agrupar filas para que sirvan Permite agrupar filas para que sirvan como pié de la tablacomo pié de la tabla. . Equivaldría al Equivaldría al elemento TFOOT del lenguaje HTML.elemento TFOOT del lenguaje HTML.
Table-captionTable-caption Muestra el texto del elemento como Muestra el texto del elemento como título de la tablatítulo de la tabla. Se utiliza con la . Se utiliza con la propiedad caption-sidepropiedad caption-side
EjemploEjemplo
<?xml version="1.0"?><?xml version="1.0"?><informe periodicidad="trimestral"><informe periodicidad="trimestral">
<titulo>Informe de Ventas Zona Sur</titulo><titulo>Informe de Ventas Zona Sur</titulo><ventas><ventas><ventas-delegacion><ventas-delegacion><deleg>Getafe</deleg><deleg>Getafe</deleg><vendedor>Jaime Márquez</vendedor><vendedor>Jaime Márquez</vendedor><ventas-pts>2300000</ventas-pts><ventas-pts>2300000</ventas-pts></ventas-delegacion></ventas-delegacion><ventas-delegacion><ventas-delegacion><deleg>Alcorcón</deleg><deleg>Alcorcón</deleg><vendedor>Fabián Pastor</vendedor><vendedor>Fabián Pastor</vendedor><ventas-pts>1300000</ventas-pts><ventas-pts>1300000</ventas-pts></ventas-delegacion></ventas-delegacion></ventas></ventas>
</informe></informe>
EjemploEjemplo
Ventas { display : table }Ventas { display : table }
Ventas-delegacion { display : table-row }Ventas-delegacion { display : table-row }
Deleg,vendedor,ventas-pts { display : table-cell }Deleg,vendedor,ventas-pts { display : table-cell }
EjemploEjemplo
Ventas { Ventas { display : in-line-table ; display : in-line-table ; float: right }float: right }
ventas-delegacion { display : table-row }ventas-delegacion { display : table-row }deleg,vendedor,ventas-pts { display : table-cell }deleg,vendedor,ventas-pts { display : table-cell }
Propiedades para posicionar bloquesPropiedades para posicionar bloques
PropiedadPropiedad DescripciónDescripción
Width Width Anchura de un bloque. Se debe expresar Anchura de un bloque. Se debe expresar en una unidad válida: cm, mm, etc. en una unidad válida: cm, mm, etc.
Height Height Altura de un bloque Altura de un bloque
Float Float Indica si un elemento debe aparecer Indica si un elemento debe aparecer flotante o no. Si es un elemento flotante, flotante o no. Si es un elemento flotante, el texto del elemento que le contiene el texto del elemento que le contiene fluirá alrededor del bloque fluirá alrededor del bloque
positionposition Indica cómo se va a posicionar un Indica cómo se va a posicionar un bloque. Sólo se aplica a elementos cuya bloque. Sólo se aplica a elementos cuya propiedad display recoja el valor block.propiedad display recoja el valor block.
TopTop Indica a qué distancia del borde superior Indica a qué distancia del borde superior del bloque contenedor se va a situar un del bloque contenedor se va a situar un bloquebloque
Propiedades para posicionar bloquesPropiedades para posicionar bloques
PropiedadPropiedad DescripciónDescripción
RightRight Indica a qué distancia del borde derecho Indica a qué distancia del borde derecho del bloque contenedor se va a situar el del bloque contenedor se va a situar el bloque.bloque.
LeftLeft Indica a qué distancia del borde Indica a qué distancia del borde izquierdo del bloque contenedor se va a izquierdo del bloque contenedor se va a situar el bloque.situar el bloque.
BottomBottom Indica a qué distancia del borde inferior Indica a qué distancia del borde inferior del bloque contenedor se va a situar el del bloque contenedor se va a situar el bloque.bloque.
OverflowOverflow Esta propiedad se utilizará cuando el Esta propiedad se utilizará cuando el contenido de un elemento supera el contenido de un elemento supera el espacio que se le ha reservado. espacio que se le ha reservado.
Propiedades para posicionar bloquesPropiedades para posicionar bloques
Propiedades para posicionar bloquesPropiedades para posicionar bloques