Css en XML

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

UF 1: Programació amb XML
Part 4

CSS

Xavier Sala Pujolar
IES Cendrassos

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

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


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

propietat

Selector
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

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

Herència
● La “C” de CSS vol dir “Cascading” i vol dir que
les propietats es poden heretar pels elements
fills
font-weight:bold;
color:#FF0000;
background-color:#00FF00; }

h2 { font-style: italic; }

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

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 d'una etiqueta h1
● Si repetim una etiqueta en el mateix nivell i
algun valor es repeteix el darrer és el vàlid
font-weight:bold; }
h2 { font-style: italic; }


CSS i XML
● Per aplicar stylesheets a un document XML
l'hem 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 d'estil


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


Selectors
● A part d'especificar etiquetes disposem d'uns
selectors predefinits:
● Selector universal (*)
– Selecciona totes les etiquetes del document
<classe>
<alumne>
<nom>Pere<nom>
</alumne>
</classe>

* { color: #FF0000; }


Selectors
● Selector de tipus (etiqueta,etiqueta)
– Selecciona les etiquetes del document
especificades
<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'
<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
<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
<classe>
<alumne>
<nom>Pere<nom>
</alumne>
</classe>

classe nom { color: #FF0000; }

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


Selectors
● Selector de germans adjacents (+)
– Selecciona la etiqueta germana que estigui just
darrere de l'etiqueta especificada
<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
<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
margin
border

Contingut
padding


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

Posicionament
● Posicionament flotant
– 'float' ens permet especificar una caixa flotant
permetent que l'altre contingut vagi al voltant
seu
professor {
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'
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

alumne {
clear: left;
}


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


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

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

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

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


Selectors d'Atributs
● Selector d'atributs ( [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; }


Selector d'atributs
● Podem combinar el selector d'atributs perquè
ens compari segons més d'un valor
alumne[delegat][sexe=”home”] {
color:#FF0000; }

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

● 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


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


Unitats
● En CSS podem fer servir molts tipus d'unitats.
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;


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


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

Defineix si el fons segueix amb l'scroll del
background-attachment
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

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


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 l'espai


Invisibilitat
● Podem fer que una caixa sigui invisible amb la
propietat visibility=hidden;
– Però encara ocuparà l'espai 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> }


Css en XML

Recommended

Recommended

More Related Content

Similar to Css en XML

Similar to Css en XML (20)

More from Xavier Sala Pujolar

More from Xavier Sala Pujolar (17)

Recently uploaded

Recently uploaded (9)

Css en XML