Hojas de estilo CSS

Curso: XML, de los datos a la presentación

Julio de 2005
CAPTIVA · www.captiva.es
 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 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

<hoja> hoja {
<encabezado> margin-left:20pt;
Don Quijote margin-right:20pt;
</encabezado> font-size: 14pt; Don Quijote
<parrafo> color: blue;
En un lugar de la }
Mancha ... margin-left:20pt;
</parrafo> encabezado { margin-right:20pt;
<hoja> margin-top: 10pt; margin-top: 10pt;
margin-botton: 10pt; margin-botton: 10pt;
font-size: 18pt; 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
selector
{

propiedad1: valor1;

propiedad1: valor1;
}
 Ejemplo
emphasis {
font-style: italic;
font-weight: bold;
}
 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 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
<body>
<h1>Encabezado</h1>
<p>Parrafo</p>
</body>
body { h1 {
font-size:14pt;
font-size:12pt; color: green;
color: green; }
} p {
h1 { font-size:14pt;
font-size:14pt; color: green;
} }
 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>
tabla{ display:table }
<celda>A1</celda>
fila { display:table-row }
<celda>A2</celda>
celda{ display:table-cell
</fila>
}
<fila>
<celda>B1</celda>
<celda>B2</celda>
</fila>
<tabla>
 Propiedades (V)
 Propiedades para elementos tipo bloque
(tb listas, tablas)
 Modelo de caja CSS
margin-top
margin-left

margin-right
Texto dentro de la Texto dentro de la
caja. Texto dentro caja. Texto dentro
de la caja. Texto de la caja. Texto
dentro de la caja. dentro de la caja.

margin-bottom
padding
border
 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.css
casino{ nombre:first-letter { carta[palo="copas"]
background: aqua; font-size: 200%; {
} font-weight: bold; color:red;
bienvenida{ float: left; }
display:list-item; padding-right: 3pt carta[palo="espadas"]
list-style-position:inside; } {
list-style-type:circle; color: blue;
color:olive; nombre:first-child:before{ }
} content:"Jugador: "; carta[palo="bastos"]
bienvenida:first-child:first-line{ color:black; {
font-variant:small-caps; text-align:left; color:green;
} font-style:normal; }
}
mesa { carta {
background: silver; border-width:2px;
display:table; line-height:4em;
} font-size: 20pt;
display: table-cell;
jugador { border-color:black;
display:table-row; margin-left:2pt;
} margin-right:2pt;
border: thin groove black;
nombre { }
border: thin dashed black; carta[palo="oros"]
display: block; {
margin-right:10pt; color:yellow;
font-style:italic; text-decoration:blink;
} }
Ejemplo: resultado
 Ejercicio
 Parámetros globales:
 Letra Arial 14pt
 Fondo: Olive
 Bordes (todos): 2cm
 Bienvenida
 Justificado
 120%
1 cm  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”