ࡱ > 5 7 . / 0 1 2 3 4 '` ! bjbj$$ . F F o T T T T T T T v L 2 2 2 8 j N , J[ j : F [ m y f h h h h h h $ Q h t T [ [ T T 9 9 9 0 T T f 9 f 9 9 2 μ T T z DRj 2 b 0 - )
- \ T - T 0 " 9 ӓ ) J[ J[ J[ D J[ J[ J[ h T r T T T T T T
APPUNTI
CSS (Cascading Style Sheets)
Dietro il semplice acronimo CSS (Cascading Style Sheets - Fogli di stile a cascata) si nasconde uno dei fondamentali linguaggi standard del HYPERLINK "http://www.w3c.org" \t "_blank" W3C. La sua storia cammina su binari paralleli rispetto a quelli di HTML, di cui vuole essere l'ideale complemento. Da sempre infatti, nelle intenzioni degli uomini del Consortium, HTML, cos come la sua recente evoluzione, XHTML, dovrebbe essere visto semplicemente come un linguaggio strutturale, alieno da qualunque scopo attinente la presentazione di un documento. Per questo obiettivo, ovvero arricchire l'aspetto visuale ed estetico di una pagina, lo strumento designato sono appunto i CSS. L'ideale perseguito da anni si pu sintetizzare con una nota espressione: separare il contenuto dalla presentazione.
La prima specifica ufficiale di CSS ( HYPERLINK "http://www.w3.org/TR/REC-CSS1" \t "_blank" CSS1) risale al dicembre del 1996. Nel maggio 1998 stata la volta della seconda versione: HYPERLINK "http://www.w3.org/TR/REC-CSS2" \t "_blank" CSS2. Niente stravolgimenti, ma molte aggiunte rispetto alla prima. CSS2 non altro che CSS1 pi alcune nuove propriet, valori di propriet e definizioni per stili non canonici come quelli rivolti alla stampa o alla definizione di contenuti audio. E' attualmente allo stato di Working Draft la nuova specifica HYPERLINK "http://www.w3.org/TR/css3-roadmap/" \t "_blank" CSS3.
A cosa servono
Finalmente, ad esempio, potrete dare al testo delle vostre pagine un aspetto da word-processor: non solo con il colore o i font che preferite, ma con un sistema di interlinea pratico e funzionale, con le decorazioni che desiderate, riuscendo a spaziare lettere e parole, impostando stili diversi per titoli e paragrafi, sfruttando i benefici dell'indentatura o della giustificazione. Ancora, potrete finalmente distanziare gli elementi della vostra pagina in maniera semplice e intuitiva con un potente meccanismo di gestione dei margini. Tonnellate di gif trasparenti usate per spaziare possono essere finalmente gettate nel cestino del vostro computer. E se i margini non bastano sarete in grado ora di aggiungere bellissimi bordi non solo alle tabelle, ma a tutti gli elementi di una pagina. Per non parlare degli sfondi: li potrete applicare a quello che volete. E dimenticate quelle brutte micro-textures. Finalmente potrete sbattere su una pagina, magari ben piazzato al centro, quel vostro bellissimo disegno di 600x400 pixel senza doverlo necessariamente vedere trasformato in orribili riquadri ripetuti sulla pagina. Ora siete voi a decidere come usare un'immagine di sfondo: la potete ripetere in una sola direzione, in due o per niente! Facile e comodo. La cosa pi bella che la gestione del sito non sar mai pi un incubo. Se quel bellissimo disegno di prima vi stufa, non dovrete pi andare a modificare una per una 300 pagine! I CSS sono separati dal documento. Aprite un foglio di stile, cambiate l'immagine e il gioco fatto. Il risultato sono pagine pi leggere e facili da modificare. Milioni di byte di banda risparmiati per la gioia degli utenti. Se poi avete a cuore l' HYPERLINK "http://www.html.it/accessibilita/" \o "Guida all'accessibilit - Italiano - Link Interno" accessibilit i CSS sono uno strumento portentoso, anche grazie al fatto di poter essere gestiti con linguaggi di scripting avanzati in grado di modificare con un solo click l'aspetto di una pagina.
Classificazione degli elementi
La prima lezione di questa guida potrebbe spiazzarvi. Non parleremo di CSS, ma di (X)HTML. O meglio, riprenderemo alcuni aspetti di questo linguaggio che sono propedeutici per una migliore comprensione del meccanismo di funzionamento dei CSS. Sapere bene su che cosa si interviene con i fogli di stile un passo necessario, visto che le cose di cui parleremo, specie con l'avvento e l'abuso degli editor visuali, sono spesso trascurate o misconosciute dai pi. Se mi passate la metafora, possiamo dire che faremo come un bravo chirurgo che prima di imparare gli strumenti deve conoscere bene il corpo umano per operare con successo e senza fare danni. Inizieremo con la classificazione degli elementi.
Elementi blocco e elementi in linea
Osservate una pagina (X)HTML tentando di non pensare al contenuto ma solo alla sua struttura. Mettete in atto, insomma, una specie di processo di astrazione. Una pagina (X)HTML, per iniziare, non altro che un insieme di rettangoli disposti sullo schermo di un monitor. Non importa che si tratti di paragrafi, titoli, tabelle o immagini: sempre di box rettangolari si tratta.
Nell'immagine potete per osservare che non tutti i box sono uguali. Alcuni contengono altri box al loro interno. Altri sono invece contenuti all'interno dei primi e se si trovano (come si trovano) in mezzo a del testo notate che esso scorre intorno senza interrompere il suo flusso e senza andare a capo. Avete nell'immagine la rappresentazione visiva, anche se un p semplificata, della fondamentale distinzione tra gli elementi (X)HTML, quella tra elementi blocco ed elementi inline. Gli elementi blocco sono i box che possono contenere altri elementi, sia di tipo blocco che di tipo inline. Quando un elemento blocco inserito nel documento viene automaticamente creata una nuova riga nel flusso del documento. Provate a inserire in una pagina (X)HTML queste due righe di codice:
Titolo
Paragrafo
Le parole "titolo" e "paragrafo" appariranno su due righe diverse, perch
e
sono elementi blocco.
Gli elementi inline non possono contenere elementi blocco, ma solo altri elementi inline (oltre che, ovviamente, il loro stesso tipo di contenuto, essenzialmente testo). Nell'immagine sono i rettangoli con il bordo verde. Come si pu notare, quando sono inseriti nel documento non danno origine ad una nuova riga. Una terza categoria quella degli elementi lista. Comprende in pratica solo l'elemento LI (list item).
Elementi rimpiazzati (replaced elementi)
Un'altra distinzione da ricordare quella tra elementi rimpiazzati ed elementi non rimpiazzati. I primi sono elementi di cui uno user agent (il "motore" e la mente di un browser) conosce solo le dimensioni intrinseche. Ovvero, quelli in cui altezza e larghezza sono definite dall'elemento stesso e non da ci che lo circonda. L'esempio pi tipico di elemento rimpiazzato IMG (un'immagine). Altri elementi rimpiazzati sono: INPUT, TEXTAREA, SELECT e OBJECT. Tutti gli altri elementi sono in genere considerati non rimpiazzati.
La distinzione importante perch per alcune propriet diverso il trattamento tra l'una e l'altra categoria, mentre per altre il supporto solo per la prima, ma non per la seconda.
Struttura ad albero di un documento
Un altro concetto fondamentale che dovreste assimilare quello della struttura ad albero di un documento. Il meccanismo fondamentale dei CSS infatti l'ereditariet. Esso fa s che molte propriet impostate per un elemento siano automaticamente ereditate dai suoi discendenti. Sapersi districare nella struttura ad albero significa padroneggiare bene questo meccanismo e sfruttare al meglio la potenza del linguaggio.
Presentiamo subito un frammento di codice HTML:
Questa la sua rappresentazione strutturale secondo il modello ad albero:
INCLUDEPICTURE "http://www.html.it/css/immagini/struttura_albero.gif" \* MERGEFORMATINET
Il documento in buona sostanza una perfetta forma di gerarchia ordinata in cui tutti gli elementi hanno tra di loro una relazione del tipo genitore-figlio (parent-child in inglese, imparate la dicitura perch nei linguaggi come DOM o Javascript ci si riferisce agli ordini della gerarchia proprio con questi termini.). Ogni elemento genitore e/o figlio di un altro.
Un elemento si dice genitore (parent) quando contiene altri elementi. Si dice figlio (child) quando racchiuso in un altro elemento. In base a queste semplici indicazioni possiamo analizzare il nostro documento. BODY, ad esempio figlio di HTML, ma anche genitore di H1, DIV e P. Quest'ultimo a sua volta genitore di un elemento B.
Ovviamente, se osservate bene, potreste concludere che anche BODY in qualche modo genitore di B. Non esattamente cos. Introduciamo ora un'altra distinzione, mutuata anch'essa dal linguaggio degli alberi genealogici, quella tra antenato (ingl: ancestor) e discendente (ingl: descandant). Semplice da capire. La relazione parent-child valida solo se tra un elemento e l'altro si scende di un livello. Esattamente come in un albero familiare si indica la relazione tra padre e figlio. Pertanto possiamo dire che HEAD figlio di HTML, che A figlio di P, etc. Tra DIV e A, invece si scende di due livelli: diciamo allora che DIV un antenato di A e che questo rispetto al primo un discendente.
C' un solo elemento che racchiude tutti e non racchiuso: HTML. Continuando con la metafora familiare potremmo dire che il capostipite, ma in termini tecnici si dice che esso l'elemento radice (ingl: root). E qui spazziamo il campo da un possibile fraintendimento: l'elemento radice di un documento (X)HTML non BODY. E che HTML non sia una semplice dichiarazione ma sia trattato alla stregua di qualunque altro elemento lo potete testare aprendo HYPERLINK "http://www.html.it/css/test/html_body.html" \t "_blank" questa pagina con Explorer 6, Mozilla, Opera 6 o Explorer 5 Mac.
Inserire i fogli di stile in un documento
Iniziamo il nostro percorso dalle fondamentali nozioni di base, rimanendo ancora in parte nel territorio di (X)HTML. Se CSS un solo linguaggio, vari sono i modi per inserire i fogli di stile CSS in un documento. Per capire il meccanismo necessario chiarire la fondamentale distinzione tra fogli esterni e interni.
CSS esterni e interni
E' esterno un foglio di stile definito in un file separato dal documento. Si tratta di semplici documenti di testo editabili anche con il Blocco Note o TextEdit ai quali si assegna l'estensione .css. Un foglio di stile si dice invece interno quando il suo codice compreso in quello del documento. A seconda che si lavori con un CSS esterno o interno variano sintassi e modalit di inserimento. Rispetto a queste diverse modalit si parla di fogli di stile collegati, incorporati o in linea.
Fogli collegati
Per caricare un foglio esterno in un documento esistono due possibilit. La prima e pi compatibile quella che fa uso dell'elemento . La dichiarazione va sempre collocata all'interno della sezione del documento (X)HTML:
Inserire i fogli di stile in un documento...
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 e alternate 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.
4. media: con questo attributo si identifica il supporto (schermo, stampa, etc) cui applicare un particolare foglio di stile. Attributo opzionale.
Usare @import
Un altro modo per caricare CSS esterni usare la direttiva @import all'interno dell'elemento
Questo sistema uno dei modi pi sicuri per risolvere problemi di compatibilit tra vecchi e nuovi browser. Ci torneremo quindi pi avanti. Per il momento basti notare che il CSS va collegato definendo un URL assoluto o relativo da racchiudere tra parentesi tonde (ma vedremo che altri modi sono accettati) e che la dichiarazione deve chiudersi con un punto e virgola.
Fogli incorporati
I fogli incorporati sono quelli inseriti direttamente nel documento (X)HTML tramite l'elemento ...
Come si vede il codice inizia con l'apertura del tag .
Fogli in linea
L'ultimo modo per formattare un elemento con un foglio di stile consiste nell'uso dell'attributo style. Esso fa parte della collezione di attributi (X)HTML definita Common: si tratta di quegli attributi applicabili a tutti gli elementi. La dichiarazione avviene a livello dei singoli tag contenuti nella pagina e per questo si parla di fogli di stile in linea.
La sintassi generica la seguente:
Se, ad esempio, si vuole formattare un titolo H1 in modo che abbia il testo di colore rosso e lo sfondo nero, scriveremo:
...
Le cose da osservare nel codice sono due. Come valore di style si possono dichiarare pi regole di stile. Esse vanno separate dal punto e virgola. I due punti si usano invece per introdurre il valore della propriet da impostare.
Consigli
A questo punto giusto chiedersi: quando usare l'una o l'altra soluzione? Il punto di partenza nella risposta deve essere questo: i risultati nella formattazione del documento non cambiano. La giusta soluzione sar quindi quella richiesta dalla nostra applicazione. Il consiglio sentito semplice: pianificate, pensate in anticipo a quella che dovr essere la struttura delle pagine del sito. Mettetevi davanti a un monitor o su un pezzo di carta e ragionate: qui metter un tag
, qui user una tabella a due colonne, questo box deve avere lo sfondo rosso, etc.
A questo punto potrete costruire per prima cosa un foglio di stile generico ed esterno, da applicare a tutte le pagine del sito. Esso conterr le regole per formattare gli elementi o le sezioni presenti in tutte queste pagine. Passate poi ad analizzare sezioni ed elementi presenti solo in certe pagine o che vogliate modificare solo in determinati casi. Supponete, ad esempio, di voler cambiare in rosso il colore di un titolo iniziale solo in una pagina delle 150 del vostro sito. Che fare? Semplice: usare uno stile incorporato solo in quella pagina:
Per la legge che regola il meccanismo del cascading (vedi lezione 13 di prossima pubblicazione) questo stile prevarr su quello del CSS esterno.
Se le pagine invece di una fossero 20 il discorso diventerebbe un p complicato. Bisognerebbe armarsi di pazienza e modificarle una per volta. Anche qui per la soluzione dietro l'angolo. Basta fare un nuovo CSS esterno e collegarlo al documento con @import insieme al foglio generico:
Anche questa volta, le regole dello stile colleagto con @import vanno a sovrascrivere quelle ereditate dall'elemento . Sono solo alcune delle strategie possibili e mi si perdoni la forse eccessiva semplificazione. Basta rendere l'dea.
Un'ultima notazione. L'uso estensivo di fogli in linea rischia di compromettere uno dei principali vantaggi dei CSS, ovvero avere pagine pi leggere e facili da gestire. Intervenire nei meandri di una pagina per andare a modificare uno stile e ripetere l'operazione per quante sono le pagine del nostro sito pu diventare davvero frustrante. Del resto, il loro uso ultimamente considerato deprecato anche dal W3C.
Lattributo media
Grazie ad esso siamo in grado di impostare un foglio di stile per ogni supporto su cui la nostra pagina verr distribuita. Una possibilit davvero interessante e che andr sempre pi diffondendosi con l'ampliarsi dei mezzi di diffusione delle pagine (X)HTML. Dove prima c'era unicamente un browser, domani potranno sempre pi esserci palmari, cellulari e altri dispositivi. Per non parlare dei software usati da disabili come i browser vocali. Ciascuno di questi supporti presenta caratteristiche diverse in termini di memoria, ampiezza dello schermo e funzionalit. Riuscire ad adattare uno stile unico a tutti praticamente impossibile, oltre che controproducente. La soluzione ideale sta quindi nella creazione di fogli di stile ad hoc.
Sintassi
L'attributo media pu accompagnare sia l'elemento che l'elemento
Per sfruttare a fondo questa opzione fondamentale conoscere i diversi valori possibili per l'attributo:
all. Il CSS si applica a tutti i dispositivi di visualizzazione.
screen. Valore usato per la resa sui normali browser web.
print. Il CSS viene applicato in fase di stampa del documento.
projection. Usato per presentazioni e proiezioni a tutto schermo.
aural. Da usare per dispositivi come browser a sintesi vocale.
braille. Il CSS viene usato per supporti basati sull'uso del braille.
embossed. Per stampanti braille.
handheld. Palmari e simili.
tty. Dispositivi a carattere fisso.
tv.Web-tv.
Il valore di default all, usato automaticamente in mancanza di una dichiarazione esplicita (ricordiamo infatti che media un attributo opzionale). E' possibile usare pi di un valore, ma i nomi della lista vanno separati da una virgola:
L'uso pi tipico di questa funzionalit consiste nel collegare al documento vari fogli di stile adatti a ciascun supporto. Lo user agent che visualizzer la pagina sar in grado, se conforme agli standard, di caricare quello giusto:
Fogli di stile alternativi
In un singolo documento HTML possibile dunque collegare pi fogli di stile. Abbiamo visto nella precedente lezione come ci possa diventare uno strumento molto potente grazie all'uso dell'opzione media. Un altro meccanismo da approfondire quello che consente l'utilizzo di fogli di stile esterni alternativi.
Uso e sintassi
Gli autori della specifica (X)HTML hanno esplicitamente previsto questo scenario introducendo due valori possibili per l'attributo rel all'interno dell'elemento :
stylesheet
alternate stylesheet
Il primo identifica il foglio di stile che servir a formattare normalmente il documento, diciamo il CSS di default. Il secondo identifica un CSS come alternativo rispetto a quello standard. Ecco un esempio di codice:
Sta all'autore implementare un sistema che consenta all'utente di scegliere dinamicamente lo stile alternativo sostituendolo al primo. La via pi semplice di farlo con un semplice Javascript in grado di intervenire su propriet e attributi dell'elemento . Cliccando sul link viene caricato il foglio alternativo.
Consigli
Questa funzionalit pu essere usata per vari scopi, tutti molto interessanti. Si potrebbero, ad esempio, impostare due stili alternativi consentendo all'utente di scegliere tra diversi layout per la pagina. O, ancora, creare meccanismi per modificare dinamicamente la dimensione dei caratteri, con ottimi vantaggi in termini di accessibilit. Per il resto affidatevi alla vostra fantasia.
Compatibilit
Questa lezione soprattutto per chi si avvicina solo ora ai CSS. Non imparerete molto di concreto ma avrete coscienza di un problema fondamentale: quello della compatibilit. Giusto per capire il livello della questione, ho deciso di mettere all'inizio come una sorta di epigrafe questa frase di Todd Fahrner :
una vergogna che i CSS, nati per essere semplici e avvicinabili dai non-programmatori, si siano trasformati in una roba misteriosa come la Cabala!
I CSS sono uno strumento meraviglioso. Se ricordate le date di definizione delle due specifiche potreste chiedervi spontaneamente: ma perch non sono stati usati da subito? .
Il problema che la piena coscienza da parte di produttori di browser e autori dell'importanza di adottare linguaggi standard ha fatto molta fatica ad affermarsi. Netscape introduceva estensioni proprietarie, Explorer rispondeva. E i poveri web-designer a cercare soluzioni in grado di conciliare gli opposti. In tutto ci ci si dimenticava di rafforzare il supporto dei linguaggi del W3C. E i CSS rimanevano una cosa di nicchia, per pochi adepti che non avevano nemmeno uno strumento per testarne seriamente le potenzialit
Una prima svolta, sul versante dei browser di massa, si ebbe con Explorer 5, il primo ad offrire un supporto adeguato del linguaggio. I predecessori di quarta generazione ne offrivano uno meno che accettabile. Lentamente, e anche grazie all'opera di gruppi di pressione come il HYPERLINK "http://www.webstandards.org/" \t "_blank" Web Standards Project o di software-house come Opera, la consapevolezza aumentata. Oggi possiamo contare su strumenti di navigazione che supportano la quasi totalit della specifica CSS2. Con un browser, per, che surclassa tutti gli altri in questo ambito: Mozilla. Microsoft ha continuato la sua opera di adeguamento, deludendo un p con Explorer 6, ma sfornando un eccellente navigatore per Mac.
Nonostante tutto la via dei CSS ancora lastricata di tanti problemi per gli sviluppatori. Due le maggiori fonti di difficolt:
la compatibilit con i vecchi browser
le diverse modalit di rendering di certe propriet
Sono problemi diversi, che vogliono quindi risposte diverse.
Retro-compatibilit
Per quanto riguarda la retro-compatibilit si hanno due strade. Si pu scegliere che non vale pi la pena sprecare tempo per Netscape 4 e colleghi. Semplice, brutale, ma pienamente accettabile. La valutazione delle statistiche sulle visite e sui software degli utenti la chiave per prendere una decisione simile.
La seconda strada quella di compromesso, del metodo detto cross-browser. Si tratta di elaborare strategie e di usare trucchetti in grado di preservare un minimo di compatibilit con il passato senza rinunciare ai vantaggi dei CSS per i browser recenti. Essenzialmente, comunque, non si potr mai fare a meno di costruire fogli di stile distinti, adatti rispettivamente ai nuovi e ai vecchi browser. Nell'articolo " HYPERLINK "http://pro.html.it/articoli/id_148/idcat_8/pro.html" \t "_blank" CSS cross-browser" avevo evidenziato tre strategie di base per risolvere il problema:
l'uso di un CSS universale
lo sniffing del browser con Javascript per servire a ciascuno il CSS adatto
il metodo @import
Posto che un foglio di stile universale assai riduttivo, gli altri due approcci si differenziano per l'origine della soluzione. Con lo sniffing tutto viene demandato ad una serie spesso complicata di script. Con il metodo @import si rimane nell'ambito (X)HTML/CSS.
Diversit di rendering
Il secondo campo di battaglia ancora pi minato del primo. L possiamo almeno decidere la fuga: Che Netscape 4 vada al suo destino. Qui i mal di testa sono assicurati. Il problema sta nel modo in cui ciascun browser, pur supportando una propriet, la applica. Un esempio gigantesco. Explorer 5 Windows supporta l'uso di HYPERLINK "http://www.html.it/css/guida_css_18.htm" parole chiave per definire le HYPERLINK "http://pro.html.it/articoli/id_8/idcat_8/pro.html" dimensioni dei font, ma lo fa a modo suo, interpretando il valore medium in maniera errata (rende il testo pi grande del dovuto).
Qui la strategia non pu essere univoca. Va valutata caso per caso. Spesso le propriet coinvolte da queste differenze sono poco importanti e altrettanto spesso i problemi nascono su questioni avanzate come il posizionamento dinamico degli elementi. Fatto sta che l'unica soluzione possibile che posso darvi : testate le vostre pagine. Sempre. Con il maggior numero di browser possibile. Valutate i risultati e se vi pare che le differenze siano trascurabili procedete senza problemi. Che una pagina possiate vederla allo stesso modo su tutti i browser semplicemente un'utopia.
Se le differenze sono tante o tali da pregiudicare il layout della pagina affidatevi a Google o a qualche buona risorsa sui CSS per risolvere il problema. Un trucchetto prima o poi viene inventato, statene tranquilli. Due sono le risorse che vi propongo, la prima preventiva, la seconda per i casi disperati.
Com fatto un CSS: regole e commenti
Quanto visto finora riguarda essenzialmente il rapporto tra CSS e (X)HTML: tutti gli elementi, gli attributi e le funzionalit analizzate fanno parte della specifica del secondo linguaggio.
Con questa lezione entriamo nel vivo dell'argomento. Iniziamo con l'analisi degli elementi costitutivi di un foglio di stile. Aprite HYPERLINK "http://www.html.it/css/test/foglio_di_stile.css" questo file, dopo averlo scaricato, con il vostro editor preferito. Tutto quello che ci trovate dentro appartiene a due tipologie di dichiarazioni: regole (ingl. rules) e commenti. Ecco, un foglio di stile non altro che questo: un insieme di regole, accompagnate, volendo, da qualche nota di commento. Andiamo innanzitutto a spiegare cos' e com' fatta una regola.
Com' fatta una regola
INCLUDEPICTURE "http://www.html.it/css/immagini/struttura_rule.gif" \* MERGEFORMATINET
L'illustrazione mostra la tipica struttura di una regola CSS. Essa composta da due blocchi principali:
il selettore
il blocco delle dichiarazioni
Il selettore serve a definire la parte del documento cui verr applicata la regola. In questo caso, ad esempio, verranno formattati tutti gli elementi
: lo sfondo sar rosso, il colore del testo bianco. I selettori possono essere diversi e a queste varie tipologie dedicheremo una delle prossime lezioni. Per il momento sia chiara la funzione che essi svolgono.
Il blocco delle dichiarazioni delimitato rispetto al selettore e alle altre regole da due parentesi graffe. Al suo interno possono trovare posto pi dichiarazioni.
Esse sono sempre composte da una coppia:
propriet
valore
La propriet definisce un aspetto dell'elemento da modificare (margini, colore di sfondo, etc) secondo il valore espresso. Propriet e valore devono essere separati dai due punti. Una limitazione fondamentale da rispettare questa: per ogni dichiarazione non possibile indicare pi di una propriet, mentre spesso possibile specificare pi valori. Questa regola pertanto errata:
body {color background: black;}
Mentre questa perfettamente valida e plausibile:
p {font: 12px Verdana, Arial;}
Ancora, se in un blocco si definiscono pi dichiarazioni, come nell'esempio in figura 1, esse vanno separate dal punto e virgola. Il linguaggio non impone che si metta il punto e virgola dopo l'ultima dichiarazione, ma alcuni browser pi datati lo richiedono: aggiungetelo sempre per sicurezza e per una maggiore compatibilit.
Gli spazi bianchi lasciati all'interno di una regola non influiscono sul risultato. Il consiglio, anzi, di lasciare sempre uno spazio tra le varie parti per una migliore leggibilit.
Commenti
Per inserire parti di commento in un CSS racchiudetelo tra questi segni:
/* come segno di apertura
*/ come segno di chiusura
Propriet singole e a sintassi abbreviata
Nelle definizione delle regole possibile fare uso di propriet singole e propriet a sintassi abbreviata. Con questa espressione traduciamo il termine inglese shorthand properties reso spesso, alla lettera, con il termine scorciatoie.
Le propriet singole sono la maggior parte: impostano per un dato elemento o selettore un singolo aspetto. Con le shorthand properties, possibile invece definire con una sola dichiarazione un insieme di propriet. Chiariamo con un esempio.
Ogni elemento presenta sui suoi quattro lati un certo margine rispetto a quelli adiacenti. possibile definire per ciascuno di essi un valore usando quattro propriet singole separate:
margin-top
margin-right
margin-bottom
margin-left
La regola sarebbe questa:
div {margin-top: 10px;margin-right: 5px;margin-bottom: 10px;margin-left: 5px;}
Lo stesso risultato si pu ottenere usando la propriet a sintassi abbreviata margin:
div {margin: 10px 5px 10px 5px;}
Approfondiremo nel corso dell'analisi delle propriet usi e costrutti sintattici di ciascuna. Per il momento ci limitiamo all'elenco:
background | border | border-top | border-right | border-bottom | border-left | cue | font | list-style | margin | outline | padding | pause |
I selettori
La parte preponderante della specifica CSS2 dedicata all'analisi delle diverse propriet in grado di definire l'aspetto visuale di elementi e sezioni di una pagina. Prima di tutto, per, fondamentale capire come e a cosa queste propriet possono essere assegnate. L'argomento sar l'oggetto delle prossime quattro lezioni.
Fondamentalmente una regola CSS viene applicata ad un selettore. La parola parla da s: si tratta di una semplice dichiarazione che serve a selezionare la parte o le parti di un documento soggette ad una specifica regola. Quella che segue una lista commentata dei vari tipi di selettore. Per verificare i concetti abbiamo preparato per ciascun tipo un documento di esempio con codice e ulteriori spiegazioni.
Selettore di elementi (type selector)
il pi semplice dei selettori. costituito da uno qualunque degli elementi di (X)HTML.
h1 {color: #000000;}p {background: white; font: 12px Verdana, Arial, sans-serif;}table {width: 200px;}
Raggruppare
possibile nei CSS raggruppare diversi elementi al fine di semplificare il codice. Gli elementi raggruppati vanno separati da una virgola. Il raggruppamento un'operazione molto conveniente. Pensate a questo scenario:
h1 {background: white;}h2 {background: white;}h3 {background: white;}
Tutti e tre gli elementi hanno uno sfondo bianco. Invece di scrivere tre regole separate si pu fare cos:
h1, h2, h3 {background: white;}
Selettore universale (universal selector)
Anche nei CSS abbiamo un jolly. Il selettore universale serve a selezionare tutti gli elementi di un documento. Si esprime con il carattere * (asterisco).
* { color: black; }
Selettore del discendente (descendant selector)
Nella specifica CSS1 questo tipo era definito "selettore contestuale". Serve a selezionare tutti gli elementi che nella struttura ad albero di un documento siano discendenti di un altro elemento specificato nella regola. Ricordiamo che un elemento discendente di un altro se contenuto al suo interno, a qualsiasi livello.
div p {color: black;}p strong {color: red;}
Alcune considerazioni importanti di cui tenere conto. Il selettore va letto per chiarezza da destra a sinistra. Nel primo esempio verranno selezionati tutti i paragrafi (P) discendenti di elementi DIV. Nel secondo tutti gli elementi STRONG che si trovino all'interno di un paragrafo.
Fate attenzione alla struttura del documento ed evitate possibili incongruenze. Esistono regole ben precise sull'annidamento degli elementi che vanno rispettate sia in (X)HTML che nei CSS. Un paragrafo, per esempio, non pu contenere un div, cos come un elemento inline non pu contenere elementi blocco.
Selettore del figlio (child selector)
Seleziona un elemento che sia figlio diretto di un altro.
Il child selector solo in apparenza simile al descendant selector. La differenza sta nella relazione di discendenza tra gli elementi, che in questo caso deve essere di primo livello. Chiariamo con un esempio utile anche per comprendere meglio il significato di descendant selector:
Primo paragrafo
Secondo paragrafo
Terzo paragrafo
Dei tre paragrafi solo il primo e il terzo sono figli diretti di body. Il secondo invece figlio diretto di un elemento div. Tutti e tre, per, sono discendenti di body. L'immagine chiarisce ulteriormente il concetto. Tra body e il primo e il terzo paragrafo si scende di un livello. Rispetto al secondo di due livelli:
INCLUDEPICTURE "http://www.html.it/css/immagini/albero_elementi.gif" \* MERGEFORMATINET
body > p {color: black;}
Come si vede, un'ulteriore differenza sta nella sintassi. Per il child selector i due elementi devono essere separati dall'operatore "maggiore di" >. Anche in questo caso la lettura logica va fatta da destra a sinistra. Nell'esempio si selezionano tutti i paragrafi figli diretti dell'elemento body.
Questo selettore non supportato da Explorer su Windows, cosa che ne limita notevolmente l'utilizzo.
Selettore dell'elemento adiacente (adjacent-sibling selector)
Un altro tipo di selettore introdotto con CSS2 l'adjacent-sibling selector. Seleziona gli elementi che nel codice del documento siano immediatamente vicini (adiacenti) ad un altro.
Sintassi
Anche qui partiamo da un esempio:
Titolo
Primo paragrafo
Secondo paragrafo
Il primo paragrafo adiacente al titolo h1, il secondo no e pertanto ad esso non potr applicarsi questa regola:
h1 + p {color: red;}
In base a questa dichiarazione solo il primo dei due paragrafi avr il testo rosso.
Il segno di assegnazione della relazione per questo selettore +. L'adjacent-sibling selector non supportato da Explorer Windows.
Selettore dell'attributo (attribute selector)
Seleziona gli elementi in base ai loro attributi e/o al valore di tali attributi. Il supporto di questo selettore non diffuso. Il suo uso per ricco di implicazioni positive consentendo una grande flessibilit nella selezione. L'utilit sar ancora maggiore in linguaggi come XML. Quattro sono i modi d'uso possibili.
Attributo semplice ( elemento [ attributo ]
Con questa sintassi si selezionano tutti gli elementi che presentino nel codice un determinato attributo. Dichiarazione:
input [ id ] {background: red;}
applicher uno sfondo rosso a tutti gli elementi input per cui sia stato impostato un attributo id, a prescindere dal valore ad esso assegnato.
Attributo con valore ( elemento [ attributo = "valore" ]
Seleziona gli elementi che abbiano come valore dell'attributo la stringa definita nella regola. Pertanto:
input [ id = "text" ] { backgorund: red; }
applicher un sfondo rosso a tutti gli elementi input che abbiano come valore dell'attributo id "text". Come si vede una sintassi pi restrittiva rispetto alla prima.
Attributo il cui valore contiene una stringa ( elemento [ attributo t= "valore" ]
In questo caso vengono selezionati tutti gli elementi in cui il valore dell'attributo dichiarato contenga la stringa definita nella regola.
img [ alt t= "foto" ] {margin: 10px;}
La regola applicher un margine di 10px a tutte le immagini in cui l'attributo alt contiene "foto". Quindi, saranno selezionate sia questa immagine:
sia questa:
Attributo il cui valore inizia con una stringa ( elemento [ attributo |= "valore" ]
Seleziona gli elementi in cui il valore dell'attributo dichiarato inizia con la stringa definita nella regola. Esempio:
img [ alt |= "figura" ] {margin: 10px;}
selezioner tutte le immagini in cui l'attributo alt inizia con la stringa "figura".
Id e classi: due selettori speciali
I CSS non sarebbero uno strumento cos potente senza questi tipi di selettori. Classi e ID sono davvero una delle chiavi per sfruttare al meglio questo linguaggio.
Partiamo dall'inizio. In (X)HTML esistono due attributi fondamentali applicabili a tutti gli elementi: sono class e id. Dichiarare questi attributi a prescindere dai CSS non ha alcun senso e non modifica in alcun modo la presentazione della pagina. Ecco un esempio. In HYPERLINK "http://www.html.it/css/test/classe_senza_css.html" \t "_blank" questa pagina abbiamo assegnato al paragrafo un attributo class="testorosso":
....
Come vedete non succede nulla. Il problema che il valore dell'attributo class deve trovare una corrispondenza in un foglio di stile. In questa HYPERLINK "http://www.html.it/css/test/classe_con_css.html" \t "_blank" seconda pagina, abbiamo definito un CSS incorporato creando un selettore di tipo classe e assegnado ad esso il nome testorosso:
Il testo del nostro paragrafo sar ora formattato secondo i nostri desideri: testo rosso, carattere Arial. dimensione di 12px.
Lo stesso meccanismo valido per i selettori di tipo ID. Ma con una sola fondamentale differenza: ad essa che dovete fare riferimento per scegliere se usare una classe o un ID. In un documento (X)HTML l'attributo id usato per identificare in modo univoco un elemento. In pratica, se assegno ad un paragrafo l'id "testorosso", non potr pi usare questo valore nel resto della pagina. Di conseguenza, l'ID #testorosso dichiarato nel CSS trasformer solo quel paragrafo specifico. Una singola classe, al contrario, pu essere assegnata a pi elementi, anche dello stesso tipo.
In un documento potr avere senza problemi questa situazione:
....
....
...
....
La classe .testorosso presente nel CSS formatter allo stesso modo il testo dei paragrafo, del div e della tabella.
Ma non questa:
....
...
Concludendo: una classe consente di superare le limitazioni intrinseche nell'uso di un selettore di elementi. Se imposto questa regola:
p {color: red;}
tutti i paragrafi della mia pagina avranno il testo rosso. E se volessi diversificare? Avere, ad esempio, anche paragrafi con il testo nero? Sarei prigioniero della regola iniziale. Scrivo due classi, una per il rosso e una per il nero, le applico di volta in volta secondo le mie necessit e il gioco fatto.
La strategia dovr dunque essere questa. Se uno stile va applicato ad un solo specifico elemento usate un ID. Se invece prevedete di usarlo pi volte ovvero su pi elementi definite nel CSS una classe.
Classe
Per definire una classe si usa far precedere il nome da un semplice punto:
.nome_della_classe
Questa la sintassi di base. Un selettore classe cos definito pu essere applicato a tutti gli elementi di un documento (X)HTML.
Esiste un secondo tipo di sintassi:
.nome_della_classe
Esso pi restrittivo rispetto alla sintassi generica. Se infatti definiamo questa regola:
p.testorosso {color: red;}
lo stile verr applicato solo ai paragrafi che presentino l'attributo class="testorosso". Anche qui importante stabilire un minimo di strategia. Il secondo tipo di sintassi va usato solo se pensate di applicare una classe ad uno specifico tipo di elemento (solo paragrafi o solo div, e cos via). Se invece ritenete di doverla applicare a tipi diversi usate la sintassi generica.
Una terza possibile modalit quella che prevede la dichiarazione di classi multiple:
p.testorosso.grassetto {color:red; font-weight:bold;}
Questa regola applicher gli stili impostati a tutti gli elementi in cui siano presenti (in qualunque ordine) i nomi delle classi definiti nel selettore. Avranno dunque il testo rosso e in grassetto questi paragrafi:
..
...
ma non questo, perch solo uno dei nomi presente come valore di class:
...
ID
La sintassi di un selettore ID semplicissima. Basta far precedere il nome dal simbolo di cancelletto #:
#nome_id
Con questa regola:
#titolo {color: blue;}
assegniamo il colore blue all'elemento che presenti questa definizione: