Come è fatto un CSS: regole e commenti
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 <H1>: 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:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Mentre questa è perfettamente valida e plausibile:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
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à.
I 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 è posssibile 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:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Lo stesso risultato si può ottenere usando la proprietà a sintassi abbreviata margin:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Approfondiremo nel corso dell'analisi delle proprietà usi e costrutti sintattici di ciascuna. Per il momento ci limitiamo all'elenco:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
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.
Sintassi
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
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:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Tutti e tre gli elementi hanno uno sfondo bianco. Invece di scrivere tre regole separate si può fare così:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
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).
Sintassi
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
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.
Sintassi
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
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. Utili chiarimenti sull'argomento nella lezione "Il corpo del documento" della Guida a XHTML.
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:
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
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:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
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 (almeno fino alla versione 6) 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.
Anche qui partiamo da un esempio:
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Il primo paragrafo è adiacente al titolo h1, il secondo no e pertanto ad esso non potrà applicarsi questa regola:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
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
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Con questa sintassi si selezionano tutti gli elementi che presentino nel codice un determinato attributo.
La dichiarazione:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
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
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Seleziona gli elementi che abbiano come valore dell'attributo la stringa definita nella regola. Pertanto:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
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
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
In questo caso vengono selezionati tutti gli elementi in cui il valore dell'attributo dichiarato contenga la stringa definita nella regola.
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
La regola applicherà un margine di 10px a tutte le immagini in cui l'attributo alt contiene "foto". Quindi, saranno selezionate sia questa immagine:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Attributo il cui valore inizia con una stringa
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Seleziona gli elementi in cui il valore dell'attributo dichiarato inizia con la stringa definita nella regola. Esempio:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
selezionerà tutte le immagini in cui l'attributo alt inizia con la stringa "figura".
Fonte: css.html
