CSS (Cascading Style Sheets)
In informatica il CSS (Cascading Style Sheets o Fogli di stile) è un linguaggio usato per definire la formattazione di documenti HTML, XHTML e XML ad esempio in siti web e relative pagine web.
Come fare un CSS
Questa lezione è dedicata all’analisi degli elementi costitutivi di un foglio di stile CSS.
L’illustrazione mostra la tipica struttura di una regola CSS. Essa è composta da due blocchi principali:
Il blocco delle dichiarazioni è delimitato rispetto al selettore e alle altre regole da due parentesi graffe, la prima di apertura e la seconda di chiusura. Al suo interno possono trovare posto più dichiarazioni. Una dichiarazione è composta da una coppia:
La proprietà definisce un aspetto dell’elemento/selettore da modificare (margini, colore di sfondo, larghezza, etc) secondo il valore espresso. Proprietà e valore devono essere separati dai due punti. Le dichiarazioni vanno invece separate con un punto e virgola. Non è obbligatorio, ma è buona norma mettere il punto e virgola anche dopo l’ultima dichiarazione del blocco.
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. Con esse impostiamo, per un dato elemento o selettore, un singolo aspetto: il colore, la dimensione del testo, il font da utilizzare, etc.
Con le shorthand properties è possibile invece definire con una sola dichiarazione un insieme di proprietà.
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
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;}
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à.
Osserviamo questa porzione di codice:
- il selettore;
- il blocco delle dichiarazioni.
Il blocco delle dichiarazioni è delimitato rispetto al selettore e alle altre regole da due parentesi graffe, la prima di apertura e la seconda di chiusura. Al suo interno possono trovare posto più dichiarazioni. Una dichiarazione è composta da una coppia:
- proprietà;
- valore.
La proprietà definisce un aspetto dell’elemento/selettore da modificare (margini, colore di sfondo, larghezza, etc) secondo il valore espresso. Proprietà e valore devono essere separati dai due punti. Le dichiarazioni vanno invece separate con un punto e virgola. Non è obbligatorio, ma è buona norma mettere il punto e virgola anche dopo l’ultima dichiarazione del blocco.
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. Con esse impostiamo, per un dato elemento o selettore, un singolo aspetto: il colore, la dimensione del testo, il font da utilizzare, etc.
Con le shorthand properties è possibile invece definire con una sola dichiarazione un insieme di proprietà.
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
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;}
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à.
Osserviamo questa porzione di codice:
Nello snippet di codice visto le parti racchiuse tra i segni /* e */, rappresentano commenti al codice.
I commenti non sono interpretati dal browser. Sono utili nei CSS, come nei linguaggi di programmazione, per aggiungere annotazioni esplicative di vario tipo a beneficio di chi scrive e consulta il codice.
Ecco gli 8 punti da tenere a mente per scrivere con chiarezza ed evitare la battitura di errori accidentali:
I commenti non sono interpretati dal browser. Sono utili nei CSS, come nei linguaggi di programmazione, per aggiungere annotazioni esplicative di vario tipo a beneficio di chi scrive e consulta il codice.
Ecco gli 8 punti da tenere a mente per scrivere con chiarezza ed evitare la battitura di errori accidentali:
- Un solo selettore per linea in set di regole con più selettori.
- Un singolo spazio prima della parentesi graffa di apertura di un set di regole.
- Una dichiarazione per linea di un blocco dichiarazioni.
- Un livello di rientro per ogni dichiarazione.
- Un singolo spazio dopo i due-punti di una dichiarazione.
- L'ultima dichiarazione senza punto e virgola (si intende ultima riga di codice contenuta all'interno delle parentesi graffe).
- Mettete la parentesi graffa di chiusura di un set di regole, nella stessa colonna del primo carattere del set di regole.
- Separate ogni set di regole con una linea vuota.