Come =E8 fatto un CSS: regole e commenti | Guida CSS =

Come =E8 fatto un=20 CSS: regole e commenti

Quanto visto finora riguarda essenzialmente il rapporto = tra CSS e=20 (X)HTML: tutti gli elementi, gli attributi e le = funzionalit=E0=20 analizzate fanno parte della specifica del secondo = linguaggio.

Con questa lezione entriamo nel vivo dell'argomento. = Iniziamo con=20 l'analisi degli elementi costitutivi di un foglio di stile. = Aprite=20 questo=20 file, dopo averlo scaricato, con il vostro editor = preferito.=20 Tutto quello che ci trovate dentro appartiene a due = tipologie di=20 dichiarazioni: regole (ingl. rules) e commenti. Ecco, = un=20 foglio di stile non =E8 altro che questo: un insieme di = regole,=20 accompagnate, volendo, da qualche nota di commento. Andiamo=20 innanzitutto a spiegare cos'=E8 e com'=E8 fatta una = regola.

Com'=E8 fatta una regola

3D"Figura

L'illustrazione mostra la tipica struttura di una regola = CSS.=20 Essa =E8 composta da due blocchi principali:

il selettore=20
il blocco delle dichiarazioni

Il selettore serve a definire la parte del documento cui = verr=E0=20 applicata la regola. In questo caso, ad esempio, verranno = formattati=20 tutti gli elementi <H1>: lo sfondo sar=E0 = rosso, il=20 colore del testo bianco. I selettori possono essere diversi = e a=20 queste varie tipologie dedicheremo una delle prossime = lezioni. Per=20 il momento sia chiara la funzione che essi svolgono.

Il blocco delle dichiarazioni =E8 delimitato rispetto al = selettore=20 e alle altre regole da due parentesi graffe. Al suo = interno=20 possono trovare posto pi=F9 dichiarazioni. Esse sono sempre = composte=20 da una coppia:

propriet=E0=20
valore

La propriet=E0 definisce un aspetto dell'elemento da = modificare=20 (margini, colore di sfondo, etc) secondo il valore espresso. = Propriet=E0 e valore devono essere separati dai due = punti. Una=20 limitazione fondamentale da rispettare =E8 questa: per ogni=20 dichiarazione non =E8 possibile indicare pi=F9 di una = propriet=E0, mentre=20 =E8 spesso possibile specificare pi=F9 valori. Questa regola = =E8 pertanto=20 errata:

body {color background: black;}

Mentre questa =E8 perfettamente valida e plausibile:

p {font: 12px Verdana, Arial;}

Ancora, se in un blocco si definiscono pi=F9 = dichiarazioni, come=20 nell'esempio in figura 1, esse vanno separate dal punto e = virgola. Il linguaggio non impone che si metta il punto = e=20 virgola dopo l'ultima dichiarazione, ma alcuni browser pi=F9 = datati lo=20 richiedono: aggiungetelo sempre per sicurezza e per una = maggiore=20 compatibilit=E0.

Gli spazi bianchi lasciati all'interno di una regola non=20 influiscono sul risultato. Il consiglio, anzi, =E8 di = lasciare sempre=20 uno spazio tra le varie parti per una migliore = leggibilit=E0.

Commenti

Per inserire parti di commento in un CSS racchiudetelo = tra questi=20 segni:

/* come segno di apertura=20
*/ come segno di chiusura

Propriet=E0 singole e a sintassi abbreviata

Nelle definizione delle regole =E8 posssibile fare uso di = propriet=E0 singole e propriet=E0 a sintassi = abbreviata.=20 Con questa espressione traduciamo il termine inglese = shorthand=20 properties reso spesso, alla lettera, con il termine=20 scorciatoie.

Le propriet=E0 singole sono la maggior parte: impostano = per un dato=20 elemento o selettore un singolo aspetto. Con le shorthand = properties, =E8 possibile invece definire con una sola=20 dichiarazione un insieme di propriet=E0. Chiariamo con un = esempio.=20

Ogni elemento presenta sui suoi quattro lati un certo = margine=20 rispetto a quelli adiacenti. =C8 possibile definire per = ciascuno di=20 essi un valore usando quattro propriet=E0 singole = separate:

margin-top=20
margin-right=20
margin-bottom=20
margin-left

La regola sarebbe questa:

div {
margin-top: = 10px;
margin-right:=20 5px;
margin-bottom: 10px;
margin-left: 5px;
}

Lo stesso risultato si pu=F2 ottenere usando la = propriet=E0 a=20 sintassi abbreviata margin:

div {margin: 10px 5px 10px 5px;}

Approfondiremo nel corso dell'analisi delle propriet=E0 = usi e=20 costrutti sintattici di ciascuna. Per il momento ci = limitiamo=20 all'elenco:

Un ottimo articolo introduttivo: Introduction to shorthand properties. =

L=20 e z i o n e s u c c e s s i v=20 = a
[ S o m m a r i = o=20 ] =