CSS 1 Introduzione a CSS: Cascading Style Sheets CSS - Cascading Style Sheets! Lo stile definisce le regole che guidano il browser nella visualizzazione del contenuto di un tag suggerisce come posizionare, formattare e visualizzare i vari elementi della pagina! 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 esterno con estensione.css) Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 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 Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 3 Specifica dello stile! I tag servono per specificare la struttura (semantica) di un documento! La definizione dello stile consiste nell assegnamento di valori a un insieme di proprietà! Lo stile suggerisce al broswer come rendere (disegnare) l elemento a cui lo stile si applica! CSS permette agli autori di siti WEB di separare l aspetto di pagine web dal loro contenuto Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 4
Separare il contenuto dall aspetto informazione contenuto aspetto documento HTML collegato a documento CSS browser utente Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 5 Come specificare uno stile?! Esistono tre modi per specificare uno stile All interno di elementi HTML Inline Style All interno del tag style Internal Style Sheet In un file esterno (incluso con link) External Style Sheet Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 6
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 Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 7 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> Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 8
Elementi di un foglio di stile 1! Ogni foglio di stile consiste di una serie di istruzioni. Un istruzione fa due cose: Identifica gli elementi (p, body, ul, ) di un documento HTML che lo includono Suggerisce al browser come mostrare il contenuto di questi elementi! La parte dell istruzione che identifica gli elementi è detto selettore. Il selettore seleziona gli elementi di una pagina a cui applicare l istruzione. Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 9 Elementi di un foglio di stile 2! La parte dell istruzione che suggerisce al browser come gli elementi dovrebbero essere disegnati (mostrati all utente) è detta dichiarazione! Una dichiarazione può contenere un gran numero di proprietà, le parti individuali di stile da applicare all elemento selezionato. Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 10
Sintassi delle istruzioni CSS 1 1. Ogni istruzione (statement) deve avere un selettore ed una dichiarazione. La dichiarazione viene subito dopo il selettore ed è contenuta da 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. Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 11 Sintassi delle istruzioni CSS 2 4. Se una proprietà può assumere più valori contemporaneamente (e.g., 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 (e.g., 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 è necessario 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 Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 12
Anatomia di un istruzione selettore dichiarazione body { parentesi graffa di apertura font-family: Verdana, Minion Web, sans-serif; font-size: 1em; text-align: justify; valore nomi di proprietà } parentesi graffa di chiusura Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 13 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 di HTML Inizio commento <!-- Fine commento --> Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 14
Internal Style Sheet! Lo stile è incorporato nel documento HTML. Le definizioni vanno all interno del tag style In genere contenuto nel tag head! L elemento style permette di definere regole CSS all interno del documento! Attributi locali type media scoped <style type="text/css"> p { background-color: grey; color: white; } </style> Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 15 <!DOCTYPE HTML> <html> <head> <title>elemento style</title> <style type="text/css"> p { } background-color: grey; color: white; </style> </head> <body> <p> Paragrafo con stile </p> </body> </html> Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 16
Attributo locale media di style! Specifica il dispositivo per cui lo stile è stato progettato. Valori predefiniti: all (default) aural braille handheld projection print screen tty tv Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 17 <style media="screen" type="text/css"> a { } </style> background-color: grey; color: white; padding: 0.5em; <style media="print" type="text/css" > </style> a{ } color:red; font-weight:bold; font-style:italic Esempio Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 18
<body> <p> Ecco alcuni link utili per il corso: </p> </body> <a href="http://caprera.dia.unisa.it/tsw/"> Sito del corso</a> <a href="media.html">questa pagina</a> Anteprima di stampa Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 19 Specificità attributo media <style media="screen AND (max-width:500px)" type="text/css"> </style> a { background-color: grey; } color: white; padding: 0.5em; Se lo schermo è grande al più 500 pixel <style media="screen AND (min-width:500px)" type="text/css"> </style> a {color:red; font-style:italic} Se lo schermo è grande almeno 500 pixel Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 20
Cosa possiamo controllare! width, max-widht, min-width! height, max-height, min-height! device-widht, max-device-widht, min-device-width! device-height, max-device-height, min-device-height! resolution, max-resolution, min-resolution! orientation Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 21 Applicazione dello stile > 500px < 500px Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 22
Attributo locale scoped di style! booleano! Non supportato (CONTROLLARE)! Possiamo usare style in qualsiasi punto del documento. Se aggiungiamo scoped, allora lo stile vale nell elemento dove abbiamo usato style ed in tutti gli elementi in esso contenuti Se scoped non è presente è come se avessimo dichiarato lo stile nell elemento head Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 23 External Style Sheet! Sono definiti in un altro documento con estensione.css! Esistono due modi per includere uno stile esterno Con il tag link Attraverso la direttiva (@rule) @import Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 24
Inclusione attraverso link! Ricordiamo la sintassi di link <link rel="stylesheet" type="text/css" href="nomefilestile.css" media=".. " > L attributo media ha lo stesso significato dell attributo media dell elemento style Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 25 La regola @import 1! @import può essere usata come segue: @import url(http://www.unisa.it/stili/stile1.css); @import "http://www.unisa.it/stili/stile1.css";! Un URL può essere sia relativo (locale al server web) sia assoluto (come negli esempi precedenti)! @import deve essere inserita all inizio di un foglio di stile esterno Funziona anche con i fogli di stile interni Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 26
La regola @import 2! Lo stile importato è utilizzato in congiunzione al corrente foglio di stile! Un foglio di stile con una regola discende a cascata dal foglio di stile importato Se ci sono regole in comune tra i due fogli di stile, allora le regole specificate nel foglio di stile corrente sovrascrivono le regole del foglio di stile importato Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 27 @import @import secondo.css. regole CSS. primo.css Le regole in secondo.css presenti anche in primo.css sono sovrascritte (o fuse insieme) da (a) quelle in primo.css Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 28
<!DOCTYPE HTML> <html> <head> <titleimportedmedia</title> <meta charset="utf-8"/> <style media="screen" type="text/css"> @import "imported.css"; p { } </style> </head> <body> color: red; <p> Un esempio di stile importato </p> </body> </html> imported.css p { background-color: blue; color: white; } Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 29 Note su @import! Possiamo avere più regole @import una di seguito all altra! In genere si preferisce usare l elemento link per includere fogli di stile esterni Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 30
Browser style (user agent style)! Ogni browser ha un proprio foglio di stile Insieme di regole che vengono applicate di default quando nessun altro stile è stato definito! Ad esempio Il contenuto del tag p è allineato a sinistra Il tipo di carattere usato per il testo è Times New Roman Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 31 Stile utente (user defined setting)! Ogni utente può definire uno stile da applicare ai documenti HTML che scarica dalla rete Ogni browser ha il suo modo per settare tale stile Chrome crea un file nella cartella del profilo dell utente chiamato Default\User StyleSheets\Custom.css Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 32
Con Safari! Si sceglie Preferenze dal menu Safari, poi Avanzate e poi Foglio di stile Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 33 Quale stile vale per l elemento?! Lo stile da associare ad un elemento dipende dal posto dove lo stile è stato definito da un eventuale stile definito negli elementi che contengono l elemento considerato Gli antenati dell elemento! Dobbiamo considerare L effetto a cascata L ereditarietà Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 34
Priorità degli stili Stile del browser Stile dell utente Stile dell autore Default Browser Settings User-Defined Settings External Styles Internal Styles Inline Styles HTML Tag Attributes Maggiore priorità Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 35 Priorità e stili! Il valore di una proprietà definita in un stile a priorità inferiore viene sovrascritto da un valore per quella proprietà definita in uno stile a priorità superiore <head> <style type="text/css"> h2 { color: red; } </style> </head> <body> <h2 style='color:blue;'> Di che colore è l'intestazione?</h2> <h2>e questa intestazione?<h2> </body> Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 36
La regola può essere infranta! Usare!important Quando una regola (tipicamente una regola utente) è seguita da!important, essa sopravanza un analoga regola di senso diverso dell'autore della pagina! Ad esempio P { font-size: 18pt!important ; } imporrà un font di 18 punti anche se in uno stile a priorità maggiore è indicata una dimensione differente Se si usa nuovamente!important. Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 37 <!DOCTYPE HTML> <html> <head> <title>!important</title> <style type="text/css"> h2 { color: red!important ; } </style> </head> <body> <h2 style='color:blue;'> Di che colore è l'intestazione?</h2> <h2>e questa intestazione?<h2> </body> </html> Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 38
Effetto a cascata 1! Tutte le proprietà definite in uno stile a priorità inferiore sono valide anche negli stili a priorità superiore A meno di ridefinizioni <head> <style type="text/css"> h2 { color: red; font-family: Arial; } </style> </head> <body> <h2 STYLE='color:blue;'> Di che colore è l'intestazione?</h2> <h2>e questa intestazione?<h2> </body> Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 39 Effetto a cascata 2 Browser User External L effetto a cascata fluisce in questo verso Internal Inline Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 40
Ereditarietà! Se si applica uno stile a un elemento, allora tale stile sarà ereditato automaticamente dagli elementi in esso contenuti! Se non specificato diversamente, le caratteristiche di un elemento rimangono Quelle predefinite (stile del browser o dell utente) Quelle definite in uno stile ereditato Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 41 Note 1! Se non viene specificata una proprietà, CSS assume un valore di default! A parte pochi casi, il valore di default è sempre "inherit". Questo significa che la proprietà assume lo stesso valore che ha nell elemento genitore dell'elemento in questione! Ad esempio il contenuto dell'elemento em sarà colorato di rosso <p style="color:red;"> Qui il testo è <em>in corsivo</em> e qui no. </p> Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 42
Note 2! Tra i valori non ereditati ci sono: display è sempre il valore naturale dell'elemento block (block level) per p, h1, div, inline (text level) per b, i, a, span, background sempre transparent Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 43 Albero del documento (document tree)! Possiamo rappresentare un qualsiasi documento HTML attraverso un albero! Gli elementi (tag) sono i nodi dell albero! In questo modo possiamo mettere in relazione i tag di un documento HTML come mettiamo in relazione nodi di un albero Figlio, discendente, antenato, fratello,! Questa rappresentazione ci sarà utile in seguito quando analizzeremo i selettori Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 44
Document tree In questo esempio, il testo contenuto in b e quello contenuto in em ereditano le head impostazioni dell elemento p che contiene gli elementi em e b. L elemento p, a sua volta, eredita le impostazioni del tag body html b p body em p Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 45 Stili in conflitto! Può succedere che ad uno stesso elemento potrebbero essere applicati stili differenti definiti allo stesso livello (internal, external) Gli stili sono in conflitto! Quando gli stili sono in conflitto, allora sarà applicato quello con maggiore specificità! Esiste un algoritmo per calcolare la specificità! A parità di specificità si applicano tutti gli stili, l ultimo definito nel foglio di stile sovrascrive le proprietà comuni! Maggiori dettagli sull algoritmo per il calcolo della specificità quando analizzeremo i selettori Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 46
Esempio 1 <style type="text/css"> h2.bianco { color: white; } h2 { color: red; background: grey; }.classe1 { color: red; background: grey; }.classe2 { color: white; } </style>specificita </head> <body> <h2 class="bianco">quale stile applichiamo?<h2> <h2 class="classe1 classe2">quale stile applichiamo?<h2> <h2 class="classe2 classe1">quale stile applichiamo?<h2> </body> Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 47 Esempio 2 <style type="text/css"> h2.bianco { color: white; } h2 { color:red; background: grey; } </style>.classe2 { color: white; }.classe1 { color: red; background: grey; } </head> <body> <h2 class="bianco">quale stile applichiamo?<h2> <h2 class="classe1 classe2">quale stile applichiamo?<h2> <h2 class="classe2 classe1">quale stile applichiamo?<h2> </body> Prof. Carlo Blundo Tecnologie di Sviluppo per il WEB 48