Materiali
Incontro 3
Cosa sono i fogli di stile
Un foglio di stile è un file che contiene informazioni sull'aspetto grafico delle pagine web di un sito.
Conterrà, ad esempio, le indicazioni sul colore dei titoli, o sullo sfondo della pagina, le dimensioni dell'area per l'intestazione del sito o il font (carattere) da utilizzare, gli spazi tra una riga e l'altra nei paragrafi, l'allineamento dei testi ecc.
Perchè usare i fogli di stile
Finora abbiamo provato a dare un aspetto grafico alle pagine colorando un titolo alla volta, o scegliendo la grandezza per ciascuna scritta, ecc.
Abbiamo sempre lavorato su uno o due file alla volta.
Ma supponiamo di avere un sito con cinquanta pagine.
Se
decido di cambiare il colore di tutti i titoli da rosso a blu, devo
aprire tutte le 50 pagine e cambiare il colore in ciascuna, e salvare
tutto. Un lavoro piuttosto lungo...
Per questo conviene avere un unico file che contenga tutte le istruzioni sull'aspetto grafico, in modo che modificando la voce "titolo" di quel file si possa cambiare automaticamente il colore a tutte le 50 pagine.
Questo file con tutte le istruzioni per l'aspetto grafico delle pagine del sito si chiama appunto foglio di stile, ed ha un'estensione .css. Si chiamerà ad esempio stile.css. e sarà collegato a tutte le pagine del mio sito.
In altri termini, un foglio di stile permette di separare il contenuto della pagina web dalla sua presentazione.
In un sito ci possono essere più file css, interni ed esterni alle pagine. In questo laboratorio useremo un unico file esterno.
Quindi, ad esempio:
- Ho tre pagine html, tutte collegate allo stesso file
stile.css.
- Voglio cambiare il colore dei paragrafi a tutte e tre le pagine.
-
Posso cambiare l'indicazione sul colore del paragrafo nel file
stile.css, e cambiano automaticamente i paragrafi delle tre pagine html
- se nel sito ho, ad esempio, un'altra pagina html collegata ad un foglio di stile diverso (es. formati.css), in questa pagina non verrà cambiato nulla. Dovrei modificare il file formati.css
per approfondimenti sul tema:
