[GUIDA CSS #7] Regole e struttura dei fogli di stile


[GUIDA CSS #7] Regole e struttura dei fogli di stile

Dopo le lezioni precedenti, in cui abbiamo studiato prevalentemente il rapporto che vi è tra HTML e CSS, entriamo oggi nel vivo dell’ argomento, analizzando le regole e la struttura dei fogli di stile. Possiamo, in questo caso, definire i CSS un insieme di regole a cui, a volte, precedono dei commenti. Analizziamo insieme com’è fata una regola:

p {color: black; background: white;}

Questa è la tipica struttura di un CSS. Essa è divisa in due parti:

  • Selettore (in questo caso è p);
  • Blocco della dichiarazione (tutto ciò che troviamo all’ interno delle parentesi graffe, tra le quali possiamo distinguere le proprietà e il relativo valore. In questo caso color è un proprietà, black è il valore).

Il CSS da noi utilizzato formatterà, in questo caso, tutti i tag <p> presenti nell’ HTML della nostra pagina. Il colore del testo sarà nero, lo sfondo invece bianco. Sia da considerare questo un semplice esempio basilare, poiché vi sono metodologie per far sì che la formattazione avvenga solo per i paragrafi che si trovano in una determinata posizione, o altro ancora. Vedremo queste particolarità nelle prossime lezioni.

Dopo il selettore, è essenziale aprire la parentesi graffia e, all’ interno, inseriremo proprietà e valori. E’ regolamentare utilizzare i due punti dopo la proprietà, ossia prima del valore. Ai fini della corretta stesura del foglio di stile, è obbligatorio inserire il punto e virgola dopo il valore (facoltativo per l’ ultimo valore presente nella parentesi graffa anche se alcuni browser più vecchi lo richiedono). E’ possibile utilizzare più valori per ogni proprietà, mentre è assolutamente vietato utilizzare più proprietà per lo stesso valore. Gli spazi bianchi non influiscono sulla struttura dei fogli di stile.

Se visualizzate il CSS di qualunque sito web, noterete spesso i commenti lasciati dai web designer affinché una parte del foglio di stile risulti più chiara. A volte invece i commenti vengono usati a scopo identificativo, prevalentemente per capire quale parte del layout i CSS vanno a formattare. I commenti vanno inseriti tra gli apici /* e */. Esempio a seguire:

/* CSS Footer */

Quando andremo a scrivere il nostro foglio di stile potremo far uso anche di due diverse tipologie di proprietà. Le prime sono le proprietà singole, le altre sono le cosiddette scorciatoie, chiamate anche shorthand properties. La dichiarazione più lunga, potrà in questo modo essere abbreviata. Immaginate di voler impostare i bordi ad un determinato elemento, ecco come dovremmo scrivere con le proprietà singole:

div {  border-top: 2px;
border-right: 3px;
border-bottom: 2px;
border-left: 1 px;
}

Avvalendoci delle shorthand properties la dichiarazione soprascritta risulterà essere molto più breve.

div {border: 2px 3px 2px 1px;}

In casi come questo, i valori in pixel valgono in senso orario partendo dall’ alto (top-right-bottom-left). Vedremo nelle lezioni successive quali altre proprietà si possono usare in questo modo, per il momento l’ importante è che vi sia chiara qual’è la struttura dei fogli di stile. Alla prossima! 😉

<- Lezione precedente (Il problema della compatibilità)
Lezione successiva (Analizziamo i selettori) ->

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *