Fondamenti di Informatica Sistemi di Elaborazione delle Informazioni Informatica Applicata 2.3 Cenni sui fogli di stile CSS per XML Antonella Poggi Anno Accademico 2012-2013 DIPARTIMENTO DI SCIENZE DOCUMENTARIE LINGUISTICO FILOLOGICHE E GEOGRAFICHE
Cosa sono i fogli di stile? Come abbiamo visto, né gli elementi XML né le dichiarazioni di un DTD dicono nulla sul modo in cui il contenuto di un documento XML debba essere presentato Principio fondamentale della marcatura con XML: separare forma e contenuto I fogli di stile è il meccanismo attraverso il quale si specifica come presentare (a schermo di un computer, di un tablet o su carta) il contenuto
CSS (Cascading Style Sheets) Standard (o meglio raccomadazione del W3C) nato come risposta al fatto che i browser avevano piano piano adottato estensioni proprietarie per HTML, per permettere agli autori di specificare come doveva essere formattato il contenuto dei documenti che scrivevano problemi di incompatibilità tra browser problemi comunicazione con i server dovuti alla pesantezza delle pagine arricchite con le informazioni per la formattazione incapacità per gli autori di controllare l effettiva presentazione dei loro contenuti... Diverse versioni: CSS1: prima versione nel 1996 CSS2: seconda versione nel 1998 (principale modifica: concetto di media type) CSS2.1: corregge, estende, taglia,... ce ne sono state altre ma noi le ignoreremo Antonella Poggi Pagina 3
Uso raccomandato dal W3C Il W3C raccomanda l uso di file CSS esterni Lo stesso file CSS può essere usato da più documenti Uno stesso documento XML può essere presentato secondo file CSS diversi a seconda per esempio dello strumento su cui deve essere presentato Sintassi raccomandata: attraverso un istruzione di processamento xml che associa al documento XML in cui occorre uno o più file CSS (esterni) che ne definiscono la presentazione Antonella Poggi Pagina 4
Istruzione di processamento per associare CSS a documenti XML Sintassi (semplificata) <?xml-stylesheet href=indirizzo_foglio?>! dove indirizzo_foglio è l indirizzo fisico del foglio di stile Ulteriori pseudo-attributi title che permette di assegnare un titolo al foglio usato! media che permette di indicare lo strumento per il quale si stanno definendo le regole di presentazione screen, print, tv, all! alternate che può assumere valori yes o no e, in caso di yes richiede sia specificato anche lo pseudo-attributo title; serve per esempio per assicurare l accesibilità dei contenuti; il client dovrebbe fornire all utente la possibilità di scegliere fogli di stile dichiarati come alternativi! Antonella Poggi Pagina 5
Associazione di un CSS (esempio) <?xml version= 1.0?>! <!DOCTYPE Mail SYSTEM Mail.dtd []>! <?xml-stylesheet href= Mail.css title= Normal?>! <?xml-stylesheet href= Mail-alt.css title= Alternative?>! <Mail>!!<From>!!!<Address> Dante@dsn.fi.it </Address>!!</From>!!<To>!!!<Address> Beatrice@pitti.fi.it </Address>!!!<Address> Virgilio@spqr.rm.it </Address>!!</To>!!<Subject> Appointment </Subject>!!<Body>!!Why don't we meet at disco.inferno at midnight.!!tell also Caronte. Cheers,!!- D.A.!!</Body>! </Mail> Antonella Poggi Pagina 6
Mail {! display: block;! margin-left: 1.5cm;! margin-top: 1.5cm;! font-size: 14pt;! font-family: sans-serif;! Address {! display:block;! From>Address:before {! content: "From:"; font-weight: bold;! }! To>Address:before {! content: "To:"; font-weight: bold;! }! Subject {! display: block; color: red;! Subject:before{! content:"subject:"; font-weight: bold;! Esempio di file CSS Body {! display:block; font-size: 18pt; margin-top: 1cm;! Antonella Poggi Pagina 7
Struttura di un file CSS Lista di regole che specificano come visualizzare i contenuti di tutti i nodi di un sottoalbero del file XML a cui è associato il foglio Sintassi di una regola selettore1[,selettore2,...] {!!attributo_stile1: valore1;!!attributo_stile2: valore2;!!...! la lista di selettori specifica gli elementi radice dei sottoalberi a cui la regola si applica la lista delle coppie attributo-stile: valore specifica il valore di una proprietà che definisce la formattazione! Una regola che si applica ad un sottoalbero interno ad un altro, integra ed, eventualmente, sovrascrive la regola che si applica al sottoalbero esterno (cascading) Antonella Poggi Pagina 8
REGOLA Struttura di un file CSS (esempio) Mail {! display: block;! SELETTORE margin-left: 1.5cm;! margin-top: 1.5cm;! font-size: 14pt;! font-family: sans-serif;! Address {! display:block;! From>Address:before {! content: "From:"; font-weight: bold;! }! To>Address:before {! content: "To:"; font-weight: bold;! }! Subject {! display: block; color: red;! Mail {!!display: block;!!margin-left: 1.5cm;!margin-top: 1.5cm;!!font-size: 14pt;!!font-family: sans-serif;! Subject:before{! content:"subject:"; ATTRIBUTO font-weight: bold;! VALORE Body {! display:block; font-size: 18pt; margin-top: 1cm;! Antonella Poggi Pagina 9
Formattazione (esempio) Antonella Poggi Pagina 10
Selettori Un selettore può essere il nome della radice o più in generale un cammino che permette di raggiungerla *: si applica ad un qualsiasi elemento E>F: si applica ad un elemento F figlio di un elemento E! E F: si applica ad un elemento F discendente di un elemento E! E[att]: si applica ad un elemento E che ha l attributo att valorizzato E[att= x ]: si applica ad un elemento E che ha l attributo att valorizzato E+F: si applica ad un elemento F immediatamente preceduto da un elemento fratello E Antonella Poggi Pagina 11
Mail {! display: block;! margin-left: 1.5cm;! margin-top: 1.5cm;! font-size: 14pt;! font-family: sans-serif;! Address {! display:block;! From>Address:before {! content: "From:"; font-weight: bold;! }! To>Address:before {! content: "To:"; font-weight: bold;! }! Subject {! display: block; color: red;! Subject:before{! content:"subject:"; font-weight: bold;! Selettori (esempio) Body {! display:block; font-size: 18pt; margin-top: 1cm;! Antonella Poggi Pagina 12
Attributo di stile display! Particolarmente importante perché permette di definire quello che non deve essere visualizzato: valore none! quello che deve essere visualizzato come un paragrafo : block! quello che deve essere visualizzato in linea con il contenuto che lo precede e lo segue: inline! un indirizzo email potrebbe richiedere una formattazione particolare ma non per questo ogni indirizzo che occorre nel testo deve essere presentato come un paragrafo! quello che deve essere presentato come un elemento di una lista... Antonella Poggi Pagina 13
Esempi di attributi di stile per il testo font-family serif / sans serif / cursive. font-size punti (pt) / pixel (px) / centimetri (cm) / pollici (in) / percentuale (%) font-style normal / italic / oblique font-variant normal / small-caps font-weight extra-light / demi-light / light / medium /bold/ demi-bold / extra-bold text-decoration none / underline / italic / line-height color red / yellow / blue/... Antonella Poggi Pagina 14
Disposizione dei contenuti Il contenuto di un elemento viene visualizzato come se fosse all interno di un box Attraverso una serie di attributi si specificano le proprietà del contenuto rispetto a quello che viene chiamato box model Antonella Poggi Pagina 15
Il Box model Antonella Poggi Pagina 16
Esempi di attributi di stile per la disposizione del testo width, height, margin, margin-left, margin-right, margin-top, margin-bottom, border-width, borderbottom-width, padding-width,... punti (pt) / pixel (px) / centimetri (cm) / pollici (in) / percentuale (%)/... border-style, border-bottom-style,... dotted /double/hidden/... border-color... Antonella Poggi Pagina 17
Aggiungere testo nella visualizzazione L attributo di stile content permette di specificare del testo che precede o segue il contenuto dell elemento richiede l uso degli pseudo-attributi before e after indicano dove va aggiunto il contenuto Antonella Poggi Pagina 18
Mail {! display: block;! margin-left: 1.5cm;! margin-top: 1.5cm;! font-size: 14pt;! font-family: sans-serif;! Address {! display:block;! Aggiungere testo (esempio) From>Address:before {! content: "From:"; font-weight: bold;! }! To>Address:before {! content: "To:"; font-weight: bold;! }! Subject {! display: block; color: red;! Subject:before{! content:"subject:"; font-weight: bold;! Body {! display:block; font-size: 18pt; margin-top: 1cm;! Antonella Poggi Pagina 19