In questa lezione vi spiego:
- come è strutturato un foglio di stile;
- da quali parti è composto.
Regole
Un foglio di stile CSS è un insieme di regole, ovvero una collezione di stili già pronti, i quali vengono assegnati a diversi elementi della pagina (paragrafi, immagini, elenchi, ecc.).
Una regola è una espressione che definisce uno stile per la formattazione.
Ogni regola presenta la seguente struttura:
selettore { blocco delle dichiarazioni }
Esempio:
p { color:green; text-align:center; }
Selettori
Un selettore ha il compito di individuare gli elementi a cui è destinata la regola.
Ad esempio, se vogliamo colorare il testo di tutti i paragrafi della pagina, dobbiamo creare una regola che venga applicata soltanto ai paragrafi, senza toccare altri elementi.
Nell’esempio che vi ho fatto, per individuare solo i paragrafi, usiamo il selettore “p” che, appunto, rappresenta il tag per i paragrafi nel linguaggio HTML.
Oltre ai nomi dei tag HTML, un selettore prevede anche altri comandi, che vedremo in seguito, come ad esempio classi e ID.
Dichiarazioni
Nella regola CSS, dopo il selettore viene scritta una coppia di parentesi graffe:
selettore { ... }
Nelle graffe vanno inserite le dichiarazioni, ovvero espressioni di stile che modificano un singolo aspetto dell’elemento a cui è rivolta la regola: possono modificare la posizione, la dimensione, il colore, ecc.
Ciascuna dichiarazione è così strutturata:
proprietà: valore;
Esempio:
color: green;
Ciascuna proprietà ha particolari tipi di valori ammessi: alcune proprietà prevedono valori numerici con o senza unità di misura, altre prevedono parole, codici, ecc.
Esempio:
- text-align: center;
- font-size: 2em;
- width: 60%;
- color:#DC3;
Il punto e virgola alla fine della dichiarazione non è obbligatorio solo se è presente una sola dichiarazione nelle graffe, altrimenti è indispensabile perché le separa tra di loro.
Le dichiarazioni possono essere scritte in orizzontale:
p { color:green; text-align:center; }
oppure in verticale, usando una opportuna indentazione (rientro):
p {
color:green;
text-align:center;
}
L’indentazione viene usata più che altro per tenere il codice ordinato.