dal 2015 - visita n. 656
CSS esterni
CSS esterni

 

CSS esterni

I fogli di stile esterni (o collegati) sono quelli che meglio rispondono alle esigenze degli sviluppatori, e soprattutto quelli che meglio interpretano la filosofia dei fogli di stile. Per comprendere pienamente le peculiarita' dei CSS esterni si pensi ad un sito di grandi dimensioni con 1000 pagine HTML e un certo tipo di formattazione del testo. Improvvisamente esigenze estetiche impongono di modificare colore di sfondo, tipo di carattere e allineamento del testo. Sulla scorta di quanto finora esposto si presentano tre casi:

Seppure l'ultimo espediente limita notevolmente il lavoro di aggiornamento rispetto ai primi due punti, si tratta pur sempre di agire su un numero elevato di documenti.
La soluzione a questo problema e' che gli stili dei singoli marcatori vengano raggruppati in un documento indipendente dal resto delle pagine, e da queste semplicemente richiamato con una semplice riga di codice. In questo modo una modifica sul file "centralizzato" genera automaticamente la stessa modifica su tutti i documenti che lo richiamano. Sulla scorta di questa ovvia considerazione si basano i fogli di stile esterni esaminati in questa pagina.

Creare un foglio di stile esterno e richiamarlo all'interno delle pagine HTML e' semplice e consta di 5 fasi:

<link rel=stylesheet href="style.css" type="text/css">

La marcatura link identifica un file esterno al documento HTML che comunque lo riguarda direttamente. L'attributo rel indica che il file collegato e' un foglio di stile (stylesheet). href richiama il percorso del file .css esterno (in questo caso il file si intende depositato nella stessa cartella in cui e' presente il documento HTML; se cosi' non fosse andrebbe inserito il percorso del file, per es.: href="css/style.css"). L'attributo type ha la funzione vista in precedenza per i fogli di stile incorporati.

<H1>Titolo della pagina</H1>

<P>Testo della pagina di prova, Testo della pagina di prova, Testo della pagina di prova, </P>


Il risultato di questo esempio e' di stabilire per tutte le pagine del sito uno stile comune per i marcatori <H1> e <P>, in modo tale che modificando il solo file esterno tutti i documenti HTML collegati saranno contestualmente aggiornati. Nell'esempio del sito di 1000 pagine, se l'esigenza fosse quella di modificare grandezza e stile dei titoli di pagina, sarebbe sufficiente agire sul marcatore <H1> del file esterno style.css.

In chiusura di questa disamina ci preme sottolineare la grandissima utilita' dei fogli di stile esterni che consigliamo di usare il piu' possibile. A fronte di una impostazione iniziale piu' complessa degli altri stili, nel lungo periodo e per siti di grandi dimensioni ripaga ampiamente gli sforzi, oltre a consentire un eccezionale controllo di pagina e di stile.
















Particelle
Introduzione
CSS in linea
CSS incorporati
CSS esterni
Attributi per testo
Attributi per margini
Gestione sfondo
Raggruppare stili
Assegnare classi
Posizionamento dinamico
Controlli del cursore



Presto si pente chi giudica con fretta.
P. Siro

Valid CSS!
pagina generata in 0.001 secondi