LEZIONE 6 Fogli di stile CSS Questa lezione affronta il complicato argomento relativo ai fogli di stile CSS. Saranno analizzati molti dei concetti fondamentali nelle pagine che seguono e, nella prossima lezione, andremo ad analizzare l'interazione tra i fogli di stile e le pagine HTML. FOGLI DI STILE CSS CSS è un acronimo che significa Cascading Style Sheets ovvero Fogli di stile a cascata. Lo strumento designato per arricchire l'aspetto visuale ed estetico di una pagina WEB sono appunto i CSS che rappresentano uno dei fondamentali linguaggi standard del W3C. La prima specifica ufficiale risale al dicembre del 1996 e da allora questa tecnologia è stata sviluppata (si è arrivati alla versione 2 dei CSS ed è in lavorazione la versione 3) e ha trovato molteplici applicazioni nel campo web, soprattutto nell'Accessibilità dei siti. La funzione essenziale dei fogli di stile è la possibilità di applicare ad un intero sito web, in modo completamente separato dai contenuti, una "formattazione" grafica. Questo significa che se un attributo cromatico, ad esempio di un titolo, risulta essere inadatto al sito, non sarà necessario aprire e modificare ogni pagina che contiene l'elemento da modificare. Basterà intervenire sul foglio di stile CSS, ed una sola volta, perché la modifica si propaghi ovunque. Su questo concetto fondamentale dei fogli di stile si tornerà più specificatamente in un secondo momento. Attraverso i fogli di stile CSS possono essere gestiti: * il colore degli elementi * la tipologia di carattere * l'interlinea del testo * l'aspetto dei link * la spaziatura tra lettere e parole * stili diversi per titoli e paragrafi * l'indentatura di un testo * l'allineamento o la giustificazione del testo * la distanza degli elementi * la distanza degli elementi dal bordo della pagina o della cella * i margini * i bordi colorati o a rilievo per le tabelle * gli sfondi della pagina o delle celle * eccetera I fogli di stile sono inseriti in una pagina HTML con tre modalità: * Css in linea * Css incorporato in testa alla singola pagina * Css esterno collegato ad ogni pagina IN LINEA La dichiarazione di stile è specificata ed agisce su un tag html specifico. Soluzione per chi vuole limitarsi a modificare gli stili di un piccolo numero di tag di un documento html applicando direttamente ad essi le dichiarazioni desiderate. Ha una sintassi leggermente diversa da quella esaminata sino ad ora e non utilizza le parentesi graffe:

INCORPORATO Le dichiarazioni di stile vengono inserite all'interno dell'HEAD di un singolo documento HTML. Esse valgono quindi per l'intero documento e non solo per tag specifici. L'inserimento avviene con le seguienti istruzioni: ESTERNO Le dichiarazioni sono inserite in file ascii distinti, con estensione .css collegabili a più documenti HTML. Ogni file HTML dovrà essere linkato al foglio di stile specifico con, all'interno dell'HEAD, la seguente istruzione: Per ottenere il massimo della funzionalità da un foglio CSS la soluzione più idonea risulta essere il collegamento ad un file esterno comune a tutte le pagine. Tali file sono di "testo" e semplicemente editabili con il "Blocco Note" o "TextEdit" assegnando al file l'estensione .css Esempio Css incluso Attenzione alla sintassi: nell'attribuire attributi tramite la definizione di una classe scrivere il un nome preceduto da un punto (.testoformattato) Esempio Css esterno L'elemento presenta una serie di attributi di cui è importante spiegare significato e funzione: 1. rel: descrive il tipo di relazione tra il documento e il file collegato. E' obbligatorio. Per i CSS due sono i valori possibili: stylesheet ealternate stylesheet 2. href: serve a definire l'URL assoluto o relativo del foglio di stile. E' obbligatorio. 3. type: identifica il tipo di dati da collegare. Per i CSS l'unico valore possibile è text/css. L'attributo è obbligatorio. I fogli di stile possono essere aggiunti a qualsiasi TAG, per applicare gli attributi ad un elemento la sintassi risulta ad esempio:

Esempio di testo gestito tramite fogli di stile

I fogli di stile possono ridefinire qualsiasi TAG, per modificare gli attributi, ad esempio, del TAG H1 va definito nel file css: H1 { font-family: Arial, Helvetica, sans-serif; font-size: 2em; color: #FF0000; } Attenzione alla sintassi: nel ridefinire un TAG scrivere il tag senza precederlo da un punto. Se vengono ridefiniti gli attributi di un TAG non servirà aggiungere a questo la dizione class="nomeclasse" in quanto l'utilizzo dello stesso TAG nella pagina HTML nel determina l'attribuzione di stile. STRUTTURA dei CSS Una regola di stile si compone di due parti: un Selettore, e almeno una Dichiarazione, racchiusa fra due parentesi graffe: H1 { color: red; } /*selettore*/ /*dichiarazione*/ Il selettore specifica le parti del documento HTML alle quali va applicato lo stile. La dichiarazione rappresenta l'istanza che realizzerà sulle parti del documento specificate dal selettore la modifica stilistica desiderata. PROPIETÀ E VALORI Una dichiarazione a sua volta si compone di una Proprietà e almeno un Valore separati da " : " { color: red; } /*proprietà*/ /*valore*/ Le Proprietà sono raggruppabili in categorie: * per font (Esemp: Color; Font-size, etc.) * per testo (Esemp: Text-align, Line-height, etc.) * per i riquadri (Esemp: Border; Padding; Margin-left; etc.) * per lo sfondo (Esemp: Background; Background-image, etc.) * di classificazione (Esemp: List-style-type, etc.) I Valori ammessi sono 5: * parole chiave (valori espliciti tipo: solid, double, etc.); * valori di lunghezza : o assoluti: pollici, centimetri, millimetri, punti, pica; o relativi: Em-height, X-height, pixel; o percentuali (calcolate in relazione ad un altro valore); * colori (in formato esadecimale o l'equivalente verbale dei 16 colori predefiniti); * URL (usare preferibilmente URL assoluti e non relativi). Le Classi nei CSS. Nei CSS esistono le Classi e le Pseudo-Classi. Quando formattiamo un documento applicando un CSS sia questo Integrato o Esterno, ci troviamo davanti ad una perfetta uniformità nei contenuti della Pagina, dovuta agli attributi che abbiamo impostato per i vari Tag durante la realizzazione del CSS stesso. Se però desideriamo applicare delle particolari varianti a quel paragrafo, a quella tabella, oppure a quel Link, abbiamo due possibilità: Optare per il discorso fatto per i CSS In Linea, oppure utilizzare delle Classi di CSS. In altre parole, volendo cambiare l'aspetto solo di un paragrafo, possiamo: 1. Inserire tutti gli attributi e i valori della nuova formattazione nel Tag

; 2. Oppure creare delle varianti nel File (in caso di CSS Esterni) o nella dichiarazione (in caso di CSS Integrati), e richiamarle nel Tag

ogni volta che si desidera, inserendo semplicemente la parola class="miaclasse". In pratica dobbiamo creare delle varianti di formattazione agli stessi Tag già formattati nel CSS, assegnargli un nome, quindi richiamarli ogni volta che desideriamo formattare quel dato Tag, in modo diverso da tutti gli altri Tag presenti nella Pagina. Allora perché creare delle varianti nel CSS? A questo punto tanto vale inserire direttamente nel Tag prescelto il tipo di variante. Torniamo al discorso Originale. Se la variante è rappresentata da un solo attributo, allora non vale la pena creare appositamente una Classe per esso, ma se gli attributi sono più di uno, quanto tempo vi occorrerebbe a digitarli tutti ogni volta che desiderate formattare un Tag in modo diverso da tutti gli altri Tag dello stesso tipo? E quanto peserà alla fine la Pagina contenente tutto quel codice inutile? Con le Classi, lo farete una sola volta, e ogni volta che desidererete applicare la diversa formattazione ad un Tag, dovrete semplicemente richiamare la Classe specifica. Potete creare per lo stesso Tag, tutte le Classi che desiderate, assegnare ad ognuna un nome diverso, e richiamarle quando e dove volete nel documento. Una volta deciso il Tag a cui assegnare la nuova formattazione, specifichiamo la Classe assegnandogli un nome preceduto da un punto, apriamo la parentesi Graffa, digitiamo quindi tutta la formattazione che desideriamo, chiudiamo la parentesi Graffa. Esempio .miaclasse { text-align: center; font-family: Comic Sans MS; color: red } Per richiamare la suddetta Classe, ci comporteremo di conseguenza:

L'esempio sopra si riferisce alla formattazione del testo in un Paragrafo. Tutti i Tag

in cui verrà inserita la Classe, subiranno gli effetti della nuova formattazione. Una volta creata la Classe, possiamo inserirla all'interno della dichiarazione nella sezione se si tratta di CSS Integrato, oppure aggiungerla al File nel caso sia un CSS Esterno. ATTRIBUTI DEL TESTO text-align center | left | right | justify Allineamento del testo, valori possibili: centrato , sinistra, destra , giustificato. P {text-align: center;} DIV {text-align: left;} text-decoration overline | underline | line-through | none Decorazione del testo, valori possibili: overline = sopralineato, underline = sottolineato, line-through = sbarrato, none = nessuno. E' anche possibile combinarne più di uno, per esempio inserendo sia underline che overline. NS non supporta underline. None lo si adopera in particolar modo con i link in quanto toglie la fastidiosa sottolineatura che altrimenti avrebbero per default. P {text-decoration: none;} h1 {text-decoration: underline;} text-indent lunghezza | percentuale Rientro della prima riga di un blocco. P {text-indent: 1,2em;} DIV {text-indent: 20%;} text-transform capitalize | uppercase | lowercase | none Trasformazione in maiuscolo o minuscolo dell'interno blocco di testo (uppercase lowercase). Capitalize trasforma in maiuscola la prima lettera di ogni parola. P {text-transform: lowercase;} h2 {text-transform: capitalize;} line-height normal | numero | lunghezza | percentuale Altezza della riga del testo, valori possibili : normal , numero , lunghezza , percentuale. Con il valore normal il testo non avrà alcuna variazione. P {line-height: 3em;} DIV {line-height: 50%;} letter-spacing numero Spazio fra le lettere che compongono il testo. P {letter-spacing: 1em;} DIV {letter-spacing: 20%;} vertical-align baseline | sub | super | top | middle | bottom | text-top | text-bottom Allineamento verticale del testo rispetto ad un riferimento assoluto ATTRIBUTI DEL CARATTERE (font) font-family famiglia1 famiglia2 famiglia3 Si possono elencare più famiglie di caratteri per dare la possibilità al browser di selezionare quella presente sulla macchina del visitatore. Si tenterà di visualizzare la prima specificata per poi passare a quelle successive nel caso in cui non fossero presenti quelle precedenti. A questo proposito è opportuno descrivere le possibili alternative partendo proprio da quelle più rare. Le famiglie si separano da uno spazio vuoto o da una virgola e nel caso in cui il nome della famiglia fosse composto da più di una sola parola, per esempio: MS Sans Serif, questo dovrà essere racchiuso fra virgolete (doppie o singole) "MS Sans Serif". P {font-family: verdana,arial,geneva;} DIV {font-family: "MS Sans Serif", verdana, arial;} B {font-family: "MS Sans Serif" verdana arial;} font-size lunghezza | dim. assoluta | dim. relativa | percentuale Si possono esprimere le dimensioni del font facenti riferimento a uno dei quattro possibili attributi. P {font-size: 0.7em;} I {font-size: larger;} font-style normal | italic | oblique Si puo eseguire il rendering dei caratteri in corsivo. P {font-style: italic;} H1 {font-style: normal;} font-variant normal | small-caps Simile a font-style assegna tutte maiuscole grandi per le lettere maiuscole e maiuscole piccole per le lettere minuscole. Normal per rimuovere il tutto. P {font-variant: small-caps;} H1 {font-variant: normal;} font-weight bold | bolder | lighter | normal Per impostare lo spessore del testo. P {font-weight: bold;} ATTRIBUTI CROMATICI Color valore Questo attributo serve per impostare il colore. P {color: red;} DIV {color: #990099;} background-color valore Questo attributo definisce il colore di sfondo di uno style e può essere adoperato indipendentemente dal colore di sfondo del testo. P {background-color: yellow} DIV {background-color: #33ccff} background-image url (immagine.gif) Questo attributo definisce l'immagine di sfondo per un elemento e può essere adoperato indipendentemente dall'immagine e dal colore dello sfondo assegnato alla pagina. P {background-image : url(file:immagine.gif);} DIV {background-image: url (logo.gif);} Se associato al tag body diventa lo sfondo di tutta la pagina. BODY {background-image: url ("logo.gif");} background-repeat repeat | repeat-x | repeat-y | no-repeat Questo attributo serve per specificare come disporre le immagini di sfondo quando non si tratta di uno sfondo omogeneo che riempie tutta la pagina: repeat indica che l'immagine deve essere replicata in orizzontale e in verticale. repeat-x deve essere replicata soltanto in orizzontale. repeat-y deve essere replicata soltanto in verticale. Logicamente questo attributo deve essere adoperato in abbinamento a background-image. {background-image : url(logo.gif); background-repeat : repeat-x ;} {background-image : url(logo.gif); background-repeat : repeat-y ;} {background-image : url(logo.gif); background-repeat : repeat ;} {background-image : url(logo.gif); background-repeat : no-repeat ;} background-position coordinate Questo attributo definisce il punto da cui iniziare a posizionare l'immagine e deve essere associato ai due precedentemente illustrati. Si possono adoperare parole chiave per la posizione orizzontale: left, center o right e parole chiave per la posizione verticale: top, center o bottom. E' anche possibile esprimere valori percentuali, dove: 0% 0% indica l'angolo in alto a sinistra (default) e: 100% 100% indica l'angolo in basso a destra. {background-image : url(logo.gif); background-repeat : repeat-y; background-position : 50% 50%;} {background-image : url(logo.gif); background-repeat : repeat-x; background-position : 50% 50%;} background-attachment scroll | fixed Questo attributo definisce se l'immagine usata deve scorrere sullo schermo insieme al testo (scroll) oppure restare fissa sullo sfondo (fixed) nel momento in cui si scorre la pagina. {background-image : url(logo.gif); background-attachment : scroll;} {background-image : url(logo.gif); background-attachment : fixed;} background parametri Questo attributo da solo serve per specificare diversi attributi all'interno dello stesso separandoli semplicemente da uno spazio. {background: red url(logo.gif) repeat-x fixed} ATTRIBUTI DI POSIZIONE position absolute | relative Determina il tipo di posizionamento che dovrà assumere il contenitore creato sullo schermo in uno dei possibili modi. Absolute o Relative, in entrambi i casi l'attributo ha ragione di esistere se abbinato con gli altri attributi di posizionamanto. {position:absolute; left:2em; top:1em;} Top lunghezza | percentuale | auto Determina la distanza del margine superiore del contenitore dal margine superiore della finestra del browser. {position:absolute; top:50px; left:100px;} Left lunghezza | percentuale | auto Determina la distanza del margine laterale sinistro del contenitore dal margine laterale sinistro della finestra del browser. {position:absolute; left:100px; top:50px;} Widht larghezza Determina la larghezza del contenitore se posizionato in modo absolute. {position:absolute; widht:300px; left:100px; top:50px;} Height altezza Determina l' altezza del contenitore se posizionato in modo absolute. {position:absolute; height:400px; widht:300px; left:100px; top:50px;} visibility visible | hidden | inherit Determina la visibilità del contenitore, questo infatti potrebbe sparire se associato al suo attributo hidden. {position:absolute; visibility:hidden; height:400px; widht:300px; left:100px; top:50px;} z-index valore Determina la priorità di visualizzazione del contenitore rispetto allo sfondo della pagina o rispetto ad altri contenitori posizionati sullo schermo. {position:absolute; z-index:-1; height:400px; widht:300px; left:100px; top:50px;} Contenitore o livello con priorità negativa (-1) che lo posiziona addirittura sotto lo sfondo; con una sua dimensione in altezza di 400 px con a larghezza di 300 px posizionato in modo assoluto a 100 px dal lato sinistro e 50 px dal bordo superiore della finestra del browser. Se non viene specificato alcun attributo per default il contenitore è visible. ATTRIBUTI DI MARGINE E ALLINEAMENTO I fogli di stile permettono di giustificare il testo senza l'uso improprio di tabelle o espedienti simili. I CSS creano degli elementi visualizzati all'interno di box. Ogni box ha delle proprietà: che si possono dividere in tre categorie: 1. Le proprietà dei margini che assegnano un bordo esterno al box; 2. le proprietà di riempimento che assegnano uno spazio interno al box che separa il contenuto dai margini; 3. le proprietà dei bordi che definiscono le linee grafiche intorno al box. I valori di questi attributi sono espressi in pollici (in), centimetri (cm), pixel (px), punti (pt) e unità (em). Semplificando il concetto, i fogli di stile sono impostati come se si trattasse di finestre indipendenti all'interno della pagina. Hanno, quindi, una loro grandezza e valori di impostazione. Tra questi, oltre al testo visto in precedenza ed al background che si vedrà più oltre, sono presenti i valori relativi ai bordi di tali pseudo-finestre. Margin top | Right | bottom | left Si tratta di quattro attributi che impostano la distanza tra il box contenente i CSS e gli elementi adiacenti, dai quattro margini. { margin-top: 10px; margin-right; 10px; margin-bottom: 10px; margin-left: 10px } Padding top | Right | bottom | left Tali attributi indicano la distanza tra i lati del box e gli elementi al suo interno. In altre parole hanno una funzione opposta a quella vista in precedenza per l'attributo margin. È possibile usare le misure standard (pollici, centimentri, punti, pixel ecc.) o valori percentuali. { padding-top: 10pt; padding-right; 10px; padding-bottom: 110%; padding-left: 2in } Border None | dotted | dashed | solid | double | groove | ridge | inset | outset Questi attributi definiscono lo stile e il colore di ogni elemento, generano un effetto simile ai bordi delle table HTML. { border-top: dotten green; border-left: dashed black; border-right: solid blue; border-bottom: groove yellow } border-width Come per gli attributi margin e padding, anche i quattro valori visti in precedenza possono essere definiti con un solo attributo border-width: { border-width: 10pt 10px 1em 2in } border-color Questo attributo definisce i colori dei quattro bordi del CSS nella loro globalità, cioè senza possibilità di stabilire colori diversi per ognuno di essi: { border-color: green } Per maggiori dettagli fare riferimento a http://www.w3.org/TR/REC-CSS1