1 / 21

Fogli di stile

Fogli di stile. CSS. Allegare un CSS a un documento XML. <?xml version="1.0"?> <?xml-stylesheet type="text/css" href="prova.css"?> <!DOCTYPE TEI.2 PUBLIC "-//TEI//DTD TEI Lite XML ver. 1//EN" "c:/TEI-EMACS/xml/dtds/tei/teixlite.dtd" []>. Fogli di stile CSS.

shae
Download Presentation

Fogli di stile

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Fogli di stile CSS

  2. Allegare un CSS a un documento XML <?xml version="1.0"?> <?xml-stylesheet type="text/css" href="prova.css"?> <!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 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 <?xml version="1.0" encoding="iso-8859-1"?> <?xml-stylesheet type="text/css" href="CSS1.css"?> vedi antologia_css.xml <antologia> <poesia><titolo>I</titolo> <stanza> <verso rima="A">Voi ch'ascoltate in rime sparse il suono</verso> <verso rima="B">di quei sospiri ond'io nudriva 'l core</verso> <verso rima="B">in sul mio primo giovenile errore</verso> <verso rima="A">quand'era in parte altr'uom da quel ch'i' sono,</verso> </stanza> <stanza> <verso rima="B">del vario stile in ch'io piango et ragiono</verso> <verso rima="A">fra le vane speranze e 'l van dolore</verso> <verso rima="A">ove sia chi per prova intenda amore</verso> <verso rima="B">spero trovar pietà, nonché perdono.</verso> </stanza> <!-- altre stanze --> </poesia> </antologia>

  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: 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 <?xml version="1.0" encoding="iso-8859-1"?> <?xml-stylesheet type="text/css" href="antologia.css"?> <antologia> <poesia><titolo class="big">I</titolo> <stanza> <verso class="big">Voi ch'ascoltate in rime sparse il suono</verso> <verso>di quei sospiri ond'io nudriva 'l core</verso> <verso>in sul mio primo giovenile errore</verso> <verso>quand'era in parte altr'uom da quel ch'i' sono,</verso> </stanza> <stanza> <verso>del vario stile in ch'io piango et ragiono</verso> <verso>fra le vane speranze e 'l van dolore</verso> <verso>ove sia chi per prova intenda amore</verso> <verso>spero trovar pietà, nonché perdono.</verso> </stanza> <!-- altre stanze --> </poesia> </antologia>

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

  12. e. Attributi di tipo ID  nomeElemento#valoreID{} Es: 1. Nel documento: <verso id=“primo">Voi ch'ascoltate in rime sparse il suono</verso> 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; 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 <xsl:template match="titolo"> <p style=“text-align: center”><xsl:apply-templates /></p> </xsl:template>

  18. Es. 2a <?xml version="1.0"?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <xsl:output method="html" indent="yes" /> <xsl:template match="/"> <html> <head> <STYLE TYPE="text/css"> <xsl:comment> body{font-family: Verdana, Helvetica; Sans-Serif; font-size: 10pt;} h3{display: block; margin-top: 50px;} </xsl:comment> </STYLE> </head> <body> <xsl:apply-templates /> </body> </html> </xsl:template> </xsl:stylesheet>

  19. Es. 2b <?xml version="1.0"?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <xsl:output method="html" indent="yes" /> <xsl:template match="/"> <html> <head> <link rel="stylesheet" type="text/css" href="antologia.css" /> </head> <body> <xsl:apply-templates /> </body> </html> </xsl:template> </xsl:stylesheet> Vedi antologia_css_xsl.xml

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

  21. Esempio • XSL: <xsl:template match="titolo"> XML <h1><xsl:apply-templates /></h1>  HTML </xsl:template> • CSS: h1 { background-color: #D2D2D2; }

More Related