Tecnologie di Sviluppo per il Web Cascading Style Sheets (CSS): Dettagli e Approfondimenti versione 2.0 Questo lavoro è concesso in uso secondo i termini di una licenza Creative Commons (vedi ultima pagina) G. Mecca – [email protected] – Università della Basilicata CSS >> Sommario Dettagli e Approfondimenti Sintassi Commenti Raggruppamenti Selettori Errori Tipi di dato Colori Lunghezze Tipi di Dispositivo G. Mecca - Tecnologie di Sviluppo per il Web Semantica !important Cascata Il Modulo style Utilizzo degli Standard Appendice Elenco delle Proprietà di CSS Livello 1 2 CSS >> Dettagli e Approfondimenti >> Idea Generale Idea Generale CSS (“Cascading Style Sheets”) tecnologia per associare caratteristiche di presentazione ad un documento HTML/XML In particolare consente di specificare le caratteristiche dei riquadri associati agli elementi del docum. Sintatticamente insieme di regole: selettore, dichiarazioni dichiarazione: proprietà e valore G. Mecca - Tecnologie di Sviluppo per il Web 3 CSS >> Dettagli e Approfondimenti >> Idea Generale Idea Generale h2 selettore { color: maroon; font-size: 14pt; proprietà valore regola } dichiarazione img { border: none; } G. Mecca - Tecnologie di Sviluppo per il Web 4 CSS >> Dettagli e Approfondimenti >> Idea Generale Idea Generale Modello dei riquadri ad ogni elemento è associato un riquadro elementi a livello di blocco ed elementi in linea Struttura del riquadro contenuto riempimento bordo margine G. Mecca - Tecnologie di Sviluppo per il Web 5 CSS >> Dettagli e Approfondimenti >> Idea Generale Modello dei Riquadri (“Box Model”) margine (margin) bordo (border) top top left left left right right contenuto right riempimento (padding) top bottom bottom bottom G. Mecca - Tecnologie di Sviluppo per il Web 6 CSS >> Dettagli e Approfondimenti >> Sintassi Sintassi Foglio di stile regole commenti regole chiocciola Commenti /* questo è un commento Regole */ chiocciola @import, @media (>>) G. Mecca - Tecnologie di Sviluppo per il Web 7 CSS >> Dettagli e Approfondimenti >> Sintassi Sintassi Regole <selettore> {<lista dichiarazioni>} Dichiarazione <proprietà>: <valore>; es: div {color: white; font-size: 12pt;} Raggruppamenti sintassi compatta per più regole div, p {color: white; font-size: 12pt;} G. Mecca - Tecnologie di Sviluppo per il Web 8 CSS >> Dettagli e Approfondimenti >> Sintassi Sintassi Selettori semplici <nome elemento> es: div <nome elemento>#<id> es: div#footer <nome elemento>.<classe> es: div.blocco * tutti gli elementi Altri selettori pseudo-classi selettori contestuali G. Mecca - Tecnologie di Sviluppo per il Web 9 CSS >> Dettagli e Approfondimenti >> Sintassi Sintassi >> sito Sviluppo Web Pseudoclassi classificano dinamicamente gli elementi in base alle azioni dell’utente sull’interfaccia link, visited: collegamenti non visitati, visitati hover: collegamenti sorvolati dal mouse active, focus Sintassi <nome>:<pseudo classe> es: a:hover {color: red;} G. Mecca - Tecnologie di Sviluppo per il Web 10 CSS >> Dettagli e Approfondimenti >> Sintassi Sintassi Selettori contestuali selezionano un elemento anche sulla base della sua posizione nell’InfoSet E’ costituito di due parti un selettore ordinario (nome, id, classe,...) un “contesto” che definisce la posizione nell’InfoSet Contesto lista di selettori semplici G. Mecca - Tecnologie di Sviluppo per il Web 11 CSS >> Dettagli e Approfondimenti >> Sintassi Sintassi Selettore constestuale <contesto> <selettore semplice> Esempi div p.indirizzo a:hover{color: red;} div.footer img {border: none;} Attenzione differenza con i raggruppamenti in questo caso non c’è la virgola G. Mecca - Tecnologie di Sviluppo per il Web 12 CSS >> Dettagli e Approfondimenti >> Sintassi Sintassi Semantica del selettore contestuale corrisponde ai riquadri degli elementi con le seguenti caratteristiche: l’elemento corrisponde al selettore finale nell’InfoSet c’è un antenato per ciascuno dei selettori del contesto (riquadri che contengono il riquadro dell’elemento) Esempio div p.indirizzo a:hover{color: red;} nell’InfoSet: div, p.indirizzo, a G. Mecca - Tecnologie di Sviluppo per il Web 13 CSS >> Dettagli e Approfondimenti >> Sintassi Sintassi Esempi di Selettori em {color: red;} p em {color: red;} p, em {color: red}; div.blocco em {color: red;} a#email {color: red;} div.blocco a#email {color: red;} div.blocco a:hover {color: blue;} div.blocco a#email:hover {color: blue;} div span a#email:hover {color: blue;} G. Mecca - Tecnologie di Sviluppo per il Web 14 CSS >> Dettagli e Approfondimenti >> Sintassi Errori Sintattici Comportamento del browser su errori filosofia: ignorare le parti ignote dichiarazioni con proprietà o valori non legali regole chiocciola sconosciute regole con errori sintattici (es: ; mancante) Attenzione questo a volte causa disorientamento Nota non esiste modo di distinguere un foglio di stile CSS1 da uno CSS2 G. Mecca - Tecnologie di Sviluppo per il Web 15 CSS >> Dettagli e Approfondimenti >> Tipi di Dato Tipi di Dato Lunghezze assolute relative Lunghezze principali relative: em (dimensione pari alla dimensione del font nel riquadro; eccezione: font-size) assolute: pt (punti) Moltissime altre lunghezze meno importanti G. Mecca - Tecnologie di Sviluppo per il Web 16 CSS >> Dettagli e Approfondimenti >> Tipi di Dato Tipi di Dato Lunghezze assolute pt in, cm, mm pc (1 pica = 12 pt) parole chiave: xx-small, x-small, small, medium, large, x-large, xx-large; ogni browser ha una dimensione assegnata a ciascuna parola chiave es: body { font-size: x-small; } G. Mecca - Tecnologie di Sviluppo per il Web 17 CSS >> Dettagli e Approfondimenti >> Tipi di Dato Tipi di Dato Lunghezze relative em, px, ex ex (lungh. pari alla dimensione della lettera “x” nel font dell’elemento; eccez.: font-size) Percentuali riferimenti variabili al variare della proprietà Parole chiave larger, smaller es: strong { font-size: larger; } G. Mecca - Tecnologie di Sviluppo per il Web 18 CSS >> Dettagli e Approfondimenti >> Tipi di Dato Tipi di Dato Colori colori RGB colori standard di HTML Colori RGB #<rr><gg><bb> es: #FFA012 <rr>: codifica esadecimale del livello di rosso <gg>: codifica esadec. del livello di verde <bb>: codifica esadecimale del livello di blu G. Mecca - Tecnologie di Sviluppo per il Web 19 CSS >> Dettagli e Approfondimenti >> Tipi di Dato Tipi di Dato Colori standard di HTML G. Mecca - Tecnologie di Sviluppo per il Web 20 CSS >> Dettagli e Approfondimenti >> Tipi di Dato Tipi di Dato URI sintassi particolare: url(“<uri reference>”) esempio: @import url(“stili/altro.css”) esempio: body {background-image: url(“icons/sfondo.gif”) le virgolette sono opzionali (comportamento variabile dei browser) G. Mecca - Tecnologie di Sviluppo per il Web 21 CSS >> Dettagli a Approfondimenti >> Tipi di Media Tipi di Dispositivo (“Media Types”) CSS2 introduce il concetto di “media” è possibile specificare il dispositivo di riferimento per un gruppo di regole il browser applica o meno le regole sulla base del tipo di dispositivo usato in quel momento Tipi di Media screen, handheld, tty, tv print, projection braille, embossed, aural all G. Mecca - Tecnologie di Sviluppo per il Web 22 CSS >> Dettagli e Approfondimenti >> Tipi di Media Tipi di Dispositivo (“Media Types”) Specifica del tipo di dispositivo attributo “media” dell’elemento link <link rel=“stylesheet” type=“text/css” href=“primo.css” media=“screen” /> <link rel=“stylesheet” type=“text/css” href=“secondo.css” media=“all” /> Regole “chiocciola” (“at-rules”) @import @media G. Mecca - Tecnologie di Sviluppo per il Web 23 CSS >> Dettagli e Approfondimenti >> Tipi di Media Tipi di Dispositivo (“Media Types”) @import include le regole di un foglio in un altro es: in “secondo.css” @import url(“primo.css”); deve essere la prima dichiarazione del foglio è possibile specificare il tipo di media es: @import url(“primo.css”) handheld; @media specifica il dispos. per cui vale un blocco di regole es: @media print { body {font-size: 10pt;}... } G. Mecca - Tecnologie di Sviluppo per il Web 24 CSS >> Dettagli e Approfondimenti >> Semantica Semantica In generale vari fogli di stile per un documento (standard, autore, utente) vari valori per una proprietà dell’elemento Semantica due meccanismi fondamentali ereditarietà dei valori delle proprietà dagli antenati nell’infoset cascata (ordine di applicazione dei valori) G. Mecca - Tecnologie di Sviluppo per il Web 25 CSS >> Dettagli e Approfondimenti >> Semantica Semantica Qualificatore di priorità delle dichiarazioni !important es: p { font-size: 1.5em !important } Altera la priorità nella cascata dichiarazioni importanti prima delle normali dichiarazioni importanti dell’utente prima delle dichiarazioni dell’autore (importanti e non – CSS2) G. Mecca - Tecnologie di Sviluppo per il Web 26 CSS >> Dettagli e Approfondimenti >> Semantica Semantica Algoritmo scelta del valore per una proprietà di un riquadro I passo trova tutti i valori possibili per la proprietà tutte le dichiarazioni per la proprietà in questione che si applicano al riquadro per il dispositivo utilizzato II passo ordina rispetto all’origine utente importanti, autore importanti, autore, utente, standard G. Mecca - Tecnologie di Sviluppo per il Web 27 CSS >> Dettagli e Approfondimenti >> Semantica Semantica III passo ordina rispetto alla specificità prima selettori più specifici, poi meno specifici (id prima di classe prima di nome...) regola numerica complessa IV passo ordina per ordine di comparizione nello stile prevalgono le dichiarazioni che compaiono per ultime G. Mecca - Tecnologie di Sviluppo per il Web 28 CSS >> Dettagli e Approfondimenti >> Il Modulo style Il Modulo style di XHTML Nota in XHTML Basic il foglio di stile è esterno al documento XHTML viene collegato con l’elemento link In XHTML 1.0 Strict è possibile immergere parte delle regole CSS direttamente nel documento XHTML modulo style e relativo attributo G. Mecca - Tecnologie di Sviluppo per il Web 29 CSS >> Dettagli e Approfondimenti >> Il Modulo style Il Modulo style di XHTML Attenzione stiamo uscendo al di fuori di XHTML Basic per usare queste funzionalità è necessario cambiare il DTD (XTHML 1.0 Strict) Inoltre metodologicamente è sconsigliabile mischiare nello stesso documento codice HTML e codice CSS ne parliamo solo per completezza G. Mecca - Tecnologie di Sviluppo per il Web 30 CSS >> Dettagli e Approfondimenti >> Il Modulo style Il Modulo style di XHTML Modulo style un unico elemento: style serve a specificare una serie di regole CSS si aggiunge al modello di contenuto di head nota: le regole sono interne al documento e non riutilizzabili in altri documenti elemento attributo style type, media, title #PCDATA … G. Mecca - Tecnologie di Sviluppo per il Web modello di contenuto 31 CSS >> Dettagli e Approfondimenti >> Il Modulo style Esempio <html xmlns=“http://www.w3.org/1999/xhtml”> <head> <title>Pagina di Esempio</title> <style type=“text/css” title=“stile interno”> h1 { color: blue; font-family: Arial; } img { border-style: none; } </style> </head> ... G. Mecca - Tecnologie di Sviluppo per il Web 32 CSS >> Dettagli e Approfondimenti >> Il Modulo style Il Modulo di Attributo di Stile Una ulteriore possibilità XHTML 1.0 contiene un ulteriore modulo Attributo style attributo che si aggiunge a tutti gli elementi del corpo (body ed elementi di flusso) consente di specificare ulteriori regole CSS specifiche per l’elemento Esempio <h1 style=“color:blue; font-family:Arial”>Titolo</h1> >> esempioRiquadri.html G. Mecca - Tecnologie di Sviluppo per il Web 33 CSS >> Dettagli e Approfondimenti >> Utilizzo degli Standard Utilizzo degli Standard Per trovare una proprietà di interesse per prima cosa verificare il documento contenente lo standard di CSS livello 1 si tratta di un elenco di proprietà, dei possibili valori, e dei riquadri a cui si applicano Se non è prevista da CSS 1 consultare lo standard relativo a CSS 2 molte più proprietà, ma meno supportato G. Mecca - Tecnologie di Sviluppo per il Web 34 CSS >> Dettagli e Approfondimenti >> Utilizzo degli Standard Utilizzo degli Standard Attenzione >> esempioCSS-finale.html >> esempioCSS-treColonne.html è una tecnologia molto potente si riescono ad ottenere ottimi effetti grafici Esempi ombreggiature ed effetti di “spessore” sostituzione completa delle tabelle attenzione all compatibilità con i vecchi browser Siti con esempi di stili in linea es: http://www.glish.com/css/ G. Mecca - Tecnologie di Sviluppo per il Web 35 CSS >> Sommario Riassumendo Sintassi Commenti Raggruppamenti Selettori Errori Tipi di dato Colori Lunghezze Tipi di Dispositivo G. Mecca - Tecnologie di Sviluppo per il Web Semantica !important Cascata Il Modulo style Utilizzo degli Standard Appendice Elenco delle Proprietà di CSS Livello 1 36 CSS >> Dettagli e Approfondimenti >> Appendice Elenco delle Proprietà di CSS Livello 1 Font 'font-family' 'font-style' 'font-variant' 'font-weight' 'font-size' 'font' G. Mecca - Tecnologie di Sviluppo per il Web Colori e Sfondo 'color' 'background-color' 'background-image' 'background-repeat' 'backgroundattachment' 'background-position‘ 'background' 37 CSS >> Dettagli e Approfondimenti >> Appendice Elenco delle Proprietà di CSS Livello 1 Testo 'word-spacing' 'letter-spacing' 'text-decoration' 'vertical-align' 'text-transform' 'text-align' 'text-indent' 'line-height' G. Mecca - Tecnologie di Sviluppo per il Web Varie 'display' 'white-space' 'list-style-type' 'list-style-image' 'list-style-position' 'list-style' 38 CSS >> Dettagli e Approfondimenti >> Appendice Elenco delle Proprietà di CSS Livello 1 Riquadri 'width‘, 'height' 'float‘, 'clear' 'margin-top' 'margin-right' 'margin-bottom' 'margin-left' 'margin' 'padding-top' 'padding-right' 'padding-bottom' 'padding-left' 'padding' G. Mecca - Tecnologie di Sviluppo per il Web 'border-top-width' 'border-right-width' 'border-bottom-width' 'border-left-width' 'border-width' 'border-color' 'border-style' 'border-top' 'border-right' 'border-bottom' 'border-left' 'border' 39 Termini della Licenza Termini della Licenza This work is licensed under the Creative Commons AttributionShareAlike License. To view a copy of this license, visit http://creativecommons.org/licenses/by-sa/1.0/ or send a letter to Creative Commons, 559 Nathan Abbott Way, Stanford, California 94305, USA. Questo lavoro viene concesso in uso secondo i termini della licenza “Attribution-ShareAlike” di Creative Commons. Per ottenere una copia della licenza, è possibile visitare http://creativecommons.org/licenses/by-sa/1.0/ oppure inviare una lettera all’indirizzo Creative Commons, 559 Nathan Abbott Way, Stanford, California 94305, USA. G. Mecca - Tecnologie di Sviluppo per il Web 40