Curso: XML, de los datos a la presentación Julio de 2005 CAPTIVA · 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 Nuevas capacidades (posicionamiento absoluto, tipos “media”, …)  CSS3  ¿Futuro?  Pega  No es posible reestructurar documento XML  No es XML  XSLT  Parte de XSL. Versión  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  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  Href  URI (local o Inet)  Particularización CSS  Combinación de varias CSS dentro de url(

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 regla nombre { 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 Don Quijote En un lugar de la Mancha... 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  Ejemplo emphasis { font-style: italic; font-weight: bold; } {}{} selector 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 [formahoja|=“estrecha”]  #abeto  arbol.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: uno dos p:first-child { font-style: italics;}  Resultado  uno dos  link  active  visited  hover  focus  lang(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 texto nombre: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 Encabezado Parrafo 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.: A1 A2 B1 B2 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. padding border 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  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 Bienvenidos. Hagan sus apuestas. Únanse a cualquiera de las mesas de juego y diviértanse. Pedro As Rey Seis Juan Dos Tres Sota

Ejemplo: casino.css casino{ 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/Espada s/Copas” 1 cm