G. Mecca – – Università della Basilicata 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)

2 G. Mecca - Tecnologie di Sviluppo per il Web Dettagli e Approfondimenti m Sintassi Commenti Raggruppamenti Selettori Errori m Tipi di dato Colori Lunghezze m Tipi di Dispositivo m Semantica !important Cascata m Il Modulo style m Utilizzo degli Standard m Appendice Elenco delle Proprietà di CSS Livello 1 CSS >> Sommario

3 G. Mecca - Tecnologie di Sviluppo per il Web Idea Generale m CSS (Cascading Style Sheets) tecnologia per associare caratteristiche di presentazione ad un documento HTML/XML m In particolare consente di specificare le caratteristiche dei riquadri associati agli elementi del docum. m Sintatticamente insieme di regole: selettore, dichiarazioni dichiarazione: proprietà e valore CSS >> Dettagli e Approfondimenti >> Idea Generale

4 G. Mecca - Tecnologie di Sviluppo per il Web Idea Generale CSS >> Dettagli e Approfondimenti >> Idea Generale h2 { color: maroon; color: maroon; font-size: 14pt; font-size: 14pt;} img { border: none; border: none;} regola selettore dichiarazione proprietàvalore

5 G. Mecca - Tecnologie di Sviluppo per il Web Idea Generale m Modello dei riquadri ad ogni elemento è associato un riquadro elementi a livello di blocco ed elementi in linea m Struttura del riquadro contenuto riempimento bordo margine CSS >> Dettagli e Approfondimenti >> Idea Generale

6 G. Mecca - Tecnologie di Sviluppo per il Web riempimento (padding) Modello dei Riquadri (Box Model) CSS >> Dettagli e Approfondimenti >> Idea Generale contenuto bordo (border) margine (margin) top bottom left right top bottom left right top bottom left right

7 G. Mecca - Tecnologie di Sviluppo per il Web Sintassi m Foglio di stile regole commenti regole chiocciola m Commenti /* questo è un commento */ m (>>) CSS >> Dettagli e Approfondimenti >> Sintassi

8 G. Mecca - Tecnologie di Sviluppo per il Web Sintassi m Regole { } m Dichiarazione : ; es: div {color: white; font-size: 12pt;} m Raggruppamenti sintassi compatta per più regole div, p {color: white; font-size: 12pt;} CSS >> Dettagli e Approfondimenti >> Sintassi

9 G. Mecca - Tecnologie di Sviluppo per il Web Sintassi m Selettori semplici es: div # es: div#footer. es: div.blocco * tutti gli elementi m Altri selettori pseudo-classi selettori contestuali CSS >> Dettagli e Approfondimenti >> Sintassi

10 G. Mecca - Tecnologie di Sviluppo per il Web Sintassi m Pseudoclassi classificano dinamicamente gli elementi in base alle azioni dellutente sullinterfaccia link, visited: collegamenti non visitati, visitati hover: collegamenti sorvolati dal mouse active, focus m Sintassi : es: a:hover {color: red;} CSS >> Dettagli e Approfondimenti >> Sintassi >> sito Sviluppo Web

11 G. Mecca - Tecnologie di Sviluppo per il Web Sintassi m Selettori contestuali selezionano un elemento anche sulla base della sua posizione nellInfoSet m E costituito di due parti un selettore ordinario (nome, id, classe,...) un contesto che definisce la posizione nellInfoSet m Contesto lista di selettori semplici CSS >> Dettagli e Approfondimenti >> Sintassi

12 G. Mecca - Tecnologie di Sviluppo per il Web Sintassi m Selettore constestuale m Esempi div p.indirizzo a:hover{color: red;} div.footer img {border: none;} m Attenzione differenza con i raggruppamenti in questo caso non cè la virgola CSS >> Dettagli e Approfondimenti >> Sintassi

13 G. Mecca - Tecnologie di Sviluppo per il Web Sintassi m Semantica del selettore contestuale corrisponde ai riquadri degli elementi con le seguenti caratteristiche: lelemento corrisponde al selettore finale nellInfoSet cè un antenato per ciascuno dei selettori del contesto (riquadri che contengono il riquadro dellelemento) m Esempio div p.indirizzo a:hover{color: red;} nellInfoSet: div, p.indirizzo, a CSS >> Dettagli e Approfondimenti >> Sintassi

14 G. Mecca - Tecnologie di Sviluppo per il Web Sintassi m Esempi di Selettori em {color: red;} em {color: red;} p em {color: red;} p em {color: red;} p, em {color: red}; p, em {color: red}; div.blocco em {color: red;} div.blocco em {color: red;} a# {color: red;} a# {color: red;} div.blocco a# {color: red;} div.blocco a# {color: red;} div.blocco a:hover {color: blue;} div.blocco a:hover {color: blue;} div.blocco a# hover {color: blue;} div.blocco a# hover {color: blue;} div span a# hover {color: blue;} div span a# hover {color: blue;} CSS >> Dettagli e Approfondimenti >> Sintassi

15 G. Mecca - Tecnologie di Sviluppo per il Web Errori Sintattici m 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) m Attenzione questo a volte causa disorientamento m Nota non esiste modo di distinguere un foglio di stile CSS1 da uno CSS2 CSS >> Dettagli e Approfondimenti >> Sintassi

16 G. Mecca - Tecnologie di Sviluppo per il Web Tipi di Dato m Lunghezze assolute relative m Lunghezze principali relative: em (dimensione pari alla dimensione del font nel riquadro; eccezione: font-size) assolute: pt (punti) m Moltissime altre lunghezze meno importanti CSS >> Dettagli e Approfondimenti >> Tipi di Dato

17 G. Mecca - Tecnologie di Sviluppo per il Web Tipi di Dato m 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; } CSS >> Dettagli e Approfondimenti >> Tipi di Dato

18 G. Mecca - Tecnologie di Sviluppo per il Web Tipi di Dato m Lunghezze relative em, px, ex ex (lungh. pari alla dimensione della lettera x nel font dellelemento; eccez.: font-size) m Percentuali riferimenti variabili al variare della proprietà m Parole chiave larger, smaller es: strong { font-size: larger; } CSS >> Dettagli e Approfondimenti >> Tipi di Dato

19 G. Mecca - Tecnologie di Sviluppo per il Web Tipi di Dato m Colori colori RGB colori standard di HTML m Colori RGB # es: #FFA012 : codifica esadecimale del livello di rosso : codifica esadec. del livello di verde : codifica esadecimale del livello di blu CSS >> Dettagli e Approfondimenti >> Tipi di Dato

20 G. Mecca - Tecnologie di Sviluppo per il Web Tipi di Dato m Colori standard di HTML CSS >> Dettagli e Approfondimenti >> Tipi di Dato

21 G. Mecca - Tecnologie di Sviluppo per il Web Tipi di Dato m URI sintassi particolare: url( ) url(stili/altro.css) esempio: body {background-image: url(icons/sfondo.gif) le virgolette sono opzionali (comportamento variabile dei browser) CSS >> Dettagli e Approfondimenti >> Tipi di Dato

22 G. Mecca - Tecnologie di Sviluppo per il Web Tipi di Dispositivo (Media Types) m 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 m Tipi di Media screen, handheld, tty, tv print, projection braille, embossed, aural all CSS >> Dettagli a Approfondimenti >> Tipi di Media

23 G. Mecca - Tecnologie di Sviluppo per il Web Tipi di Dispositivo (Media Types) m Specifica del tipo di dispositivo attributo media dellelemento link m Regole CSS >> Dettagli e Approfondimenti >> Tipi di Media

24 G. Mecca - Tecnologie di Sviluppo per il Web Tipi di Dispositivo (Media Types) include le regole di un foglio in un altro es: in url(primo.css); deve essere la prima dichiarazione del foglio è possibile specificare il tipo di media url(primo.css) handheld; specifica il dispos. per cui vale un blocco di regole print { body {font-size: 10pt;}... } CSS >> Dettagli e Approfondimenti >> Tipi di Media

25 G. Mecca - Tecnologie di Sviluppo per il Web Semantica m In generale vari fogli di stile per un documento (standard, autore, utente) vari valori per una proprietà dellelemento m Semantica due meccanismi fondamentali ereditarietà dei valori delle proprietà dagli antenati nellinfoset cascata (ordine di applicazione dei valori) CSS >> Dettagli e Approfondimenti >> Semantica

26 G. Mecca - Tecnologie di Sviluppo per il Web Semantica m Qualificatore di priorità delle dichiarazioni !important es: p { font-size: 1.5em !important } m Altera la priorità nella cascata dichiarazioni importanti prima delle normali dichiarazioni importanti dellutente prima delle dichiarazioni dellautore (importanti e non – CSS2) CSS >> Dettagli e Approfondimenti >> Semantica

27 G. Mecca - Tecnologie di Sviluppo per il Web Semantica m Algoritmo scelta del valore per una proprietà di un riquadro m 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 m II passo ordina rispetto allorigine utente importanti, autore importanti, autore, utente, standard CSS >> Dettagli e Approfondimenti >> Semantica

28 G. Mecca - Tecnologie di Sviluppo per il Web Semantica m III passo ordina rispetto alla specificità prima selettori più specifici, poi meno specifici (id prima di classe prima di nome...) regola numerica complessa m IV passo ordina per ordine di comparizione nello stile prevalgono le dichiarazioni che compaiono per ultime CSS >> Dettagli e Approfondimenti >> Semantica

29 G. Mecca - Tecnologie di Sviluppo per il Web Il Modulo style di XHTML m Nota in XHTML Basic il foglio di stile è esterno al documento XHTML viene collegato con lelemento link m In XHTML 1.0 Strict è possibile immergere parte delle regole CSS direttamente nel documento XHTML modulo style e relativo attributo CSS >> Dettagli e Approfondimenti >> Il Modulo style

30 G. Mecca - Tecnologie di Sviluppo per il Web Il Modulo style di XHTML m Attenzione stiamo uscendo al di fuori di XHTML Basic per usare queste funzionalità è necessario cambiare il DTD (XTHML 1.0 Strict) m Inoltre metodologicamente è sconsigliabile mischiare nello stesso documento codice HTML e codice CSS ne parliamo solo per completezza CSS >> Dettagli e Approfondimenti >> Il Modulo style

31 G. Mecca - Tecnologie di Sviluppo per il Web Il Modulo style di XHTML m 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 CSS >> Dettagli e Approfondimenti >> Il Modulo style elementoattributomodello di contenuto styletype, media, title … #PCDATA

32 G. Mecca - Tecnologie di Sviluppo per il Web Esempio Pagina di Esempio Pagina di Esempio h1 { h1 { color: blue; color: blue; font-family: Arial; font-family: Arial; } img { img { border-style: none; border-style: none; } </head>... CSS >> Dettagli e Approfondimenti >> Il Modulo style

33 G. Mecca - Tecnologie di Sviluppo per il Web Il Modulo di Attributo di Stile m Una ulteriore possibilità XHTML 1.0 contiene un ulteriore modulo m 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 lelemento m Esempio Titolo Titolo CSS >> Dettagli e Approfondimenti >> Il Modulo style >> esempioRiquadri.html

34 G. Mecca - Tecnologie di Sviluppo per il Web Utilizzo degli Standard m 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 m Se non è prevista da CSS 1 consultare lo standard relativo a CSS 2 molte più proprietà, ma meno supportato CSS >> Dettagli e Approfondimenti >> Utilizzo degli Standard

35 G. Mecca - Tecnologie di Sviluppo per il Web Utilizzo degli Standard m Attenzione è una tecnologia molto potente si riescono ad ottenere ottimi effetti grafici m Esempi ombreggiature ed effetti di spessore sostituzione completa delle tabelle attenzione all compatibilità con i vecchi browser m Siti con esempi di stili in linea es: CSS >> Dettagli e Approfondimenti >> Utilizzo degli Standard >> esempioCSS-finale.html >> esempioCSS-treColonne.html

36 G. Mecca - Tecnologie di Sviluppo per il Web Riassumendo m Sintassi Commenti Raggruppamenti Selettori Errori m Tipi di dato Colori Lunghezze m Tipi di Dispositivo m Semantica !important Cascata m Il Modulo style m Utilizzo degli Standard m Appendice Elenco delle Proprietà di CSS Livello 1 CSS >> Sommario

37 G. Mecca - Tecnologie di Sviluppo per il Web Elenco delle Proprietà di CSS Livello 1 m Font 'font-family' 'font-style' 'font-variant' 'font-weight' 'font-size' 'font' m Colori e Sfondo 'color' 'background-color' 'background-image' 'background-repeat' 'background- attachment' 'background-position 'background' CSS >> Dettagli e Approfondimenti >> Appendice

38 G. Mecca - Tecnologie di Sviluppo per il Web Elenco delle Proprietà di CSS Livello 1 m Testo 'word-spacing' 'letter-spacing' 'text-decoration' 'vertical-align' 'text-transform' 'text-align' 'text-indent' 'line-height' m Varie 'display' 'white-space' 'list-style-type' 'list-style-image' 'list-style-position' 'list-style' CSS >> Dettagli e Approfondimenti >> Appendice

39 G. Mecca - Tecnologie di Sviluppo per il Web Elenco delle Proprietà di CSS Livello 1 m Riquadri 'width, 'height' 'float, 'clear' 'margin-top' 'margin-right' 'margin-bottom' 'margin-left' 'margin' 'padding-top' 'padding-right' 'padding-bottom' 'padding-left' 'padding' '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' CSS >> Dettagli e Approfondimenti >> Appendice

40 G. Mecca - Tecnologie di Sviluppo per il Web Termini della Licenza m This work is licensed under the Creative Commons Attribution- ShareAlike License. To view a copy of this license, visit or send a letter to Creative Commons, 559 Nathan Abbott Way, Stanford, California 94305, USA. m Questo lavoro viene concesso in uso secondo i termini della licenza Attribution-ShareAlike di Creative Commons. Per ottenere una copia della licenza, è possibile visitare oppure inviare una lettera allindirizzo Creative Commons, 559 Nathan Abbott Way, Stanford, California 94305, USA.