Post on 08-Jul-2015
description
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..
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
Administració de Sistemes Informàtics i Xarxes
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
Administració de Sistemes Informàtics i Xarxes
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)
Administració de Sistemes Informàtics i Xarxes
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
Administració de Sistemes Informàtics i Xarxes
CSS● Definim de quina forma es representaran les
diferents etiquetes:
h1 { font-family: arial; }
Selector
propietat
Valor
Administració de Sistemes Informàtics i Xarxes
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; }
Administració de Sistemes Informàtics i Xarxes
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; }
Administració de Sistemes Informàtics i Xarxes
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; }
Administració de Sistemes Informàtics i Xarxes
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
Administració de Sistemes Informàtics i Xarxes
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
Administració de Sistemes Informàtics i Xarxes
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; }
Administració de Sistemes Informàtics i Xarxes
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
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
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; }
Administració de Sistemes Informàtics i Xarxes
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; }
Administració de Sistemes Informàtics i Xarxes
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; }
Administració de Sistemes Informàtics i Xarxes
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; }
Administració de Sistemes Informàtics i Xarxes
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
Administració de Sistemes Informàtics i Xarxes
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
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; }
Administració de Sistemes Informàtics i Xarxes
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; }
Administració de Sistemes Informàtics i Xarxes
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
Administració de Sistemes Informàtics i Xarxes
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; }
Administració de Sistemes Informàtics i Xarxes
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;}
Administració de Sistemes Informàtics i Xarxes
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
Administració de Sistemes Informàtics i Xarxes
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;}
Administració de Sistemes Informàtics i Xarxes
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
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
Administració de Sistemes Informàtics i Xarxes
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; }
Administració de Sistemes Informàtics i Xarxes
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
Administració de Sistemes Informàtics i Xarxes
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;}
Administració de Sistemes Informàtics i Xarxes
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:”;}
Administració de Sistemes Informàtics i Xarxes
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; }
Administració de Sistemes Informàtics i Xarxes
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; }
Administració de Sistemes Informàtics i Xarxes
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
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
Administració de Sistemes Informàtics i Xarxes
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;
Administració de Sistemes Informàtics i Xarxes
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
Administració de Sistemes Informàtics i Xarxes
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
Administració de Sistemes Informàtics i Xarxes
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
Administració de Sistemes Informàtics i Xarxes
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
Administració de Sistemes Informàtics i Xarxes
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