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 ;


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 }


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

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> </BODY> </HTML></HTML>


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>


* { display : block ; * { display : block ;

font-family : verdana ; font-family : verdana ;


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


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 }


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 }


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>

Este es un documento de ejemplo asociado a una hoja de estilo con nombreejemplo_5.css

</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


datos-Personales { font-family : verdana;datos-Personales { font-family : verdana;


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 }


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.



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’



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



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


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


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


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


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


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


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


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 }


border : thin solid red ;border : thin solid red ;

Padding : 1cm }Padding : 1cm }


border : thin solid red ;border : thin solid red ;

Padding : 2cm 1cm }Padding : 2cm 1cm }

EjemploEjemplo

Propiedades para fondosPropiedades para fondos


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.


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


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



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



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)



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


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



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.

Documents

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