CSS - Dichiarazioni, proprietà, valori

Requisiti

• Introduzione a CSS
• Backus-Naur Form / BNF e EBNF

Introduzione

Una regola CSS è così composta:

regola-css := selettori blocco-dichiarazione
selettori := selettore (, selettore)*
blocco-dichiarazione := '{' dichiarazione (;dichiarazione)* ;? '}'

I selettori individuano gli elementi del documento HTML/XHTML ai quali applicare la presentazione descritta nel blocco-dichiarazione.

Nel blocco dichiarazione è presente un insieme di dichiarazioni che specificano come presentare le varie proprietà degli elementi. Per l'ultima dichiarazione il ; non è obbligatorio ma è buona regola metterlo sempre.

Ad esempio:

h1, h2 {
   margin: 0px;
   padding: 0px;
}

In questo caso i selettori sono h1 e h2 seguiti dal blocco dichiarazioni { ... }. All'interno del blocco dichiarazioni sono presenti 2 dichiarazioni margin: 0px; e padding: 0px;.

Dichiarazioni

La singola dichiarazione è espressa in questo modo:

dichiarazione := nome-proprieta ':' valore

Una dichiarazione CSS è composta da un nome di proprietà e un valore.

Ad esempio:

h2 {
   color: red;
   font-size: 15px;
}

E' possibile anche avere più blocchi di dichiarazione con lo stesso selettore, in tal caso la regola precedente poteva anche essere riscritta in questo modo:

h2 {
   color: red;
}
h2 {
   color: red;
}

E per questo è necessario subito questa precisazione:

h2 {
   color: red;
}
h2 {
   color: green;
}

In 2 regole abbiamo definito la stessa proprietà. In tal caso vale sempre l'ultima (che sovrascrive la precedente).

Proprietà

Sono identificate da un nome che deve essere scritto correttamente, altrimenti la dichiarazione è ignorata.

Indica in generale ciò che vogliamo caratterizzare graficamente. Ad esempio per un box si potrebbe volere un bordo di 1 pixel. In questo caso il nome della proprietà è border, oppure il colore del testo color.

Un nome di proprietà è un identificatore CSS: deve iniziare con una lettera [a-z] e può contenere lettere [a-z], numeri [0-9], -, _ .

Valori

Possiamo caratterizzare graficamente un elemento indicando quindi il nome della proprietà e un. I valori possono essere: parole chiave, stringhe, colori, numeri, dimensioni, percentuali, URI, che sono descritti in CSS - Tipi di valori

Ogni proprietà ha un valore che se non specificato esplicitamente o ereditato è un valore di default.

Forma abbreviata delle proprietà

Le proprietà possono essere espresse in una forma abbreviata. Ad esempio per definire i margini di un box normalmente possiamo scrivere:

.box {
   margin-top: 1px;
   margin-right: 2px;
   margin-bottom: 3px;
   margin-left: 4px;
}

che in forma abbreviata diventa:

.box { margin: 1px 2px 3px 4px; }

L'ordine delle proprietà è segue un ordine "orario" e parte dal top.

E' possibile anche altre raggruppare altre proprietà differenti:

background-color: #fff;
background-image: url(background.png);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right top;

diventa:

background: #fff url(background.png) no-repeat fixed right top;