Fogli di stile

1
Fogli di stile

• CSS

2
Allegare un CSS a un documento XML

• lt?xml version"1.0"?gt
• lt?xml-stylesheet type"text/css"
  href"prova.css"?gt
• lt!DOCTYPE TEI.2 PUBLIC "-//TEI//DTD TEI Lite XML
  ver. 1//EN"
• "c/TEI-EMACS/xml/dtds/tei/teixlite.dtd" gt

3
Fogli di stile CSS

• Sono composti da una successione di regole
• Una regola è composta da un selettore e da una
  specifica
• Es
• selettorespecifica

4
Dichiarazione di selettoria. elementi

• ? Nome elemento
• poesia
• titolo
• stanza
• verso

5
Un esempio

• poesia
• background-color transparent
• titolo
• display block
• font-weight bold
• text-align center
• font-size large
• stanza
• display block
• margin-left 12px
• margin-bottom 10px
• verso
• display block

6
Il documento XML

• lt?xml version"1.0" encoding"iso-8859-1"?gt
• lt?xml-stylesheet type"text/css"
  href"CSS1.css"?gt vedi antologia_css.xml
• ltantologiagt
• ltpoesiagtlttitologtIlt/titologt
• ltstanzagt
• ltverso rima"A"gtVoi ch'ascoltate in rime sparse
  il suonolt/versogt
• ltverso rima"B"gtdi quei sospiri ond'io nudriva
  'l corelt/versogt
• ltverso rima"B"gtin sul mio primo giovenile
  errorelt/versogt
• ltverso rima"A"gtquand'era in parte altr'uom da
  quel ch'i' sono,lt/versogt
• lt/stanzagt
• ltstanzagt
• ltverso rima"B"gtdel vario stile in ch'io
  piango et ragionolt/versogt
• ltverso rima"A"gtfra le vane speranze e 'l
  van dolorelt/versogt
• ltverso rima"A"gtove sia chi per prova
  intenda amorelt/versogt
• ltverso rima"B"gtspero trovar pietà, nonché
  perdono.lt/versogt
• lt/stanzagt
• lt!-- altre stanze --gt
• lt/poesiagt

7
b. Molti elementi

• ? nomeElemento1, nomeElemento2
• stanza, verso
• display block
• margin-left 12px
• margin-bottom 10px

8
c. Pseudo elementi

• ? nomeElementopseudoelemento
• Pseudo elementi
• first-letter
• first-line
• ES antologia_css2.xml
• verso
• display block
• versofirst-letter
• font-size large

9
d. Classi di elementi

• ? .classe
• Fa riferimento a un attributo class del documento
  XML

10
Documento XML

• lt?xml version"1.0" encoding"iso-8859-1"?gt
• lt?xml-stylesheet type"text/css"
  href"antologia.css"?gt
• ltantologiagt
• ltpoesiagtlttitolo class"big"gtIlt/titologt
• ltstanzagt
• ltverso class"big"gtVoi ch'ascoltate in rime
  sparse il suonolt/versogt
• ltversogtdi quei sospiri ond'io nudriva 'l
  corelt/versogt
• ltversogtin sul mio primo giovenile errorelt/versogt
• ltversogtquand'era in parte altr'uom da quel ch'i'
  sono,lt/versogt
• lt/stanzagt
• ltstanzagt
• ltversogtdel vario stile in ch'io piango et
  ragionolt/versogt
• ltversogtfra le vane speranze e 'l van
  dolorelt/versogt
• ltversogtove sia chi per prova intenda
  amorelt/versogt
• ltversogtspero trovar pietà, nonché
  perdono.lt/versogt
• lt/stanzagt
• lt!-- altre stanze --gt
• lt/poesiagt
• lt/antologiagt

11
CSS

• poesia
• background-color transparent
• titolodisplay block
• font-weight bold
• text-align center
• font-size large
• stanza
• display block
• margin-left 12px
• margin-bottom 10px
• verso
• display block
• .big
• font-size large
• font-weight bold

12
e. Attributi di tipo ID

• ? nomeElementovaloreID
• Es
• 1. Nel documento
• ltverso idprimo"gtVoi ch'ascoltate in rime
  sparse il suonolt/versogt
• 2. Nel CSS
• versoprimo display block
• color red
• font-weight bold

13
f. Dichiarazioni contestuali

• ? nomeElementoPadre nomeElementoFiglio
• Es
• stanza verso
• color green
• display block
• ? attenzione! Effetto Cascata!!

14
Specifiche

• Una specifica è composta di una proprietà di
  stile e di un valore, separati da un due punti
• Se le proprietà sono più di una, devono essere
  separate da un punto e virgola
• Es
• selettore
• proprietà valore
• proprietà valore
• proprietà valore

15
Un esempio

• poesia
• background-color transparent ? proprietà di
  sfondo
• titolo
• display block ? proprietà di posizionamento e
  di blocco
• font-weight bold ? proprietà di carattere
• text-align center ? proprietà di testo
• font-size large ? proprietà di carattere
• stanza
• display block ? proprietà di posizionamento e
  di blocco
• margin-left 12px ? proprietà di riquadro
• margin-bottom 10px ? proprietà di riquadro
• verso
• display block ? proprietà di posizionamento e
  di blocco

16
CSS e XSL

• È possibile includere un foglio di stile CSS in
  un foglio di stile XSL in due modi
• Inline style
• Attributo style
• Allegando un foglio di stile CSS
• Embedded
• Allegando il file esterno

17
Es. 1

• ltxsltemplate match"titolo"gt
• ltp styletext-align centergtltxslapply-templates
  /gtlt/pgt
• lt/xsltemplategt

18
Es. 2a

• lt?xml version"1.0"?gt
• ltxslstylesheet xmlnsxsl"http//www.w3.org/1999/
  XSL/Transform"
• version"1.0"gt
• ltxsloutput method"html" indent"yes" /gt
• ltxsltemplate match"/"gt
• lthtmlgt
• ltheadgt
• ltSTYLE TYPE"text/css"gt
• ltxslcommentgt
• bodyfont-family Verdana, Helvetica Sans-Serif
  
• font-size 10pt
• h3display block
• margin-top 50px
• lt/xslcommentgt
• lt/STYLEgt
• lt/headgt
• ltbodygt
• ltxslapply-templates /gt

19
Es. 2b

• lt?xml version"1.0"?gt
• ltxslstylesheet xmlnsxsl"http//www.w3.org/1999/
  XSL/Transform"
• version"1.0"gt
• ltxsloutput method"html" indent"yes" /gt
• ltxsltemplate match"/"gt
• lthtmlgt
• ltheadgt
• ltlink rel"stylesheet" type"text/css"
  href"antologia.css" /gt
• lt/headgt
• ltbodygt
• ltxslapply-templates /gt
• lt/bodygt
• lt/htmlgt
• lt/xsltemplategt
• lt/xslstylesheetgt
• Vedi antologia_css_xsl.xml

20
ATTENZIONE!

• Il CSS allegato allHTML virtuale tramite un XSL
  gestisce la visualizzazione dei nodi delloutput

21
Esempio

• XSL
• ltxsltemplate match"titolo"gt? XML
• lth1gtltxslapply-templates /gtlt/h1gt ? HTML
• lt/xsltemplategt
• CSS
• h1
• background-color D2D2D2