Tecnologie di Sviluppo per il Web

Transcript

1 Tecnologie di Sviluppo per il Web Cascading Style Sheets (CSS): Dettagli e Approfondimenti versione 1.2 G. Mecca mecca@unibas.it Università della Basilicata CSS >> Sommario Dettagli e Approfondimenti Sintassi Commenti Raggruppamenti Selettori Errori Tipi di dato Colori Lunghezze Tipi di Dispositivo Semantica!important Cascata Il Modulo style Utilizzo degli Standard Appendice Elenco delle Proprietà di CSS Livello 1 2

2 CSS >> Dettagli e Approfondimenti >> Sintassi Sintassi Foglio di stile lista di regole regole chiocciola commenti Commenti /* questo è un commento */ (>>) 3 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;} 4

3 CSS >> Dettagli e Approfondimenti >> Sintassi Sintassi Selettori semplici <nome elemento> <nome elemento>#<id> <nome elemento>.<classe> * tutti gli elementi pseudo-classi Selettori contestuali 5 CSS >> Dettagli e Approfondimenti >> Sintassi Sintassi 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;} 6

4 CSS >> Dettagli e Approfondimenti >> Sintassi Sintassi Selettori constestuali <contesto> <selettore semplice> Contesto lista di selettori semplici es: div p.indirizzo a:hover{color: red;} attenzione alla differenza con i raggrupp. Semantica antenati nell InfoSet 7 CSS >> Dettagli e Approfondimenti >> Sintassi Sintassi Esempi p em {color: red;} p, em {color: red}; div.blocco em {color: red;} div.blocco a# {color: red;} div.blocco a:hover {color: blue;} div.blocco a# hover {color: blue;} div span a# hover {color: blue;} 8

5 CSS >> Dettagli e Approfondimenti >> Sintassi Sintassi Comportamento del browser su errori filosofia: ignorare le parti ignote dichiarazioni con proprietà sconosciute dichiarazioni con valori non legali regole chiocciola sconosciute regole con errori sintattici Unica sintassi non esiste modo di distinguere un foglio di stile CSS1 da uno CSS2 9 CSS >> Dettagli e Approfondimenti >> Tipi di Dato Tipi di Dato Lunghezze assolute relative Assolute in, cm, mm, pt, pc (1 pica = 12 pt) parole chiave: xx-small, x-small, small, medium, large, x-large, xx-large es: body { font-size: x-small; } 10

6 CSS >> Dettagli e Approfondimenti >> Tipi di Dato Tipi di Dato Relative em, px ex (dim. della lettera x nel font dell elem.) relative alla dimensione del font dell elemento font-size: dimensione del font del padre Percentuali riferimenti variabili al variare della proprietà Parole chiave larger, smaller es:strong { font-size: larger; } 11 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 12

7 CSS >> Dettagli e Approfondimenti >> Tipi di Dato Tipi di Dato Colori standard di HTML 13 CSS >> Dettagli e Approfondimenti >> Tipi di Dato Tipi di Dato URI url( <uri reference> ) url( stili/altro.css ) esempio: body {background-image: url( icons/sfondo.gif ) le virgolette sono opzionali (comportamento variabile dei browser) 14

8 CSS >> Dettagli a Approfondimenti >> Tipi di Media Tipi di Dispositivo ( Media Types ) CSS2 introduce il concetto di media è possibile specificare il dispositivo di rif.to il browser può selezionare lo stile giusto Tipi di Media screen, handheld, tty, tv print, projection braille, embossed, aural all 15 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 ( 16

9 CSS >> Dettagli e Approfondimenti >> Tipi di Media 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 ) specifica il dispos. per cui vale un blocco di regole print { body {font-size: 10pt;}... } 17 CSS >> Dettagli e Approfondimenti >> Semantica Semantica In generale vari fogli di stile per un documento vari valori per una proprietà dell elemento Semantica ereditarietà dagli antenati nell infoset cascata Combinano assieme regole di fogli di stile diversi 18

10 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) 19 CSS >> Dettagli e Approfondimenti >> Semantica Cascata >> finale.html Trova tutte le dichiarazioni che si applicano ad un elemento, proprietà, media Ordina rispetto all origine utente importanti, autore importanti, autore, utente, standard i fogli importati hanno la stessa priorità di quelli che li importano Ordina rispetto alla specificità regola numerica complessa Ordina per ordine di comparizione nello stile 20

11 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 21 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 22

12 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 style attributo type, media, title modello di contenuto #PCDATA 23 CSS >> Dettagli e Approfondimenti >> Il Modulo style Esempio <html xmlns= > <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>... 24

13 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 25 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 26

14 CSS >> Sommario Riassumendo Sintassi commenti raggruppamenti selettori errori Tipi di dato colori lunghezze Tipi di Dispositivo Semantica!important cascata Il Modulo style Utilizzo degli Standard Appendice Elenco delle Proprietà di CSS Livello 1 27 CSS >> Dettagli e Approfondimenti >> Appendice Elenco delle Proprietà di CSS Livello 1 Font 'font-family' 'font-style' 'font-variant' 'font-weight' 'font-size' 'font' Colori e Sfondo 'color' 'background-color' 'background-image' 'background-repeat' 'backgroundattachment' 'background-position 'background' 28

15 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' Varie 'display' 'white-space' 'list-style-type' 'list-style-image' 'list-style-position' 'list-style' 29 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' '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' 30