Fogli di stile a cascata (CSS) November 25, 2010 1 Definizione I fogli di stile a cascata (Cascading Style Sheets, CSS) sono una delle tecnologie introdotte dal W3C per la formattazione dei documenti HTML, impostando: tipi di carattere (font), sfondi, colori, layout, etc.... Una singola informazione di formattazione è detta stile. Gli stili permettono di gestire globalmente il formato delle pagine, e sono una valida alternativa all impostazione degli stili mediante gli attributi dei tag. Gli stili sono definiti da una sequenza di coppie {nome : valore;... ; nome : valore; } dove il nome si riferisce a una proprietà di stile ed è una parola in minuscolo o più parole in minuscolo separate da un trattino (-). Una definizione di stile si applica ad un insieme di marcatori determinato da un espressione detta selettore CSS che viene premessa a una lista di stili. Ecco due esempi: p {color : blue; font family : times; font style : italic; } h2 {font weight : bold; text align : center; }. Il primo applica a tutti i paragrafi il colore blu, il font times e il corsivo, mentre il secondo centra nella pagina i titoli h2 a cui è anche applicato il grassetto. Gli stili CSS si dicono a cascata perché lo stile di una pagina web è stabilito nell ordine da: 1. le definizioni dell autore della pagina, 2. le impostazioni e preferenze definite dall utente, 3. le impostazioni di default del browser. Gli stili si applicano secondo tre modalità: 1
stili in linea stili a livello di documento stili esterni 1.1 Stili in linea Gli stili in linea determinano il formato di un singolo tag e sono definiti usando l attributo style all interno del marcatore. Nel tag <h1 style= font-family:times ; font-style:italic; > Titolone </h1> il font e lo stile dei caratteri è determinato dall attributo style. 1.2 Stili a livello di documento Gli stili a livello di documento stabiliscono il formato globale dei tag HTML di un documento e si definiscono all interno di una coppia di tag <style> nell intestazione del documento: e.g., il testo <head>... <style> h1 {color: red; font-family: Arial,Helvetica, sans-serif; font-weight:bold; font-size: 24pt;} h2 {color: black; font-family: serif; font-size: 18pt; font-style: italic} </style>... </head> definisce lo stile dei tag h1 e h2 del documento. 1.3 Definizioni di stile esterne Mentre le due modalità precedenti si impiegano per applicare uno stile a un singolo documento, per applicare gli stessi stili in più documenti, si usano i fogli di stile esterni, scrivendo le impostazioni di stile in un file a parte, con estensione.css. Ogni documento HTML che vuole utilizzare le impostazioni definite nel file deve contenere nella propria intestazione il marcatore link: <link rel = stylesheet type= text/css href= miostile.css > </link> Nel file miostile.css sono contenuti gli stili CSS, omettendo i tag <link>. 2
2 I selettori, l attributo class e l attributo id Analizziamo ora altri tipi di selettori CSS. Ad esempio: 1. si può definire uno stesso stile per più tipi di marcatori, 2. si possono definire più stili applicabili a uno stesso tipo di marcatore, 3. si possono definire degli stili da applicare a qualsiasi marcatore, 4. si può definire uno stile a uno specifico marcatore. Il primo caso si risolve semplicemente raggruppando i tag. La dichiarazione h2,h3 {color: black; font-family: serif; font-size: 18pt; font-style: italic} assegna ai tag h2 e h3 lo stesso stile. Il secondo e il terzo caso si risolvono usando l attributo class dei tag. I tag con un uguale valore dell attributo class ricevono lo stesso stile. Per definire più stili applicabili a uno stesso tipo di marcatore si impiegano le classi regolari: <style> p.level1 {color: red; font-family: serif; font-size: 24pt;} p.level2 {color: black; font-family: sans serif; font-size: 18pt; font-style: italic ; text-align: justify; } </style> definisce le classi level1 e level2 per il tag <p>. Successivamente, si stabilisce a quale classe appartiene un tag <p>: <body> <p class= level1 > questo è il livello 1 </p> <p class= level2 > questo è il livello 2 </p> </body> Al primo paragrafo è applicato lo stile level1 mentre al secondo lo stile level2. Invece una classe generica non è associata ad alcun tag specifico e pertanto si può applicare a marcatori diversi: e.g. definiamo la classe highlight : <style>.highlight {color: yellow; font-family: Arial,sans-serif; background: blue;} </style> La classe highlight si usa in marcatori diversi per applicare lo stesso stile (sono scritte in giallo su sfondo blu con il font Arial) a un titolo h1 e a un paragrafo. 3
<h1 class= highlight > Titolone evidenziato </h1> <p>questo codice contiene due esempi di classe generica. Il primo, nel titolo.</p> <p class= highlight >Il secondo, in questo paragrafo.</p> Il quarto caso invece fa uso dell attributo id: #granderigaverde {color: green; font-family: arial; font-size: 24 pt;} L identificatore granderigaverde diventa il nome di un unico tag a cui si applica lo stile: <p id= granderigaverde > lo stile granderigaverde si applica solo a questa riga. </p> Il marcatore id consente di identificare i tag HTML; infatti, marcatori distinti devono avere (se definiti) valori distinti dell attributo id. Tutti i marcatori dispongono dell attributo id e dell attributo class. 3 I tag SPAN e DIV Per applicare lo stesso stile a più marcatori, questi vengono inseriti entro il tag <span>... </span> oppure entro il tag <div>... </div> Questi tag funzionano come contenitori di altri marcatori a cui applicare uno stile uniforme. La differenza tra i due marcatori è che il secondo provoca un ritorno a capo automatico. Così, gli elementi seguenti si troveranno sotto il contenuto del tag div. Lo stile da applicare è definito solo per il marcatore contenitore (span o div). Il codice seguente applica il colore verde ai tag h3 e p: <span style= color: green > <h3>introduzione</h3> <p>prima riga </p> </span> 4 Ereditarietà delle impostazioni di stile Un tag può acquisire automaticamente (ereditare) lo stile dei tag antenati, ovvero quei tag che lo contengono (ad es. un tag <li> può ereditare le proprietà di stile del tag <ul> in cui è contenuto). Questo non vale in generale, ma solo per certe proprietà di stile.per sapere se e quando l ereditarietà si applica occorre consultare la documentazione. 4
5 Alcune proprietà di stile significative Di seguito sono elencate alcune delle proprietà di stile più comuni. Nei fogli di stile, una lunghezza può essere espressa in: pixel, px; punti, pt; pica, pc; pollici, in; millimetri, mm; centimetri, cm; em square, cioè l altezza del font in uso, em; ex height, cioè l altezza della lettera x del font corrente, ex; oppure tramite percentuali, ad es. 50%, riferite all elemento contenitore. Le ultime tre unità di misura sono relative, perché dipendono da proprietà di alcuni elementi della pagina, mentre le altre unità di misura sono assolute. L uso di unità di misura relative garantisce il mantenimento delle proporzioni degli elementi di una pagina quando si ridimensioni la finestra del browser o si ingrandisce/riduce il contenuto della pagina. Visualizzazione display Colore e sfondo color descrive la modalità di visualizzazione. Può assumere i valori inline : l elemento è visualizzato sulla linea senza ritorni a capo; block : l elemento è preceduto e seguito da un ritorno a capo; none: l elemento non è visualizzato; altri valori per tag specifici. descrive il colore di un elemento. Il valore si esprime con un nome, ad es. green (solo per 16 colori: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow); in esadecimale, ad es. #00ff00; in decimale, ad es. rgb(0,255,0). L attributo può assumere anche il valore: inherit : l elemento eredita il colore dell elemento contenitore; background-color descrive il colore di sfondo di un elemento. La specifica del colore è la stessa della proprietà color (nome, esadecimale, decimale, inherit). background-image descrive l URL di un immagine usata come texture per lo sfondo di un elemento. La sintassi dell URL è url(percorso), ad es. url(mypict.jpg). background-repeat descrive la modalità di ripetizione dell immagine di sfondo. L attributo può assumere i valori: repeat : l immagine è ripetuta sia in orizzontale che in verticale; 5
repeat-x : l immagine è ripetuta solo in orizzontale ; repeat-y : l immagine è ripetuta solo in verticale ; no-repeat : l immagine non è ripetuta. background-position descrive la posizione di partenza dell immagine di sfondo. L attributo può assumere una serie di valori predefiniti oppure le coordinate di un punto specifico. Font font-style descrive le possibili varianti di corsivo. L attributo può assumere i valori normal, italic, oblique. font-variant abilita l uso del maiuscoletto. L attributo può assumere i valori normal e small-caps. font-weight descrive le possibili varianti di grassetto. L attributo può assumere i valori lighter, normal, bold, bolder, e i multipli di 100 compresi tra 100 e 900. font-size descrive la dimensione dei caratteri. L attributo può assumere come valore una lunghezza espressa in una qualsiasi unità di misura, oppure uno dei valori xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger. line-height descrive la posizione di partenza dell immagine di sfondo. L attributo può assumere una serie di valori predefiniti oppure le coordinate di un punto specifico. font-family descrive il font usato. L attributo può assumere una lista di nomi di font separati da virgole. I nomi di font possono essere nomi di font reali oppure nomi di font generici (detti anche da alcuni logici) : serif, sans-serif, cursive, fantasy, monospace. A un font generico corrisponde un font determinato dal browser o dall utente con caratteristiche simili a quelle del font generico. Ad esempio, font-family: Arial, Helvetica, sans-serif stabilisce che il font da utilizzare è Arial; se questo è assente, Helvetica; oppure, in caso di un ulteriore assenza, il font corrispondente al font generico sans-serif. L esempio appena visto indica una pratica molto comune per risolvere il problema della scelta di un font che sia visualizzabile, se non allo stesso modo, in modo accettabile su un qualsiasi sistema. font descrive tutte le proprietà precedentemente elencate. L attributo può assumere come valore una sequenza di valori delle proprietà sopra elencate, separate da spazi. 6
Testo letter-spacing descrive la spaziatura dei caratteri. L attributo può assumere come valore una lunghezza espressa in una qualsiasi unità di misura, oppure il valore normal. word-spacing descrive la spaziatura delle parole. L attributo può assumere come valore una lunghezza espressa in una qualsiasi unità di misura, oppure il valore normal. text-align descrive l allineamento del testo. L attributo può assumere i valori left,right,center,justify. text-decoration descrive la decorazione del testo. L attributo può assumere i valori none,underline,overline,line-through, blink. text-transform descrive l uso del maiuscolo e del minuscolo. L attributo può assumere i valori capitalize,uppercase,lowercase,none. Box model Ogni elemento (X)HTML occupa un area rettangolare detta box, costituita da: un area più esterna, detta margine, che gira attorno al confine esterno del box e lo separa dai box adiacenti; un area più interna detta bordo, un area di separazione tra il bordo e l area occupata dal contenuto dell elemento detta padding, nella zona più interna, il contenuto dell elemento. margin-top, margin-right, margin-bottom, margin-left descrivono le dimensioni dei quattro lati del margine. L attributo può assumere come valore una lunghezza espressa in una qualsiasi unità di misura. Si può anche assegnare un singolo valore alla proprietà margin per assegnarlo a tutti i quattro lati. padding-top, padding-right, padding-bottom, padding-left descrivono le dimensioni dei quattro lati del padding. L attributo può assumere come valore una lunghezza espressa in una qualsiasi unità di misura. Si può anche assegnare un singolo valore alla proprietà padding per assegnarlo a tutti i quattro lati. width, height descrivono le dimensioni del contenuto. L attributo assume come valore una lunghezza espressa in una qualsiasi unità di misura. 7
border-width descrive lo spessore del bordo. L attributo può assumere come valore una lunghezza espressa in una qualsiasi unità di misura o uno dei valori thin, medium, thick. Si possono anche impostare separatamente gli spessori dei quattro lati con le proprietà border-top-width, border-right-width, border-bottom-width, border-left-width. border-style descrive lo stile del bordo. L attributo può assumere uno dei valori none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset. Si possono anche impostare separatamente gli stili dei quattro lati con le proprietà border-top-style, border-right-style, border-bottom-style, border-left-style. border-color descrive il colore del bordo. L attributo può assumere uno dei valori none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset. Si possono anche impostare separatamente gli stili dei quattro lati con le proprietà border-top-style, border-right-style, border-bottom-style, border-left-style. border Posizionamento position References descrive l insieme delle proprietà del bordo, così come avviene per la proprietà font. descrive la regola di posizionamento di un elemento. L attributo può assumere i valori static: è il valore predefinito. Gli elementi sono posizionati in base al loro ordine nel codice (X)HTML e alle loro dimensioni; relative: in questo caso, un elemento è spostato rispetto alla posizione che avrebbe nel caso in cui il valore di position fosse static. Lo spostamento è determinato dalle proprietà top, left, right, bottom che possono assumere come valore una lunghezza oppure il valore auto; absolute : la posizione dell elemento è determinata dai valori delle proprietà top, left, right, bottom che esprimono la distanza rispetto al primo elemento contenitore con valore di position uguale a static. In caso di assenza di un tale elemento, le distanze si riferiscono ai margini del documento. fixed : la posizione dell elemento è determinata dai valori delle proprietà top, left, right, bottom che esprimono la distanza rispetto alla finestra del browser. L elemento apparirà sempre nella stessa posizione, anche quando si scorre la pagina. [1] V. Della Mea, L. Di Gaspero, I. Scagnetto, Programmazione web lato server, Apogeo, 2007. 8
[2] D. Raggett, Adding a touch of style, http://www.w3.org/markup/guide/style.html 9