Css en XML

609 views

Published on

Com fer servir CSS en documents XML

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
609
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Css en XML

  1. 1. Llenguatge de marques isistemes de gestió dinformació UF 1: Programació amb XML Part 4CSS Xavier Sala Pujolar IES Cendrassos
  2. 2. XML● XML sovint es veu només com un format per emmagatzemar dades.● Tot i que és cert també tenim vocabularis XML tenen altres usos més “visibles” per al gran públic – SVG: Mostrar imatges 2D vectorials – XHTML: Representació de dades en format web – MathXML: Fórmules matemàtiques – etc.. Administració de Sistemes Informàtics i Xarxes
  3. 3. Mostrar les dades● Sovint ens interessarà mostrar les dades a humans – XML no està pensat per ser llegit● Els navegadors web ara no només mostren HTML sinó que també poden mostrar XML – No nentenen la semàntica de les etiquetes – Però sels hi pot afegir algun tipus de full destil indicant com sha de mostrar el contingut de les etiquetes Administració de Sistemes Informàtics i Xarxes
  4. 4. Mostrar les dades● Per tant a un XML li haurem de fer alguna cosa perquè sigui llegible per un humà: – Transformar el document a un format més pensat per ser llegit (HTML, PDF, ... ) – Especificar la forma en que es mostren les dades <?xml version=”1.0” encodint=”UTF-8” ?> <classe> <professor> Professor: blau <nom>Xavier</nom> Alumnes: vermells </professor> Classe: al mig <alumne> Nom: en negreta i un a cada <nom>Pere</nom> línia </alumne> </classe> Administració de Sistemes Informàtics i Xarxes
  5. 5. CSS● Els Cascading Style Sheets (CSS) són una forma de donar format a les dades dun document – Si sabem que el document es representarà en una pàgina web – Els documents XML i HTML solen tenir: ● Etiquetes estructurades (Descriuen la estructura dun document) ● Etiquetes semàntiques (indiquen alguna cosa sobre el document) ● Etiquetes destil (Indiquen el format de les dades) Administració de Sistemes Informàtics i Xarxes
  6. 6. CSS● CSS permet que definim les regles de presentació dun document a partir de les etiquetes● Permet definir lestil de representació dun document HTML, XHTML o XML sense barrejar les dades amb el contingut● Amb CSS definim com es representaran les dades al visualitzar-les amb un navegador● Es pot fer una presentació comuna per múltiples pàgines Administració de Sistemes Informàtics i Xarxes
  7. 7. CSS● Definim de quina forma es representaran les diferents etiquetes: h1 { font-family: arial; } propietat Selector Valor Administració de Sistemes Informàtics i Xarxes
  8. 8. CSS● Si volem especificar més propietats simplement les posem una darrere laltra dins dels corxets● També podem especificar més dun selector h1, h2 { font-family:arial; font-weight:bold; color:#FF0000; background-color:#00FF00; }● Per tant només hem de conèixer les propietats de CSS i tindrem un potent mecanisme per poder representar les dades XML Administració de Sistemes Informàtics i Xarxes
  9. 9. Herència● La “C” de CSS vol dir “Cascading” i vol dir que les propietats es poden heretar pels elements fills h1, h2 { font-family:arial; font-weight:bold; color:#FF0000; background-color:#00FF00; } h2 { font-style: italic; }● “h2” a més de les característiques anteriors estarà en cursiva Administració de Sistemes Informàtics i Xarxes
  10. 10. Herència● També ens permet definir estils per etiquetes que estiguin en un ordre determinat h1+ h2 { font-weight:normal; } – Només els h2 que estiguin immediatament després duna etiqueta h1● Si repetim una etiqueta en el mateix nivell i algun valor es repeteix el darrer és el vàlid h1, h2 { font-family:arial; font-weight:bold; } h2 { font-style: italic; } Administració de Sistemes Informàtics i Xarxes
  11. 11. CSS i XML● Per aplicar stylesheets a un document XML lhem de definir en el document <?xml version=”1.0” encoding=”UTF-8” ?> <?xml-stylesheet type=”text/css” href=”fitxer.css” ?> El document té definit un estil de● O sigui: presentació <?xml-stylesheet type=”text/css” href=”fitxer.css” ?> Fitxer destil Administració de Sistemes Informàtics i Xarxes
  12. 12. CSS i XML● També es poden afegir més atributs Atribut Descripció Title El nom o el títol del full Indica sota quin medi es farà servir el CSS: screen, print, tty, aural, braille, handheld, tv, all Media Sen poden posar diversos alhora Charset Indica el codi de caràcters que es fa servir Indica si el CSS que es fa servir és el preferit. Pot ser yes o no. Per defecte és no Alternate La idea és donar múltiples fulls CSS donant-ne un de preferit i deixar que els usuaris en triïn un altre Administració de Sistemes Informàtics i Xarxes
  13. 13. Selectors● A part despecificar etiquetes disposem duns selectors predefinits:● Selector universal (*) – Selecciona totes les etiquetes del document <?xml version=”1.0” encoding=”UTF-8” ?> <classe> <alumne> <nom>Pere<nom> </alumne> </classe> * { color: #FF0000; } Administració de Sistemes Informàtics i Xarxes
  14. 14. Selectors● Selector de tipus (etiqueta,etiqueta) – Selecciona les etiquetes del document especificades <?xml version=”1.0” encoding=”UTF-8” ?> <classe> <alumne> <nom>Pere<nom> </alumne> <professor>Xavier</professor> </classe> nom { color: #FF0000; } professor { color: #0000FF; } Administració de Sistemes Informàtics i Xarxes
  15. 15. Selectors● Selector de fills (pare > fill) – Selecciona els fill que són fills directes de la etiqueta pare <?xml version=”1.0” encoding=”UTF-8” ?> <classe> <professor> <nom>Xavier</nom> </professor> <alumne> <nom>Pere</nom> </alumne> </classe> alumne > nom { color: #FF0000; } Administració de Sistemes Informàtics i Xarxes
  16. 16. Selectors● Selecciona del primer fill (etiqueta:first-child) – Selecciona només el primer fill de letiqueta especificada <?xml version=”1.0” encoding=”UTF-8” ?> <classe> <alumne> <nom>Pere</nom> <nom>Manel</nom> <nom>Marcel</nom> </alumne> </classe> alumne:first-child { color: #FF0000; } Administració de Sistemes Informàtics i Xarxes
  17. 17. Selectors● Selector de descendents (etiqueta descen) – Selecciona les etiquetes descen que siguin descendents detiqueta <?xml version=”1.0” encoding=”UTF-8” ?> <classe> <alumne> <nom>Pere<nom> </alumne> </classe> classe nom { color: #FF0000; } – Pintarà el contingut de les etiquetes nom de color vermell Administració de Sistemes Informàtics i Xarxes
  18. 18. Selectors● Selector de germans adjacents (+) – Selecciona la etiqueta germana que estigui just darrere de letiqueta especificada <?xml version=”1.0” encoding=”UTF-8” ?> <classe> <alumne> <delegat /> <nom>Pere</nom> </alumne> <alumne> <nom>Joan</nom> </alumne> </classe> delegat+nom { color: #FF0000; } Administració de Sistemes Informàtics i Xarxes
  19. 19. Selectors● Selector per id (etiqueta#id) – Selecciona qualsevol etiqueta que tingui lidentificador especificat <?xml version=”1.0” encoding=”UTF-8” ?> <classe> <alumne id=”home”> <delegat /> <nom>Pere</nom> </alumne> <alumne id=”dona”> <nom>Maria</nom> </alumne> </classe> alumne#home { color: #FF0000; } Administració de Sistemes Informàtics i Xarxes
  20. 20. Disseny● Quan es visualitza qualsevol cosa amb CSS és tractada com si estes dins duna caixa rectangular● Cada caixa té quatre components margin border Contingut padding Administració de Sistemes Informàtics i Xarxes
  21. 21. Disseny● Per defecte els valors de margin, padding i border estan a zero● Podem canviar-ne els valors amb les propietats: – Margin ● margin, margin-left, margin-right, margin-top, margin-bottom – Padding ● padding, padding-left, padding-right, padding-top, padding-bottom nom { margin: 3px; padding-left:4px; } Administració de Sistemes Informàtics i Xarxes
  22. 22. Disseny● Amb el border tenim més possibilitats: – border-style: pot ser none, solid, dashet, dotted, double, groove, ridge, inset, outset – border-width: especifiquem lamplada. El més corrent és fer-ho amb pixels (10px) – border-color: el color que tindrà. Pot ser amb el nom en anglès, amb la funció rgb() o en hexadecimal – border: tot de cop especificant un rere laltre amplada,estil i color nom { border-color:#000000; border-style:solid; } Administració de Sistemes Informàtics i Xarxes
  23. 23. Disseny● Cada caixa en pot contenir daltres a dins que es correspondran amb el contingut intern● Hi ha dos tipus de caixes: – block: Treballen amb blocs de contingut. Com si tinguéssim un salt de línia darrere – inline: pot fluir contínuament amb la resta del contingut● Amb els navegadors hem de forçar la visualització amb display (block, inline o none) professor { display:block; } alumne { display:inline; } Administració de Sistemes Informàtics i Xarxes
  24. 24. Posicionament● El posicionament en CSS reposa sobre tres opcions: normal, flotant i posició absoluta (707)● Posicionament Normal – Es tracta del funcionament per defecte, les caixes apareixen una rere laltra i de dalt a baix – Els marges verticals són els mateixos. Només es fa servir el més gran de tots dos Administració de Sistemes Informàtics i Xarxes
  25. 25. Posicionament● Podem canviar la posició “relativa” posant valors a left, right, top o bottom alume { position:relative; top:6px; }● Canviant el posicionament dues caixes poden ocupar el mateix lloc● CSS no especifica quina ha de quedar per sobre – Això fa que els navegadors ho tractin de forma diferent. ● Firefox i IE: els relative van davant, Opera: Segueix lordre en que apareixen els elements Administració de Sistemes Informàtics i Xarxes
  26. 26. Posicionament● Posicionament flotant – float ens permet especificar una caixa flotant permetent que laltre contingut vagi al voltant seu professor { float: left; width: 20%; margin: 5px; } Administració de Sistemes Informàtics i Xarxes
  27. 27. Posicionament● Si els elements del voltant de clear són més petits que el float pot passar que quedi per damunt de les següents● Per evitar-ho es pot fer servir clear Valor Descripció left El costat esquerre no pot ser adjacent a una float right El mateix amb el costat dret Both Cap dels dos costats None Funcionament per defecte Inherit Shereta el de la caixa contenidora alumne { clear: left; } Administració de Sistemes Informàtics i Xarxes
  28. 28. Posicionament● Posicionament absolut – Posiciona exactament la caixa en un lloc determinat fent servir position:absolute – Seliminen les caixes del flux normal – La resta del contingut no quedarà al voltant sinó que pot quedar per sota ● Per aquest motiu sovint farà falta especificar també lamplada o lalçada: width i height professor { position:absolute; left:10px; top:6px; width: 100px; } Administració de Sistemes Informàtics i Xarxes
  29. 29. Posicionament● Un cas especial de posicionament absolut és el posicionament fix.● Ens fixa una caixa en la pantalla de manera que no es mourà encara que es mogui la pàgina professor { position:fixed; left:10px; top:6px; width: 100px; } Administració de Sistemes Informàtics i Xarxes
  30. 30. Taules● XML no té el concepte de taula de HTML i per tant ens pot fer falta alguna forma de representar-les● Tenim la propietat display que ens pot servir per fer taules Valor Descripció display:table El contingut representa una taula display:table-row El contingut representa una fila display:table-cell El contingut representa una cel·la duna taula display:table-caption El caption Administració de Sistemes Informàtics i Xarxes
  31. 31. Taules<?xml version="1.0" encoding="UTF-8"?> classe { display:block;<classe> } <alumnes> alumnes { display:table; <alumne> border-style:solid; <nom>Pere</nom> margin:10px; } <cognom>Punyetes</cognom> alumne { display:table-row; </alumne> background-color:blue; <alumne> border-style:solid; <nom>Filomenu</nom> } <cognom>Garcia</cognom> nom, cognom { display:table-cell; </alumne> padding:10px; } <alumne> nom { background-color:green; } <nom>Mariano</nom> cognom{background-color:red; } <cognom>Pi</cognom> </alumne> </alumnes></classe> Administració de Sistemes Informàtics i Xarxes
  32. 32. Enllaços● No hi ha cap forma de fer enllaços en XML 1.0● Per aquest motiu es va crear XLink – XLink va més enllà del que es pot fer amb els simples enllaços HTML ● Es poden oferir múltiples llocs amb un simple enllaç ● Definir els enllaços en documents separats o bases de dades en comptes de dins de les dades – Els navegadors no tenen suport complet dXLink● No ho veurem Administració de Sistemes Informàtics i Xarxes
  33. 33. Imatges● Afegir imatges en el document sha de fer a través dXLinks <link xlink:type=”simple” xlink:show=”embed” xlink:actuate=”onLoad” xlink:title=”Imatge” xlink:href=”imatge.jpg”> </link>● Però també es pot usar el background-image de CSS i mostrar una imatge logo { display:block; background-image:url(logo.png); background-repeat: no-repeat; } Administració de Sistemes Informàtics i Xarxes
  34. 34. Afegir contingut● Podem afegir contingut extra amb els “pseudo- selectors” Descripció :before Permet afegir contingut abans dun element :after Permet afegir contingut després dun element :first_letter Permet afegir estils especials a la primera llegra del selector Permet aplicar estils especials a la primera línia de text dun :first-line selector professor:before { content:”Professor:”; } Administració de Sistemes Informàtics i Xarxes
  35. 35. Selectors dAtributs● Selector datributs ( [atribut] ) – També podem seleccionar segons el contingut dels atributs ● Si existeix alumne[delegat] { color:#FF0000; } ● Si té un valor alumne[delegat=”true”] { color:#FF0000; } ● Si algun dels seus valors de llista és alumne[assignatures]~=”XML” { color:#FF0000; } Administració de Sistemes Informàtics i Xarxes
  36. 36. Selector datributs● Podem combinar el selector datributs perquè ens compari segons més dun valor alumne[delegat][sexe=”home”] { color:#FF0000; } alumne[delegat][sexe=”dona”] { color:#FFFF00; }● Daquesta forma podem controlar més detalladament la presentació de les etiquetes que tenen atributs – No hi ha cap problema per combinar diferents condicions Administració de Sistemes Informàtics i Xarxes
  37. 37. Mostrar Atributs● Mostrar el valor dels atributs no és senzill amb CSS – CSS està pensat per mostrar el contingut● Però es pot fer aprofitant-se dels pseudo- selectors :before i :after● I fer servir content amb la funció attr(..) <alumne delegat=”delegat”> <nom>Pere</nom> </alumne> alumne:after { display:block; content: “(“ attr(delegat) “)”; } Administració de Sistemes Informàtics i Xarxes
  38. 38. Propietats● CSS defineix moltes propietats i a cada versió nafegeix més● Les podem resumir en: – Propietats de tipus de lletres – Propietats de color i fons de pantalla – Propietats de text – Propietats de caixes● Podem veure les de la versió 2.1 a: http://www.w3.org/TR/CSS21/propidx.html Administració de Sistemes Informàtics i Xarxes
  39. 39. Unitats● En CSS podem fer servir molts tipus dunitats. Sempre en funció del que necessitem: Pixels (px), ems (em), percentatge (%), punts (pt), polzades (in), Longitud centímetres (cm) Color rgb(r,g,b), #rrggbb, #rgb width: 744px; margin-left: 1.25em; left:34%; font-size: 12pt; margin-top:1.25in; margin-bottom:1.5cm; background-color:rgb(255,0,0); color:#FF2200; color:#f20; Administració de Sistemes Informàtics i Xarxes
  40. 40. Propietats de tipus de lletres● Les propietats dels tipus de lletres estan basades en la propietat font font Permet canviar tots els paràmetres de cop Permet especificar la font a fer servir i la seva família (serif, sans-serif, cursive, fantasy, monospace) font-family P { font-family: "New Century Schoolbook", Times, serif } Podem marcar la mida del tipus de lletra que volem font-size A { font-size:12pt; } Definim el pes del tipus de lletra font-weight B {font-weight:bold; } font-variant Podem definir què es fa servir: normal o small-caps font-style normal, italic, oblique Administració de Sistemes Informàtics i Xarxes
  41. 41. Propietats de color i de fons● Dentre les propietats de color i de fons en destaquen: color Determina el color del contingut background-color Defineix quin és el color de fons de la caixa background-image Defineix una imatge de fons background-repeat Defineix si la imatge de fons sha de repetir i com background-position Defineix en quina posició sha de posar el fons Defineix si el fons segueix amb lscroll del background-attachment navegador o no Administració de Sistemes Informàtics i Xarxes
  42. 42. Propietats de text● Les propietats de text permeten definir com es mostra el text: alineació, orientació, etc.. word-spacing Espaiat entre paraules letter-spacing Espaiat entre lletres text-decoration Decoració del text: subratllat, etc.. vertical-align Alineació vertical Modifica la forma com es mostra el text: majúscules, text-transform etc... text-align Alineació del text: centrat, justificat, esquerra, ... line-height Altura de la línia de text Administració de Sistemes Informàtics i Xarxes
  43. 43. Propietats de caixa● Les propietats de caixa defineixen com es posicionarà la caixa: margin Espaiat entre paraules padding Espai dins del border-width Defineixen les característiques de la línia que border-color envolta la caixa boder-style width / height Amplada i altura de la caixa float Defineix la caixa com a flotant Defineix si els elements permeten caixes flotants al clear seu costat Normalment es fa servir perquè una caixa no es vegi visibility amb hidden. Conserva lespai Administració de Sistemes Informàtics i Xarxes
  44. 44. Invisibilitat● Podem fer que una caixa sigui invisible amb la propietat visibility=hidden; – Però encara ocuparà lespai que li pertocava <h1>Hola</h1> h2 { Hola <h2>Xavier</h2> visibility:hidden; <h3>Sala</h3> } Sala● Si volem eliminar-la ho farem amb display:none <h1>Hola</h1> h2 { Hola <h2>Xavier</h2> display:none; Sala <h3>Sala</h3> } Administració de Sistemes Informàtics i Xarxes

×