1 CSS Cascading Style Sheets Il linguaggio per modificare lo stile delle pagine per il web.

Presentazione sul tema: "1 CSS Cascading Style Sheets Il linguaggio per modificare lo stile delle pagine per il web."— Transcript della presentazione:

1 1 CSS Cascading Style Sheets Il linguaggio per modificare lo stile delle pagine per il web

2 2 Fogli di stile - CSS Servono per facilitare la creazione di pagine HTML con un aspetto uniforme. Servono per facilitare la creazione di pagine HTML con un aspetto uniforme. Permettono di separare il contenuto di un documento da aspetti legati alla sua presentazione. Permettono di separare il contenuto di un documento da aspetti legati alla sua presentazione. Possiamo “dimenticare” alcuni tag e attributi HTML. Possiamo “dimenticare” alcuni tag e attributi HTML.

3 3 Fogli di stile - CSS

4 4 Vantaggi Vantaggi Permettono di modificare il look & feel di un documento in modo efficiente.Permettono di modificare il look & feel di un documento in modo efficiente. Lo stesso stile può essere applicato a più documenti.Lo stesso stile può essere applicato a più documenti. Il sorgente HTML è più “pulito” e il download dei documenti è più veloce.Il sorgente HTML è più “pulito” e il download dei documenti è più veloce. Si possono progettare pagine HTML per più browser.Si possono progettare pagine HTML per più browser.

5 5 Fogli di stile - CSS Il Consorzio che si occupa della standardizzazione dei linguaggi per il web (http://www.w3c.org) suggerisce di usare i CSS perché facilitano la progettazione e la modifica delle pagine HTML. Il Consorzio che si occupa della standardizzazione dei linguaggi per il web (http://www.w3c.org) suggerisce di usare i CSS perché facilitano la progettazione e la modifica delle pagine HTML.http://www.w3c.org 1996, CSS1: servono per modificare l’aspetto degli elementi nelle pagine HTML ( colore, dimensione, caratteri…). 1996, CSS1: servono per modificare l’aspetto degli elementi nelle pagine HTML ( colore, dimensione, caratteri…). 1998, CSS2: permettono funzioni più sofisticate e introducono la possibilità di posizionamento per gli elementi nelle pagine HTML. 1998, CSS2: permettono funzioni più sofisticate e introducono la possibilità di posizionamento per gli elementi nelle pagine HTML.

6 6 Livelli dei fogli di stile I tre livelli dei fogli di stile (dal più basso al più alto) I tre livelli dei fogli di stile (dal più basso al più alto) inline (in linea)inline (in linea) a livello del documentoa livello del documento esternoesterno I primi si applicano al contenuto di un tag singolo. I primi si applicano al contenuto di un tag singolo. I secondi all’intero documento. I secondi all’intero documento. I CSS esterni si applicano ad un numero arbitrario di documenti (tutti quelli che includono il CSS). I CSS esterni si applicano ad un numero arbitrario di documenti (tutti quelli che includono il CSS). Le regole di precedenza sono: inline, livello di documento, esterno. Le regole di precedenza sono: inline, livello di documento, esterno. Se un CSS esterno specifica un valore particolare per una proprietà in un certo tag, questo valore viene usato finchè non venga specificato un valore diverso in un CSS inline o a livello di documento.Se un CSS esterno specifica un valore particolare per una proprietà in un certo tag, questo valore viene usato finchè non venga specificato un valore diverso in un CSS inline o a livello di documento.

7 7 CSS in linea può essere anche usato come attributo di altri tag HTML. può essere anche usato come attributo di altri tag HTML. La forma generale è La forma generale è style=“proprietà_1:valore_1; proprietà_2:valore_2; …; proprietà_n:valore_n” Il raggio d’azione delle specifiche inline è ristretto al contenuto del tag in cui appaiono. Il raggio d’azione delle specifiche inline è ristretto al contenuto del tag in cui appaiono. Prova CSS per h1

8 8 CSS a livello del documento I CSS a livello del documento sono inseriti direttamente nel documento HTML tramite l’elemento. I CSS a livello del documento sono inseriti direttamente nel documento HTML tramite l’elemento.<html><head> Inserire i fogli di stile in un documento Inserire i fogli di stile in un documento <!--body{background:#FFFFCC}--></style></head><body>… Il codice inizia con l’apertura del tag. Esso può avere due attributi: Il codice inizia con l’apertura del tag. Esso può avere due attributi: type (obbligatorio)type (obbligatorio) media (opzionale)media (opzionale)

9 9 CSS a livello del documento L’attributo type indica al browser il tipo di specifica dello stile all’interno del tag L’attributo type indica al browser il tipo di specifica dello stile all’interno del tag <style type=“text/css” … Indica che il tipo è un CSS. L’attributo è necessario perché vi sono altri fogli di stile che possono apparire nei tag (ad es. quelli forniti da JavaScript). Indica che il tipo è un CSS. L’attributo è necessario perché vi sono altri fogli di stile che possono apparire nei tag (ad es. quelli forniti da JavaScript). L’attributo media (opzionale) permette di specificare vari dispositivi di visualizzazione (monitor, stampanti, ecc.). L’attributo media (opzionale) permette di specificare vari dispositivi di visualizzazione (monitor, stampanti, ecc.). L’elenco delle regole del tag appare in un commento HTML in quanto contiene informazioni relative allo stile di presentazione dirette al browser e non all’utente. L’elenco delle regole del tag appare in un commento HTML in quanto contiene informazioni relative allo stile di presentazione dirette al browser e non all’utente. Ogni regola di stile in un elenco è costituita da due parti: un selettore che indica i tag a cui viene applicata la regola ed un elenco di coppie valori-proprietà Ogni regola di stile in un elenco è costituita da due parti: un selettore che indica i tag a cui viene applicata la regola ed un elenco di coppie valori-proprietà elenco_nomi_tag{proprietà_1:valore_1; proprietà_2:valore_2; …; proprietà_n:valore_n}

10 10 CSS a livello del documento <html><head> <!-- h1{color:blue; font-style:italic;} h2{color:red; font-style:italic;} h3{color:yellow; font-style:italic;} b{color:green; font-style:italic;} --></style></head> <center> Prova CSS per H1 Prova CSS per H1 Prova CSS per H2 Prova CSS per H2 Prova CSS per H3 Prova CSS per H3 Prova CSS per B Prova CSS per B </center></body></html>

11 11 CSS esterni Per caricare un CSS esterno in un documento la possibilità più comune (e anche la più utilizzata) è quella che fa uso dell’elemento. La dichiarazione va sempre collocata all’interno della sezione del documento. Per caricare un CSS esterno in un documento la possibilità più comune (e anche la più utilizzata) è quella che fa uso dell’elemento. La dichiarazione va sempre collocata all’interno della sezione del documento.<html><head> Inserire i fogli di stile in un documento Inserire i fogli di stile in un documento </head><body>…

12 12 Fogli collegati L’elemento presenta una serie di attributi L’elemento presenta una serie di attributi rel descrive il tipo di relazione fra il documento e il file collegato. È obbligatorio. Per i CSS due sono i valori possibili: stylesheet e alternate stylesheetrel descrive il tipo di relazione fra il documento e il file collegato. È obbligatorio. Per i CSS due sono i valori possibili: stylesheet e alternate stylesheet href serve a definire l’URL assoluto o relativo del foglio di stile. È obbligatoriohref serve a definire l’URL assoluto o relativo del foglio di stile. È obbligatorio type identifica il tipo di dati da collegare. Per i CSS l’unico valore possibile è text/css. L’attributo è obbligatoriotype identifica il tipo di dati da collegare. Per i CSS l’unico valore possibile è text/css. L’attributo è obbligatorio media: con questo attributo si identifica il supporto (schermo, stampa, ecc.) cui applicare un particolare foglio di stile. Attributo opzionalemedia: con questo attributo si identifica il supporto (schermo, stampa, ecc.) cui applicare un particolare foglio di stile. Attributo opzionale

13 13 CSS esterni Il metodo migliore è quello di scrivere gli attributi di stile in un file esterno, che può essere condiviso da più file HTML. Il metodo migliore è quello di scrivere gli attributi di stile in un file esterno, che può essere condiviso da più file HTML. Il file che contiene gli stili deve essere un file in formato testo (ASCII) con estensione.css. Il file che contiene gli stili deve essere un file in formato testo (ASCII) con estensione.css. h1{color:red; text-transform:capitalize;} p{color:blue;} file stile.css

14 14 Come è fatto un CSS: regole e commenti Esempio di CSS Esempio di CSS regoleregole commenti (/* qui il commento */)commenti (/* qui il commento */) Un foglio di stile non è altro che questo: Un foglio di stile non è altro che questo: Un insieme di regole, accompagnate, volendo, da qualche nota di commento.Un insieme di regole, accompagnate, volendo, da qualche nota di commento.

15 15 Come è fatta una regola Una regola CSS è composta da due blocchi principali: Una regola CSS è composta da due blocchi principali: Il selettore.Il selettore. Il blocco delle dichiarazioni.Il blocco delle dichiarazioni. Il selettore serve a definire la parte del documento cui verrà applicata la regola. Il selettore serve a definire la parte del documento cui verrà applicata la regola. In questo caso, ad esempio, verranno formattati tutti gli elementi : lo sfondo sarà rosso, il colore del testo bianco.In questo caso, ad esempio, verranno formattati tutti gli elementi : lo sfondo sarà rosso, il colore del testo bianco.

16 16 Come è fatta una regola Il blocco delle dichiarazioni è delimitato rispetto al selettore e alle altre regole da due parentesi graffe. Al suo interno possono trovare posto più dichiarazioni. Esse sono sempre composte da una coppia: Il blocco delle dichiarazioni è delimitato rispetto al selettore e alle altre regole da due parentesi graffe. Al suo interno possono trovare posto più dichiarazioni. Esse sono sempre composte da una coppia: proprietàproprietà valorevalore La proprietà definisce un aspetto dell’elemento da modificare (margini, colore di sfondo, ecc.) secondo il valore espresso.La proprietà definisce un aspetto dell’elemento da modificare (margini, colore di sfondo, ecc.) secondo il valore espresso. Proprietà e valore devono essere separati dai due punti. Una limitazione fondamentale da rispettare è questa: per ogni dichiarazione non è possibile indicare più di una proprietà, mentre è spesso possibile specificare più valoriProprietà e valore devono essere separati dai due punti. Una limitazione fondamentale da rispettare è questa: per ogni dichiarazione non è possibile indicare più di una proprietà, mentre è spesso possibile specificare più valori {font:12px Verdana;}

17 17 I selettori Una regola CSS viene applicata a un selettore. Una regola CSS viene applicata a un selettore. Semplice dichiarazione che serve a selezionare la parte o le parti di un documento soggette ad una specifica regola.Semplice dichiarazione che serve a selezionare la parte o le parti di un documento soggette ad una specifica regola. Vari tipi di selettore.Vari tipi di selettore. Selettore di elementi (type selector). Selettore di elementi (type selector). È il più semplice dei selettori. È costituito da uno qualunque degli elementi di HTML.È il più semplice dei selettori. È costituito da uno qualunque degli elementi di HTML. h1 {color:#000000;} p {background:white; font:12px Verdana,Arial,sans- serif;} table {width:200px;}

18 18 Selettore di elementi (esempio) body { background:White; font:12px Verdana, Geneva, Arial, Helvetica, sans-serif; } h1 { background:silver; color:black; } p { color:Red;} <html><head> Selettore semplice Selettore semplice </head><body> Selettore di elementi Selettore di elementi In questo CSS abbiamo usato alcuni selettori di elementi. In questo CSS abbiamo usato alcuni selettori di elementi. </body></html>

19 19 Le classi di stile Le classi di stile possono essere utilizzate per permettere a occorrenze diverse dello stesso tag di adottare specifiche di stile differenti contenute in un documento o in un CSS esterno. Le classi di stile possono essere utilizzate per permettere a occorrenze diverse dello stesso tag di adottare specifiche di stile differenti contenute in un documento o in un CSS esterno. Per applicare due stili di un paragrafo ad un documento è possibile definire due classi nel tag stylePer applicare due stili di un paragrafo ad un documento è possibile definire due classi nel tag style p.normal {elenco_valori_proprietà} p.special{elenco_valori_proprietà} All’interno del corpo del documento la particolare classe che viene scelta viene specificata dall’attributo class nel tag corrispondente All’interno del corpo del documento la particolare classe che viene scelta viene specificata dall’attributo class nel tag corrispondente … oppure … oppure … … Per applicare una classe di specifiche di stile al contenuto di più di un tag si può ricorrere a una classe generica, definita da un nome privo del nome del tag Per applicare una classe di specifiche di stile al contenuto di più di un tag si può ricorrere a una classe generica, definita da un nome privo del nome del tag.italic {font-style:italic} Nel corpo del documento si possono avere le seguenti righe Nel corpo del documento si possono avere le seguenti righe Chapter 3 Chapter 3 …… … …

20 20 Le classi di stile Nel file.css h1 {font-style:italic;}.imp {color:red; text-decoration:underline;} Nel file.html Primo titolo Titolo da evidenziare Paragrafo da evidenziare… …

21 21 Le proprietà e i valori di proprietà Esistono diverse proprietà suddivise in sei categorie: Esistono diverse proprietà suddivise in sei categorie: Di carattere.Di carattere. Di colore e sfondo.Di colore e sfondo. Di testo.Di testo. Di caselle e layout.Di caselle e layout. Degli elenchi.Degli elenchi. Dei tag.Dei tag.

22 22 Le proprietà di carattere Sono proprietà che permettono di avere testi con caratteri, stile, dimensioni differenti. Sono proprietà che permettono di avere testi con caratteri, stile, dimensioni differenti. font-family: permette di specificare un elenco di nomi di carattere font-family: permette di specificare un elenco di nomi di carattere font-family: Arial, Helvetica, Courier In questo caso il browser utilizzerebbe Arial (se lo supporta) o in alternativa Helvetica o Courier. In questo caso il browser utilizzerebbe Arial (se lo supporta) o in alternativa Helvetica o Courier. In caso di nome di carattere costituito da più di una parola si usano le virgolette singoleIn caso di nome di carattere costituito da più di una parola si usano le virgolette singole font-family: ‘Times New Roman’

23 23 Le proprietà di carattere font-size:10pt (valore assoluto in punti) font-size:10pt (valore assoluto in punti) font-size:xx-small, x-small, medium (valore relativo) font-size:xx-small, x-small, medium (valore relativo) font-style:italic font-style:italic font-weight:bold (normal, bolder, lighter) font-weight:bold (normal, bolder, lighter) Se si deve specificare più di una proprietà dei font si usa: Se si deve specificare più di una proprietà dei font si usa: font:bold 14pt ‘Times New Roman’

24 24 Le proprietà di elenco Elenchi non ordinati Elenchi non ordinati list-style-type può essere impostata a disc, circle, square o none (predefinito disc)list-style-type può essere impostata a disc, circle, square o none (predefinito disc) Some common single-engine aircraft Some common single-engine aircraft Cessna Skyhawk Cessna Skyhawk Beechcraft Bonanza Beechcraft Bonanza Piper Cherokee Piper Cherokee </ul> Some common single-engine aircraft Some common single-engine aircraft Cessna Skyhawk Cessna Skyhawk Beechcraft Bonanza Beechcraft Bonanza Piper Cherokee Piper Cherokee </ul> Elenchi ordinati Elenchi ordinati list-style-type può essere impostata a decimal, upper-alpha, lower-alpha, upper-roman, lower-roman.list-style-type può essere impostata a decimal, upper-alpha, lower-alpha, upper-roman, lower-roman.

25 25 L’allineamento del testo La proprietà text-align (possibili valori left, right, center, justify) viene usata per posizionare il testo orizzontalmente La proprietà text-align (possibili valori left, right, center, justify) viene usata per posizionare il testo orizzontalmente p {text-align:right} La proprietà float viene spesso impostata per immagini e tabelle ed usata per specificare che il testo “scorra” intorno agli elementi mobili. I valori possibili per float sono left, right, none. La proprietà float viene spesso impostata per immagini e tabelle ed usata per specificare che il testo “scorra” intorno agli elementi mobili. I valori possibili per float sono left, right, none.

26 26 I margini Le proprietà margin-left, margin-right, margin-top, margin-bottom permettono di impostare i margini intorno ad un elemento HTML. Le proprietà margin-left, margin-right, margin-top, margin-bottom permettono di impostare i margini intorno ad un elemento HTML. Esempio di gestione degli spazi intorno ad una immagine Esempio di gestione degli spazi intorno ad una immagine

27 27 Il colore La gestione del colore per i documenti web è abbastanza “delicata”. La gestione del colore per i documenti web è abbastanza “delicata”. Problemi legati alle prestazioni dei monitor a colori.Problemi legati alle prestazioni dei monitor a colori. I browser effettuano il rendering dei documenti gestendo i colori in maniera differente l’uno dall’altro.I browser effettuano il rendering dei documenti gestendo i colori in maniera differente l’uno dall’altro. I documenti utilizzano tre insiemi di colori. I documenti utilizzano tre insiemi di colori. Il set di colori più ridotto include solo quei colori di cui è garantita una visualizzazione corretta da parte di tutti i browser e su tutti i monitor a colori.Il set di colori più ridotto include solo quei colori di cui è garantita una visualizzazione corretta da parte di tutti i browser e su tutti i monitor a colori. Palette web (216 colori). Ok con i browser in ambiente Mac e Windows (possibili problemi in ambiente Unix).Palette web (216 colori). Ok con i browser in ambiente Mac e Windows (possibili problemi in ambiente Unix). Terzo insieme: 24 bit per colore (16 milioni di colori).Terzo insieme: 24 bit per colore (16 milioni di colori).

28 28 Il tag Il tag A volte è necessario applicare proprietà di carattere speciali a porzioni di testo più piccole di un paragrafo (es. ad una parola). A volte è necessario applicare proprietà di carattere speciali a porzioni di testo più piccole di un paragrafo (es. ad una parola). It is sure fun to be in total control of text

29 29 CSS Molti manuali sono in rete, ad esempio si veda http://css.html.it/ Molti manuali sono in rete, ad esempio si veda http://css.html.it/