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"

Presentazione sul tema: "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""— Transcript della presentazione:

1 Fogli di stile CSS

2 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" []>

3 Fogli di stile CSS  Sono composti da una successione di regole  Una regola è composta da un selettore e da una specifica  Es: selettore{specifica}

4 Dichiarazione di selettori a. 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 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.

7 b. Molti elementi  nomeElemento1, nomeElemento2 {} stanza, verso{ display: block; margin-left: 12px; margin-bottom: 10px; }

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

9 d. Classi di elementi .classe{} Fa riferimento a un attributo class del documento XML

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

11 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

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

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

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: 1. Inline style Attributo style 2. Allegando un foglio di stile CSS 1. Embedded 2. Allegando il file esterno

17 Es. 1

18 Es. 2a <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> body{font-family: Verdana, Helvetica; Sans-Serif; font-size: 10pt;} h3{display: block; margin-top: 50px;}

19 Es. 2b <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> Vedi antologia_css_xsl.xmlantologia_css_xsl.xml

20 ATTENZIONE!  Il CSS allegato all’HTML virtuale tramite un XSL gestisce la visualizzazione dei nodi dell’output

21 Esempio  XSL:  XML  HTML  CSS: h1 { background-color: #D2D2D2; }