1 / 25

Hojas de estilo CSS

XML. Hojas de estilo CSS. Hoja de estilo A. Hoja de estilo B. Hoja de estilo C. 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

aidan-melendez
Download Presentation

Hojas de estilo CSS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. XML Hojas de estilo CSS

  2. Hoja de estilo A Hoja de estilo B Hoja de estilo C 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

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

  4. 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”);

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

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

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

  8. selector { } propiedad1: valor1; propiedad1: valor1; Reglas • Sintáxis • Ejemplo emphasis { font-style: italic; font-weight: bold; }

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

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

  11. 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: "; }

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

  13. 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; • }

  14. 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%;

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

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

  17. 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. Propiedades (V) • Propiedades para elementos tipo bloque (tb listas, tablas) • Modelo de caja CSS margin-top margin-left margin-right margin-bottom padding border

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

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

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

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

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

  23. 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; }

  24. Ejemplo: resultado

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

More Related