CSS 1. Introduzione a CSS: Cascading Style Sheets

Transcript

1 CSS 1 Introduzione a CSS: Cascading Style Sheets

2 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) Tecnologie di Sviluppo per il WEB 2

3 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 applicazione delle definizioni di stile Hanno priorità minore quelle in un file esterno, maggiore quelle all interno dei tag Tecnologie di Sviluppo per il WEB 3

4 In breve CSS permette agli autori di siti WEB 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. Tecnologie di Sviluppo per il WEB 4

5 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 Tecnologie di Sviluppo per il WEB 5

6 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, Posizionamento, Font, Proposta di supportare grafica vettoriale e interfacce utente Informazioni sullo stato attuale possono essere reperite presso Tecnologie di Sviluppo per il WEB 6

7 Riferimenti B. Bos, H.W. Lie, C. Lilley, I. Jacobs, Cascading Style Sheets, level 2, CSS Specification W3C Recommendation 12 maggio Tecnologie di Sviluppo per il WEB 7

8 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à Tecnologie di Sviluppo per il WEB 8

9 Stile e CSS Lo stile definisce le regole che guidano il browser nella visualizzazione del contenuto di un tag (suggeriscono come mostrare il contenuto) Con la netta separazione contenutoaspetto si guadagna: Chiarezza semantica Chiarezza stilistica Uno strumento potente e generale per specificare lo stile Tecnologie di Sviluppo per il WEB 9

10 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 Tecnologie di Sviluppo per il WEB 10

11 Esempio <HTML> <HEAD>...</HEAD> <BODY> <H1>titolo</H1> <P> primo paragrafo </P> <P> secondo paragrafo </P> <P> terzo paragrafo <A HREF="pippo.html">link</A > </P> </BODY> </HTML> HTML BODY H1 P P P HEAD LINK Tecnologie di Sviluppo per il WEB 11

12 Pagina 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à <P ALIGN= center > Tecnologie di Sviluppo per il WEB 12

13 Pagina 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 Tecnologie di Sviluppo per il WEB 13

14 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 Tecnologie di Sviluppo per il WEB 14

15 Separare il contenuto dall aspetto informazione contenuto aspetto documento HTML collegato a documento CSS browser utente Tecnologie di Sviluppo per il WEB 15

16 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 Tecnologie di Sviluppo per il WEB 16

17 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) Tecnologie di Sviluppo per il WEB 17

18 Stile in linea - Inline Style Lo stile inline lo si definisce all interno di un qualsiasi tag HTML Permette di definire proprietà di un elemento specifico <P STYLE= font-size:120%; text-align:center; background:red; > proprietà valore Tecnologie di Sviluppo per il WEB 18

19 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> Tecnologie di Sviluppo per il WEB 19

20 Risultato Tecnologie di Sviluppo per il WEB 20

21 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 (P, 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. Tecnologie di Sviluppo per il WEB 21

22 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. Tecnologie di Sviluppo per il WEB 22

23 Anatomia di un foglio di stile statement statement selettore seleziona un elemento nel documento HTML statement statement statement dichiarazione di proprietà descrive come questo elemento dovrebbe essere mostrato Tecnologie di Sviluppo per il WEB 23

24 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 TYPE= text/css > P { font-size:120%; text-align:center; background:red;} </STYLE> Tecnologie di Sviluppo per il WEB 24

25 Esempio <HTML> <HEAD> <TITLE>Esempio</TITLE> <STYLE type="text/css"> P { font-size:120% ;text-align:center; background:red;} </STYLE> </HEAD> <BODY> <P> Questo è un esempio di stile internal </P> </BODY </HTML> Tecnologie di Sviluppo per il WEB 25

27 Effetto a cascata <HEAD> <TITLE>Esempio di cascata</title> <STYLE type="text/css"> P { font-size:120%; text-align:center; background:red;} </STYLE> </HEAD> <P> Questo è un esempio di stile con effetto <EM STYLE= background:blue > a cascata </EM> </P> Tecnologie di Sviluppo per il WEB 27

29 External Style Sheet 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 Tecnologie di Sviluppo per il WEB 29

30 Inclusione attraverso <LINK> 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> deve essere usato all interno di <HEAD> Sintassi: <link rel="stylesheet" type="text/css" href="nomefilestile.css" > Tecnologie di Sviluppo per il WEB 30

31 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 Tecnologie di Sviluppo per il WEB 31

32 Esempio di foglio di stile Javascript <STYLE TYPE= text/javascript > tags.p.fontsize= 12pt ; tags.p.textalign= center ; tags.p.background= red ; </STYLE> confrontatelo con quello (già visto) CSS... P { font-size:12pt; text-align:center; background:red;} Tecnologie di Sviluppo per il WEB 32

33 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 <style type= text/css ; </style> Tecnologie di Sviluppo per il WEB 33

34 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 Tecnologie di Sviluppo per il WEB 34

35 La 3 La regola deve precedere tutte le altre regole in un foglio di stile deve essere la prima Possiamo avere più una di seguito all altra Tecnologie di Sviluppo per il WEB 35

36 Sintassi dei fogli di stile 1 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 CSS2. Tecnologie di Sviluppo per il WEB 36

37 Sintassi dei fogli di stile 2 4. Se una proprietà può assumere più valori contemporaneamente, (ad esempio font-family) allora i 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 Tecnologie di Sviluppo per il WEB 37

38 Anatomia di un istruzione selettore nomi di proprietà parentesi graffa di apertura body { font-family: Verdana, Minion Web, sans-serif; font-size: 1em; text-align: justify; valore } parentesi graffa di chiusura Tecnologie di Sviluppo per il WEB 38

39 Commenti in CSS Per indicare un commento in un foglio di stile esterno si usa la stessa sintassi del C Inizio commento /* Fine commento */ Per indicare un commento in un foglio di stile interno si usa la stessa sintassi dell HTML Inizio commento  Tecnologie di Sviluppo per il WEB 39

40 Nascondere lo stile ai vecchi browser <STYLE> <!--. definizione di stili. -- > </STYLE> I vecchi browsers che non conoscono il tag STYLE, non mostreranno le definizioni, i nuovi browser invece capiscono ed ignorano il commento... Tecnologie di Sviluppo per il WEB 40

41 HTML document tree HTML HEAD BODY P P B EM Tecnologie di Sviluppo per il WEB 41

42 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 Tecnologie di Sviluppo per il WEB 42

43 Ereditarietà 2 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 Internal Inline L eredità fluisce in questo verso Tecnologie di Sviluppo per il WEB 43

44 Esempio HTML HEAD BODY 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 P EM P A Tecnologie di Sviluppo per il WEB 44

45 Stili in conflitto: origine 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 Tecnologie di Sviluppo per il WEB 45

46 User defined setting 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. Tecnologie di Sviluppo per il WEB 46

47 Tecnologie di Sviluppo per il WEB 47

48 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> ed anche qui. </p> Tecnologie di Sviluppo per il WEB 48

49 Note 2 regole multiple: Origine 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 Tecnologie di Sviluppo per il WEB 49

50 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 P { font-size: 18pt!important } * { font-size: 14pt } Tecnologie di Sviluppo per il WEB 50

51 Priorità delle dichiarazioni 1)user agent declarations 2)normal declarations in user style sheets 3)normal declarations in author style sheets 4)important declarations in user style sheets 5)important declarations in author style sheets Tecnologie di Sviluppo per il WEB 51

52 Algoritmo 1)Per una data proprietà, trova tutte le dichiarazioni che si applicano ad uno specifico elemento. 2)Ordina le dichiarazioni in accordo al loro livello di importanza e di origine. 1) Slide precedente (normale/importante) 3)Ordina le dichiarazioni con lo stesso livello di importanza ed origine per specificità del selettore (v. dopo) 4)...se ancora in conflitto: l'ultimo vince! Tecnologie di Sviluppo per il WEB 52