Semplicemente

Un foglio di stile è costituito da un insieme di regole che specificano l'aspetto di un documento sorgente.

Il linguaggio CSS consente la separazione dello stile di presentazione di documenti strutturati (come pagine HTML o applicazioni XML) dal contenuto.

Grazie a questa separazione, il documento può essere fruito in modalità differenti senza perdita di informazioni o struttura.

La regola è formata da un selettore seguito dal blocco delle dichiarazioni che a sua volta contiene una o più dichiarazioni formate dalla coppia proprietà, valore:

Il blocco delle dichiarazioni è delimitato da parentesi graffe ({ e }) e una dichiarazione termina con un punto e virgola (;); la proprietà è separata dal valore associato ad essa da due punti (:).

1. selettore { proprietà1: valore1; proprietà2: valore2; }

Il selettore

Indica la porzione di documento che sarà influenzata dalla regola (per esempio tutti i paragrafi):

1. p { proprietà: valore; }

La proprietà

Identifica il particolare aspetto dell'elemento che desideriamo modificare (per esempio il colore):

1. p { color: valore; }

I valori

La sintassi dei valori e diversa per ogni proprietà e alcune ne ammettono più di una.

• Numeri interi e numeri reali: uno o più numeri interi o reali specificati in notazione decimale. I decimali sono separati da un punto (.). I numeri possono essere preceduti dai simboli + o - per indicarne il segno. Alcune proprietà non ammettono valori negativi o restringono il campo dei valori possibili a un range numerico.
• Lunghezze: un numero seguito da un identificatore di unità di misura (px, em, ecc.).
• Percentuali: un numero seguito dall'identificatore %.
• URI (Uniform Resource Identifier): l'indirizzo di una risorsa nel Web. Nei valori delle proprietà è indicato mediante la notazione funzionale url(), l'indirizzo può essere racchiuso tra virgolette singole (') o doppie ("), entrambe opzionali. Per esempio: body { background: url("sfondo.gif"); }
• Stringhe di testo: una sequenza di caratteri racchiusa tra virgolette singole (') o doppie ("). Per esempio: p.nota:before { content: "Nota: "; }. Questo tipo di valori non è supportato da IE.
• Colori: una parola chiave o una specifica numerica RGB in notazione funzionale o esadecimale. Per esempio, in notazione funzionale numerica: em { color: rgb(255,0,0) }.

Per terminare la nostra regola, dobbiamo assegnare un valore alla proprietà color, per esempio una tonalità di grigio, una possibilità è utilizzare la parola chiave gray:

1. p { color: gray; }

Regole abbreviate

La sintassi di alcune proprietà consente la riunione in forma abbreviata di più regole:

1. p {
2. color: gray;
3. font-family: Arial, Helvetica, sans-serif;
4. font-size: 12px;
5. line-height: 1.5;
6. }

Le regole presenti nelle righe da 3 a 5 possono essere abbreviate utilizzando la proprietà font:

1. p { color: gray; font: 12px/1.5 Arial, Helvetica, sans-serif; }

Raggruppamento di selettori

Quando due o più selettori condividono le stesse dichiarazioni possono essere raggruppati in una lista separata da virgole:

1. h1 { color: gray; }
2. h2 { color: gray; }
3. h3 { color: gray; }

Le tre regole dell'esempio possono quindi essere raggruppate nella seguente:

1. h1, h2, h3 { color: gray; }

I commenti

Un commento inizia con /* e termina con */. Possono essere commentate intere dichiarazioni o parti di esse, sulla stessa riga o su righe multiple.

1. /* Questo è un commento */

Commento di una riga:

1. p {
2. color: #c0c0c0;
3. /* font: 18px/1.5 Arial, Helvetica, sans-serif; riga commentata */
4. }

Commento su righe multiple:

1. p {
2. /* commento su righe multiple
3. h1 { color: gray; }
4. h2 { color: gray; } */
5. }

Tag: CSS, HTML, introduzione ai CSS, presentazione, XML

Questo articolo è stato inviato Tuesday 13 November 2007 alle 11:05 ed è archiviato nella categoria Fogli di stile, Linguaggi di marcatura. Puoi seguire le risposte tramite il feed RSS 2.0. Se lo desideri puoi lasciare un commento, o un trackback dal tuo sito.