Fogli di stile CSS
Allegare un CSS a un documento XML <!DOCTYPE TEI.2 PUBLIC "-//TEI//DTD TEI Lite XML ver. 1//EN" "c:/TEI- EMACS/xml/dtds/tei/teixlite.dtd" []>
Fogli di stile CSS Sono composti da una successione di regole Una regola è composta da un selettore e da una specifica Es: selettore{specifica}
Dichiarazione di selettori a. elementi Nome elemento poesia{} titolo{} stanza{} verso{}
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; }
Il documento XML vedi antologia_css.xmlantologia_css.xml I Voi ch'ascoltate in rime sparse il suono di quei sospiri ond'io nudriva 'l core in sul mio primo giovenile errore quand'era in parte altr'uom da quel ch'i' sono, del vario stile in ch'io piango et ragiono fra le vane speranze e 'l van dolore ove sia chi per prova intenda amore spero trovar pietà, nonché perdono.
b. Molti elementi nomeElemento1, nomeElemento2 {} stanza, verso{ display: block; margin-left: 12px; margin-bottom: 10px; }
c. Pseudo elementi nomeElemento:pseudoelemento{} Pseudo elementi: first-letter first-line ES antologia_css2.xml:antologia_css2.xml verso{ display: block; } verso:first-letter { font-size: large; }
d. Classi di elementi .classe{} Fa riferimento a un attributo class del documento XML
Documento XML I Voi ch'ascoltate in rime sparse il suono di quei sospiri ond'io nudriva 'l core in sul mio primo giovenile errore quand'era in parte altr'uom da quel ch'i' sono, del vario stile in ch'io piango et ragiono fra le vane speranze e 'l van dolore ove sia chi per prova intenda amore spero trovar pietà, nonché perdono.
CSS 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; }.big { font-size: large; font-weight: bold; } Vedi antologia_css3.xmlantologia_css3.xml
e. Attributi di tipo ID nomeElemento#valoreID{} Es: 1. Nel documento: Voi ch'ascoltate in rime sparse il suono 2. Nel CSS verso#primo {display: block; color: red; font-weight: bold; }
f. Dichiarazioni contestuali nomeElementoPadre nomeElementoFiglio{} Es: stanza verso{ color: green; display: block; } attenzione! Effetto Cascata!!
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; }
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 }
CSS e XSL È possibile includere un foglio di stile CSS in un foglio di stile XSL in due modi: 1. Inline style Attributo style 2. Allegando un foglio di stile CSS 1. Embedded 2. Allegando il file esterno
Es. 1
Es. 2a <xsl:stylesheet xmlns:xsl=" version="1.0"> body{font-family: Verdana, Helvetica; Sans-Serif; font-size: 10pt;} h3{display: block; margin-top: 50px;}
Es. 2b <xsl:stylesheet xmlns:xsl=" version="1.0"> Vedi antologia_css_xsl.xmlantologia_css_xsl.xml
ATTENZIONE! Il CSS allegato all’HTML virtuale tramite un XSL gestisce la visualizzazione dei nodi dell’output
Esempio XSL: XML HTML CSS: h1 { background-color: #D2D2D2; }