Curso: XML, de los datos a la presentaciónJulio de 2005

CAPTIVA · www.captiva.es

Hojas de estilo CSS

Hojas de estilo XML estructura la información no define presentación

Necesitamos hojas de estilo Ventajas

Una misma hoja de estilo para muchos documentos XML Varias hojas de estilo Varios formatos de presentación Hojas de estilo se pueden combinar Reutilización

Hoja de estilo A

Hoja de estilo B

Hoja de estilo C

Alternativas estilo XML Cascading Style Sheets (CSS)

Lenguaje simple formateo HTML. Aplicable a XML. Concepto de “cascada” CSS1 W3C 1996 CSS2 W3C 1998. Nuevas capacidades (posicionamiento absoluto, tipos “media”, …) CSS3 ¿Futuro? Pega No es posible reestructurar documento XML No es XML

XSLT Parte de XSL. Versión 1.0 1999 Transformación documentos XML en XML (XHTML, SVG, …) Lenguaje de reglas de patrones (template rules) Más complejo y potente que CSS (bucles, condiciones, …) Hace uso de Xpath Extracción nodos Es XML

XSL Formating Objects (XSL-FO) Parte de XSL. Versión 1.0 2001 CSS Orientado a Web Objetivo formatear documentos orientados a impresión Paginación, orientación,

tamaño página, etc. Funcionalidad similar a “Latex” en XML

Introducción CSS

Declaración en documento XML PI en el prólogo

<?xml-stylesheet type = “MIME-type” href = “url-to-stylesheet” ?>

Href URI (local o Inet) Particularización CSS

<?xml-stylesheet type = “text/css” href = “mystylesheet.css” ?>

Combinación de varias CSS dentro de una@import url(http://www.captiva.es/styles/general.css”);

@import url(http://www.captiva.es/styles/manuales.css”);

Introducción CSS (II) Funcionamiento de lenguaje

Reglas que se aplican a elementos Proceso lineal

Coger elemento Buscar regla que mejor se ajuste Formatear Continuar por siguiente elemento

Ejemplo reglanombre {

color: blue;font-family: garamond, serif;font-size: 12pt;

} Posiblemente varias reglas se apliquen al mismo elemento

Se “unen” propiedades Se eliminan redundates en base a algoritmo

Herencia de reglas Elemento hereda propiedades definidas para antecesores

Introducción CSS (III)

Funcionamiento de lenguaje (II) Herencia de reglas

Elemento hereda propiedades definidas para antecesores Ejemplo

<hoja> <encabezado> Don Quijote </encabezado> <parrafo> En un lugar de la Mancha ... </parrafo><hoja>

hoja { margin-left:20pt; margin-right:20pt; font-size: 14pt; color: blue;}

encabezado { margin-top: 10pt; margin-botton: 10pt; font-size: 18pt; }

Don Quijote

margin-left:20pt;margin-right:20pt;margin-top: 10pt;margin-botton: 10pt;font-size: 18pt;color: blue;

Introducción CSS (IV)

Funcionamiento de lenguaje (III) Comentarios

/* Todo esto es un comentario

hola { color:red }

otro { color:blue }

y aquí se acaba */

Carencias Orden de elementos fijo No se pueden reutilizar elementos Tabla de contenidos No es posible lógica en función de contenidos Solución XSLT

Reglas

Sintáxis

Ejemploemphasis {

font-style: italic;

font-weight: bold;

}

{

}

selector

propiedad1: valor1;

propiedad1: valor1;

Selectores Sintaxis

nombre-elemento [atributo1 = “valor1”][atributo2 = “valor2]… Ejemplos

* { color: red } Todos los elementos Selección de atributos

arbol [hoja] arbol [hoja=“caduca”] arbol [copa~=“redondeada”]

<arbol copa=“redondeada frondosa”> <arbol copa=“ancha redondeada”>

arbol [formahoja|=“estrecha”] <arbol formahoja=“aguja-estrecha”> <arbol formahoja=“elipse-estrecha”>

#abeto<arbol id=“abeto”>

arbol.acacia<arbol class=“acacia”>

Selectores (II) Selección contextual

Ascendencia (>)book > title { font-size: 24pt; } chapter > title { font-size: 20pt; }chapter > subchapter > title { font-size: 18pt; }title { font-size: 16pt;}

Pseudoclases (elemento:pseudoclase) first-child

Ejemplo:<texto><p>uno</p><p>dos</p></texto>p:first-child { font-style: italics;} Resultado uno dos

link active visited hover focus lang(es) <elemento xml:lang=“es_ES”>

Selectores (III) Selección contextual (II)

Pseudoelementos (elemento:pseudoelemento) first-letter

Ejemplo letra inicial de historia:nombre:first-letter { font-size: 200%; font-weight: bold; float: left; padding-right: 3pt}

first-line Primera línea tal y como aparece en el navegador:

bienvenida:first-line{font-variant:small-caps;

} before after

Puntos inmediatamente posterior o anterior a elemento. Para inserción de textonombre:first-child:before{

content:"Jugador: ";}

Selectores (IV)

¿Qué ocurre si a un elemento le corresponden varios selectores?

Se unen propiedades Si las propiedades “colisionan” se escoje la

definida por selector más específico Propiedad ID Mayor número de atributos y pseudoclases Descendencia más explícita En caso de empate Gana el último escrito

Propiedades

Las propiedades se heredan <body>

<h1>Encabezado</h1>

<p>Parrafo</p>

</body>h1 {

font-size:14pt; color: green;

}p {

font-size:14pt;color: green;

}

body { font-size:12pt; color: green;

}h1 {

font-size:14pt;}

Propiedades (II)

Unidades de medida Absolutas

Milímetros (mm), centímetros (cm), pulgadas (in), puntos (pt) y picas (pc)

Ej font-size: 14pt;

Relativas Tamaño de letra ‘m’ em Tamaño de letra ‘x’ ex

Ej font-size: 2.5ex; Porcentaje a valor heredado

Ej font-size: 200%;

Propiedades (III) Propiedad display

none Invisible. No muestra el elemento

inline (por defecto) Renderiza contenido de elementos en línea

block Termina el contenido con nueva línea. Un párrafo es un bloque.

list-item Muestra el contenido del elemento como un elemento de lista Propiedades complementarias:

list-style-type Tipo de marcador (p.e. decimal) list-style-position Dónde va marcador (p.e. inside) list-style-image En caso de usar una imagen como marcador

/* A bulleted list */ ingredient {

display: list-item; list-style-position: inside }

Propiedades (IV) Propiedad display (II)

Elementos de tabla (análogos HTML 4.0) table inline-table table-row-group table-header-group table-footer-group table-row table-column-group table-column table-cell table-caption Cada elemento ha de llevar el tipo de tabla adecuado a su jerarquía. P.e.:

<tabla> <fila> <celda>A1</celda> <celda>A2</celda> </fila> <fila> <celda>B1</celda> <celda>B2</celda> </fila><tabla>

tabla{ display:table }fila { display:table-row }celda{ display:table-cell }

Propiedades (V)

Propiedades para elementos tipo bloque (tb listas, tablas)

Modelo de caja CSS

Texto dentro de la caja. Texto dentro de la caja. Texto dentro de la caja.

Texto dentro de la caja. Texto dentro de la caja. Texto dentro de la caja.

paddingborder

margin-left

margin-right

margin-top

margin-bottom

Propiedades (VI)

Márgenes margin-xxxxx margin: top [right][bottom][left]

Ejemplo Parrafo { margin: 5% 10em 0 }

Bordes border: anchura estilo color Estilos: solid, dashed, dotted, groove,

ridge, double, inset, outset Ej.

border: thin solid yellow;border: 20pt dashed blue;

Propiedades (VII) Fuentes

font-family Lista separada por comas por orden de prioridad de fuentes a

aplicar. La última debería ser algo genérico (serif, sans-serif, cursive, monospace,fantasy)

Ejemplo: font-family: Palatino, “Times New Roman”, Times, serif;

font-size Prefijados: xx-large, x-large, large,medium, small,

x-small,xx-small Valor: p.e. 120% o 0.2 cm

font-style (normal, italic, oblique, iherit) font-weight (bold, light)

También relativos (bolder, lighter) O valor 100-900

font-variant small-caps

Propiedades (VIII)

Propiedades de texto text-indent

Indenta primera línea. Sólo se aplica a bloques. Ejemplo:

text-indent: 1.5in;

text-align (left, right, center, justify) Sólo se aplica a bloques

text-decoration (underline, overline, line-through, blink)

text-transform (capitalize, uppercase, lowercase, inherit)

white-space (normal, pre, nowrap, inherit) Pre como en HTML preserva todo (espacios, nuevas líneas) Nowrap, normal Como en párrafos HTML

Propiedades (IX)

Colores color

Color del texto

background-color Color del fondo

border-color Alternativas para especificar el color:

Por nombre: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow

Código RGB: #FF0000 ó rgb(255,0,0) ó rgb(100%,0,0)

Ejemplo: casino.xml

<?xml version="1.0" encoding="utf-8"?><?xml-stylesheet type="text/css" href="casino.css"?><casino>

<bienvenida>Bienvenidos. Hagan sus apuestas. Únanse a cualquiera de las mesas de juego y diviértanse.

</bienvenida><mesa juego="brisca">

<jugador><nombre>Pedro</nombre><carta palo="oros">As</carta><carta palo="copas">Rey</carta><carta palo="espadas">Seis</carta>

</jugador><jugador>

<nombre>Juan</nombre><carta palo="bastos">Dos</carta><carta palo="copas">Tres</carta><carta palo="oros">Sota</carta>

</jugador></mesa>

</casino>

Ejemplo: casino.csscasino{

background: aqua;}bienvenida{

display:list-item;list-style-position:inside;list-style-type:circle;color:olive;

}bienvenida:first-child:first-line{

font-variant:small-caps;}

mesa {background: silver;display:table;

}

jugador {display:table-row;

}

nombre {border: thin dashed black;display: block;margin-right:10pt;font-style:italic;

}

nombre:first-letter {font-size: 200%;font-weight: bold;

float: left; padding-right: 3pt}

nombre:first-child:before{content:"Jugador: ";color:black;text-align:left;font-style:normal;

}carta {

border-width:2px;line-height:4em;font-size: 20pt;display: table-cell;border-color:black;margin-left:2pt;margin-right:2pt;border: thin groove black;

}carta[palo="oros"]{

color:yellow;text-decoration:blink;

}

carta[palo="copas"]{

color:red;}carta[palo="espadas"]{

color: blue;}carta[palo="bastos"]{

color:green;}

Ejemplo: resultado

Ejercicio Parámetros globales:

Letra Arial 14pt Fondo: Olive Bordes (todos): 2cm

Bienvenida Justificado 120%

Mesa[juego=“brisca”] Borde: groove, 2px, negro Mensaje: “Mesa de Juego de Brisca” Fondo:Silver

Jugador Negrita Mensaje: “Jugador “

Carta Lista: tipo “circle” Mensaje: “ de Oros/Bastos/Espadas/Copas”1 cm