CSS 1 CSS. In breve. Fogli di stile a cascata. Introduzione a CSS: Cascading Style Sheets

Transcript

1 CSS 1 Introduzione a CSS: Cascading Style Sheets CSS CSS è l acronimo di Cascading Style Sheets Fogli di stile in cascata Un foglio di stile specifica come un browser deve posizionare, formattare e visualizzare i vari elementi che compongono una pagina web un foglio di stile è una collezione di regole stilistiche che definiscono il look & feel degli elementi Uno stile può essere interno ad un file.html oppure può essere un file di testo con estensione.css) 2 Fogli di stile a cascata Il browser fonde insieme le varie definizioni incontrate esaminando in cascata le definizioni incontrate (ecco il significato di cascading) Il termine cascading si riferisce all ordine di applicazioni delle definizioni di stile Hanno priorità minore quelle in un file esterno, maggiore quelle all interno dei tag In breve CSS permette agli autori di siti di separare l aspetto di pagine web dal loro contenuto. Nel seguito impareremo come farlo perché è bene farlo perché non è bene continuare ad usare il vecchio modo per personalizzare pagine web. 3 4

2 Cenni di storia 1 W3C ha pubblicato due raccomandazioni (una specie di standard) principali per CSS CSS1 e CSS2 CSS1 è diventata una raccomandazione alla fine del 1996 CSS2 è divenuta una raccomandazione nel maggio del Cenni di storia 3 CSS3 è attualmente sotto sviluppo Focus sulla modularizzazione della specifica di CSS. Esempi di moduli sono: Sintassi/Grammatica, Selettori, Unità di misura, osizionamento, Font, roposta di supportare grafica vettoriale e interfacce utente Informazioni sullo stato attuale possono essere reperite presso Riferimenti B. Bos, H.W. Lie, C. Lilley, I. Jacobs, Cascading Style Sheets, level 2, CSS Specification W3C Recommendation 12 maggio Specifica dello stile Ogni elemento possiede un insieme di proprietà che caratterizzano la sua presentazione (design) La definizione dello stile consiste nell assegnamento di valori a un insieme di proprietà 7 8

3 Stile e CSS Lo stile definisce le regole che guidano il browser nella visualizzazione del contenuto di un tag (suggerisco come mostrare il contenuto) Con la netta separazione contenutoaspetto si guadagna: Chiarezza semantica Chiarezza stilistica Uno strumento potente e generale per specificare lo stile Blocchi Ogni documento HTML può essere visto come un insieme di blocchi (contenitori) sui quali si può agire con stili diversi I tag HTML definiscono i blocchi 9 10 Esempio <HTML> <HEAD>...</HEAD> <BODY> <H1>titolo</H1> <> primo paragrafo </> <> secondo paragrafo </> <> terzo paragrafo <A HREF="pippo.html">link</A> </> </BODY> </HTML> HTML BODY H1 HEAD LINK agina web = sequenza di elementi Ogni tag definisce un elemento della pagina Gli attributi del tag esprimono le proprietà dell elemento I valori degli attributi identificano la specifica proprietà < ALIGN= center > 11 12

4 agina web I tag servono per specificare la struttura (semantica) di un documento Lo stile associato al tag comunica al browser come l elemento indicato dal tag deve essere formattato, posizionato e visualizzato In passato Le proprietà stilistiche dei vari elementi venivano suggerite al browser attraverso gli attributi dei tag <BODY BGCOLOR= darkred > In questo modo le pagine web sono più confuse e difficili da leggere Separare il contenuto dall aspetto contenuto documento HTML informazione collegato a browser utente aspetto documento CSS Come specificare uno stile? Esistono tre modi per specificare uno stile All interno di elementi HTML Inline Style All interno del tag <head> Internal Style Sheet In un file esterno External Style Sheet 15 16

5 HTML e CSS HTML permette di assegnare gli stili agli elementi in tre modi: Tutti gli elementi con lo stesso nome hanno lo stesso stile Tutti gli elementi di una certa categoria hanno lo stesso stile (si usa l'attributo CLASS) Uno specifico elemento ha un dato stile (l elemento è identificato dal valore dell'attributo ID) Stile in linea - Inline Style Lo stile inline lo si definisce all interno di un qualsiasi tag HTML ermette di definire proprietà di un elemento specifico < STYLE= font-size:120%; text-align:center; background:red; > proprietà valore Esempio Lo stile inline indica la formattazione di un singolo elemento La definizione vale solo per il contenuto del tag <H1 STYLE= color:blue; > la scritta blue</h1> <H1>la scritta normale<h1> Risultato 19 20

6 Elementi di un foglio di stile 1 Ogni foglio di stile consiste di una serie di istruzioni chiamate statements. Uno statement fa due cose: 1.Identifica gli elementi (, BODY, UL, ) in un documento HTML che lo includono 2.Suggerisce al browser come mostrare questi elementi La parte dello statement che identifica gli elementi è detto selettore. I selettori selezionano gli elementi di una pagina. Elementi di un foglio di stile 2 La parte dello statement che suggerisce al browser come gli elementi dovrebbero essere mostrati all utente è detta dichiarazione Una dichiarazione può contenere un gran numero di proprietà, le parti individuali di stile da applicare all elemento selezionato Anatomia di un foglio di stile statement statement statement statement statement selettore dichiarazione di proprietà seleziona un elemento nel documento HTML descrive come questo elemento dovrebbe essere mostrato Internal Style Sheet Lo stile è incorporato nel documento HTML. Le definizioni vanno all interno del tag contenitore <STYLE> </STYLE> che a sua volta deve essere contenuto dal tag <HEAD> </HEAD> La definizione si applica a tutti gli elementi della pagina <STYLE TYE= text/css > { font-size:120%; text-align:center; backgroung:red;} </STYLE> 23 24

7 Esempio Risultato <HTML> <HEAD> <TITLE>Esempio</TITLE> <STYLE type="text/css"> { font-size:120% ;text-align:center; background:red;} </STYLE> </HEAD> <BODY> <> Questo è un esempio di stile internal </> </BODY </HTML> Effetto a cascata Risultato <HEAD> <TITLE>Esempio di cascata</title> <STYLE type="text/css"> { font-size:120%; text-align:center; background:red;} </STYLE> </HEAD> <> Questo è un esempio di stile con effetto <EM STYLE= background:blue > a cascata </EM> </> 27 28

8 External Style Sheet Inclusione attraverso <LINK> Sono definiti in un altro documento con estensione.css Costituiscono il più alto livello di stile Esistono due modi per importare uno stile esterno Con il tag <LINK> Attraverso la Il documento a cui si vuole applicare uno stile esterno deve contenere un collegamento (attraverso il tag <LINK>) al foglio di stile Il tag <LINK> geve essere usato all interno di <HEAD> Sintassi: <link rel="stylesheet" type="text/css" href="nomefilestile.css" > Attributi di <LINK> rel Indica il tipo di file, se è un foglio di stile (stylesheet) oppure la definizione di un font da scaricare via rete (fontdef) type Specifica il tipo di foglio di stile CSS (text/css) oppure javascript (text/javascript) href Indica il nome ed il percorso che individuano il file stesso Esempio di foglio di stile Javascript <STYLE TYE= text/javascript > tags..fontsize= 12pt ; tags..textalign= center ; tags..background= red ; </STYLE> confrontatelo con quello (già visto) CSS... { font-size:12pt; text-align:center; background:red;} 31 32

9 La può essere usata come " "; Un url può essere sia un file locale (in tal caso si usa un url relativo) che assoluto, come negli esempi precedenti La 2 Lo stile importato è utilizzato in congiunzione al corrente foglio di stile Un foglio di stile con una discende a cascata (cascade from,...è un figlio) dal foglio di stile importato Le regole specificate in un foglio di stile annullano le regole del foglio di stile importato La 3 Sintassi dei fogli di stile 1 La regola deve precedere tutte le altre regole in un foglio di stile deve essere la prima ossiamo avere più una di seguito all altra La differenza e <link> è che è possibile fondere insieme le regole di stile 1. Ogni istruzione (statement) deve avere un selettore ed una dichiarazione. La dichiarazione viene subito dopo il selettore ed è contenuta in una coppia di parentesi graffe 2. La dichiarazione consiste di una o più proprietà separate da punto e virgola (;) 3. Ogni proprietà ha un nome seguito da due punti (:) seguiti dal valore di quella proprietà. Ci sono vari tipi di valore, ma ogni data proprietà può assumerne solo alcuni come indicato dalla specifica CSS

10 Sintassi dei fogli di stile 2 4. Se una proprietà può assumere più valori contemporaneamente, (ad esempio font-family) allora valori nella lista devono essere separati da virgola e da uno spazio 5. Se un valore assume un unità di misura come valore attuale, (ad esempio font-size) allora non si deve mettere uno spazio tra il valore e l unità di misura 6. Se un valore è costituito da più parole, allora circondare il valore con le virgolette 7. Come per HTML, si possono aggiungere spazi bianchi per rendere i fogli di stile più facili da leggere e da scrivere Anatomia di un istruzione selettore nomi di proprietà body { } font-family: Verdana, Minion Web, sans-serif; font-size: 1em; text-align: justify; parentesi graffa di apertura valore parentesi graffa di chiusura Commenti in CSS er indicare un commento in un foglio di stile esterno si usa la stessa sintassi del C Inizio commento /* Fine commento */ er indicare un commento in un foglio di stile interno si usa la stessa sintassi dell HTML Inizio commento  Nascondere lo stile ai vecchi browser <STYLE> <!-- -- >. definizione di stili. </STYLE> Se lo stile è esterno non ci sono problemi 39 40

11 HTML document tree HTML HEAD BODY B EM Ereditarietà 1 Se si applica uno stile a un elemento, sarà ereditato automaticamente da quelli contenuti in esso ad esempio, paragrafi e headings ereditano le impostazioni del body Se non specificato diversamente, le caratteristiche di un elemento rimangono quelle predefinite o quelle definite in uno stile ereditato Ereditarietà 2 Esempio HTML Le proprietà di uno stile di un livello figlio sono ereditate dallo stile del livello genitore Ad esempio, uno stile inline eredita le proprietà di uno stile interno e di uno stile esterno External Embedded Inline L eredità fluisce in questo verso HEAD Se si assegna uno stile a tutti i paragrafi, allora anche gli elementi in essi contenuti ereditano lo stesso stile (a meno di definizioni più interne) B BODY EM A 43 44

12 Stili in conflitto User defined setting Quando gli stili vanno in conflitto, allora quello con maggiore specificità avrà maggiore peso Esiste un algoritmo per calcolare la specificità di un selettore Default Browser Settings User-Defined Settings External Styles Internal Styles Inline Styles HTML Tag Attributes Maggiore peso L utente può definire uno stile da applicare ai documenti che scarica dalla rete Ogni browser ha il suo modo per settare tale stile Ad esempio con Internet Explorer Note 1 Se non viene specificata una proprietà, CSS assume un valore di default A parte pochi casi, questo è sempre "inherit". Questo significa che la proprietà assume lo stesso valore che ha nell elemento genitore dell'elemento in questione Ad esempio l'elemento em qui avrà il colore rosso <p style="color:red;"> Qui è <em> enfatizzato</em> e qui no. </p> 47 48

13 Note 2 regole multiple User Agent il browser definisce (o esplicitamente o implicitamente codificandole nel software) le regole di default per gli elementi dei documenti. User l'utente può fornire un ulteriore foglio di stile per indicare regole di proprio piacimento. Tipicamente è una funzione del browser Author l'autore delle pagine fornisce, nei modi visti in precedenza, i fogli di stile del documento specifico Note 3 Regole!important Quando una regola utente (tipicamente) è seguita dalla keyword!important, essa sopravanza una analoga regola di senso diverso dell'autore Ad esempio { font-size: 18pt!important } 49 50