Hojas de estilo CSS
-
Upload
aidan-melendez -
Category
Documents
-
view
70 -
download
3
description
Transcript of Hojas de estilo CSS
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