css en xml

Llenguatge de marques i sistemes de gestió d'informació

CSS

Xavier Sala PujolarIES Cendrassos

UF 1: Programació amb XMLPart 4

Administració de Sistemes Informàtics i Xarxes

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


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 n'entenen la semàntica de les etiquetes

– Però se'ls hi pot afegir algun tipus de full d'estil indicant com s'ha de mostrar el contingut de les etiquetes


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> <nom>Xavier</nom> </professor> <alumne> <nom>Pere</nom> </alumne></classe>

Professor: blauAlumnes: vermellsClasse: al migNom: en negreta i un a cada línia


CSS● Els Cascading Style Sheets (CSS) són una

forma de donar format a les dades d'un 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

d'un document)● Etiquetes semàntiques (indiquen alguna cosa

sobre el document)● Etiquetes d'estil (Indiquen el format de les dades)


CSS● CSS permet que definim les regles de

presentació d'un document a partir de les etiquetes

● Permet definir l'estil de representació d'un 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


CSS● Definim de quina forma es representaran les

diferents etiquetes:

h1 { font-family: arial; }

Selector

propietat

Valor


CSS● Si volem especificar més propietats simplement

les posem una darrere l'altra dins dels corxets● També podem especificar més d'un selector

● Per tant només hem de conèixer les propietats de CSS i tindrem un potent mecanisme per poder representar les dades XML

h1, h2 { font-family:arial; font-weight:bold; color:#FF0000; background-color:#00FF00; }


Herència● La “C” de CSS vol dir “Cascading” i vol dir que

les propietats es poden heretar pels elements fills

● “h2” a més de les característiques anteriors estarà en cursiva

h1, h2 { font-family:arial; font-weight:bold; color:#FF0000; background-color:#00FF00; }

h2 { font-style: italic; }


Herència● També ens permet definir estils per etiquetes

que estiguin en un ordre determinat

– Només els h2 que estiguin immediatament després d'una etiqueta h1

● Si repetim una etiqueta en el mateix nivell i algun valor es repeteix el darrer és el vàlid

h1+ h2 { font-weight:normal; }

h1, h2 { font-family:arial; font-weight:bold; }

h2 { font-style: italic; }


CSS i XML● Per aplicar stylesheets a un document XML

l'hem de definir en el document

● O sigui:

<?xml version=”1.0” encoding=”UTF-8” ?><?xml-stylesheet type=”text/css” href=”fitxer.css” ?>

<?xml-stylesheet type=”text/css”

href=”fitxer.css” ?>

El document té definit un estil de presentació

Fitxer d'estil


CSS i XML● També es poden afegir més atributs

Atribut Descripció

Title El nom o el títol del full

Media

Indica sota quin medi es farà servir el CSS: screen, print, tty, aural, braille, handheld, tv, all

Se'n poden posar diversos alhora

Charset Indica el codi de caràcters que es fa servir

Alternate

Indica si el CSS que es fa servir és el preferit. Pot ser 'yes' o 'no'. Per defecte és 'no'

La idea és donar múltiples fulls CSS donant-ne un de preferit i deixar que els usuaris en triïn un altre


Selectors● A part d'especificar etiquetes disposem d'uns

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


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


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


Selectors● Selecciona del primer fill (etiqueta:first-child)

– Selecciona només el primer fill de l'etiqueta 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; }


Selectors● Selector de descendents (etiqueta descen)

– Selecciona les etiquetes 'descen' que siguin descendents d'etiqueta

– Pintarà el contingut de les etiquetes 'nom' de color vermell

<?xml version=”1.0” encoding=”UTF-8” ?><classe> <alumne> <nom>Pere<nom> </alumne></classe>

classe nom { color: #FF0000; }


Selectors● Selector de germans adjacents (+)

– Selecciona la etiqueta germana que estigui just darrere de l'etiqueta 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; }


Selectors● Selector per id (etiqueta#id)

– Selecciona qualsevol etiqueta que tingui l'identificador 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; }


Disseny● Quan es visualitza qualsevol cosa amb CSS és

tractada com si estes dins d'una caixa rectangular

● Cada caixa té quatre components

ContingutContingut

margin

padding

border


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


Disseny● Amb el 'border' tenim més possibilitats:

– border-style: pot ser none, solid, dashet, dotted, double, groove, ridge, inset, outset

– border-width: especifiquem l'amplada. 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 l'altre amplada,estil i color

nom { border-color:#000000; border-style:solid; }


Disseny● Cada caixa en pot contenir d'altres 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; }


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 l'altra i de dalt a baix

– Els marges verticals són els mateixos. Només es fa servir el més gran de tots dos


Posicionament● Podem canviar la posició “relativa” posant

valors a left, right, top o bottom

● 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 l'ordre en que apareixen els elements

alume { position:relative; top:6px; }


Posicionament● Posicionament flotant

– 'float' ens permet especificar una caixa flotant permetent que l'altre contingut vagi al voltant seuprofessor { float: left; width: 20%; margin: 5px;}


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'

alumne { clear: left;}

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 S'hereta el de la caixa contenidora


Posicionament● Posicionament absolut

– Posiciona exactament la caixa en un lloc determinat fent servir 'position:absolute'

– S'eliminen 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é l'amplada o l'alçada: width i height

professor { position:absolute; left:10px; top:6px; width: 100px;}


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


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 d'una taula

display:table-caption El caption


Taules<?xml version="1.0" encoding="UTF-8"?><classe> <alumnes>

<alumne> <nom>Pere</nom> <cognom>Punyetes</cognom>

</alumne> <alumne>

<nom>Filomenu</nom> <cognom>Garcia</cognom>

</alumne> <alumne>

<nom>Mariano</nom> <cognom>Pi</cognom>

</alumne> </alumnes></classe>

classe { display:block; }alumnes { display:table; border-style:solid; margin:10px; }alumne { display:table-row; background-color:blue; border-style:solid; }nom, cognom { display:table-cell; padding:10px; }nom { background-color:green; }cognom{background-color:red; }


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 d'XLink

● No ho veurem


Imatges● Afegir imatges en el document s'ha de fer a

través d'XLinks

● Però també es pot usar el background-image de CSS i mostrar una imatge

<link xlink:type=”simple” xlink:show=”embed” xlink:actuate=”onLoad” xlink:title=”Imatge” xlink:href=”imatge.jpg”></link>

logo { display:block; background-image:url(logo.png); background-repeat: no-repeat;}


Afegir contingut● Podem afegir contingut extra amb els “pseudo-

selectors”Descripció

:before Permet afegir contingut abans d'un element

:after Permet afegir contingut després d'un element

:first_letter Permet afegir estils especials a la primera llegra del selector

:first-linePermet aplicar estils especials a la primera línia de text d'un selector

professor:before { content:”Professor:”;}


Selectors d'Atributs● Selector d'atributs ( [atribut] )

– També podem seleccionar segons el contingut dels atributs

● Si existeix

● Si té un valor

● Si algun dels seus valors de llista és

alumne[delegat] { color:#FF0000; }

alumne[delegat=”true”] { color:#FF0000; }

alumne[assignatures]~=”XML” { color:#FF0000; }


Selector d'atributs● Podem combinar el selector d'atributs perquè

ens compari segons més d'un valor

● D'aquesta forma podem controlar més detalladament la presentació de les etiquetes que tenen atributs

– No hi ha cap problema per combinar diferents condicions

alumne[delegat][sexe=”home”] { color:#FF0000; }

alumne[delegat][sexe=”dona”] { color:#FFFF00; }


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) “)”;}


Propietats● CSS defineix moltes propietats i a cada versió

n'afegeix 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

http://www.w3.org/TR/CSS21/propidx.html


Unitats● En CSS podem fer servir molts tipus d'unitats.

Sempre en funció del que necessitem:

LongitudPixels (px), ems (em), percentatge (%), punts (pt), polzades (in), 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;


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

font-family

Permet especificar la font a fer servir i la seva família (serif, sans-serif, cursive, fantasy, monospace)

P { font-family: "New Century Schoolbook", Times, serif }

font-sizePodem marcar la mida del tipus de lletra que volem

A { font-size:12pt; }

font-weightDefinim el pes del tipus de lletra

B {font-weight:bold; }

font-variant Podem definir què es fa servir: normal o small-caps

font-style normal, italic, oblique


Propietats de color i de fons● D'entre 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 s'ha de repetir i com

background-position Defineix en quina posició s'ha de posar el fons

background-attachmentDefineix si el fons segueix amb l'scroll del navegador o no


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

text-transformModifica la forma com es mostra el text: majúscules, etc...

text-align Alineació del text: centrat, justificat, esquerra, ...

line-height Altura de la línia de text


Propietats de caixa● Les propietats de caixa defineixen com es

posicionarà la caixa:margin Espaiat entre paraules

padding Espai dins del

border-widthborder-colorboder-style

Defineixen les característiques de la línia que envolta la caixa

width / height Amplada i altura de la caixa

float Defineix la caixa com a flotant

clear Defineix si els elements permeten caixes flotants al seu costat

visibilityNormalment es fa servir perquè una caixa no es vegi amb 'hidden'. Conserva l'espai


Invisibilitat● Podem fer que una caixa sigui invisible amb la

propietat visibility=hidden; – Però encara ocuparà l'espai que li pertocava

● Si volem eliminar-la ho farem amb 'display:none'

<h1>Hola</h1><h2>Xavier</h2><h3>Sala</h3>

h2 { visibility:hidden;}

Hola

Sala

<h1>Hola</h1><h2>Xavier</h2><h3>Sala</h3>

h2 { display:none;}

HolaSala

css en xml

Education