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:

  • il sito e' costruito in HTML classico, per cui sara' necessario agire su ogni singola marcatura di ognuna delle 1000 pagine;

  • il sito e' costruito adottando fogli di stile in linea, per cui anche in questo caso sara' necessario agire su tutte le singole marcatura di ognuna delle 1000 pagine;

  • il sito e' costruito con i fogli di stile incorporati, per cui si dovra' comunque modificare l'intestazione di stile di 1000 documenti, anche se non si dovra' agire sui singoli attributi della pagina che rimangono identici

    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:

  • apri una pagina senza alcuna intestazione HTML con blocco notes di Win95-98 o il tuo editor HTML (sentitamente sconsigliato l'uso di Front Page, almeno per questo esempio) e inserisci al suo interno il seguente codice:

    H1 { font-size:17px; font-family:verdana; color:green }
    p { font-size:18px; font-family:arial; color:red }

  • Se stai usando blocco notes di Win95-98 vai su FILE/SALVA CON NOME nella prima voce di menu in alto a sinistra. A questo punto si apre una finestra di salvataggio con due campi da riempire: nome file e salva come. Nel primo campo inserisci il nome style.css e nel secondo imposta come "tutti i file" e finalmente premi il tasto "salva".

  • Creato il file style.css (.css e' l'estensione assegnata ai file di stile esterni, mentre il nome "style" puo' essere modificato a proprio piacimento) copialo nella cartella principale del tuo sito Web.

  • Apri i documenti HTML del tuo sito e inserisci al loro interno, tra i tag <HEAD> il seguente codice:

    <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.

  • All'interno del documento identifica gli stili da assegnare usando i marcatori <H1> e <p>. Per esempio i titoli potrebbero essere stabiliti da <H1> e il testo delle pagine da <P>, in questo modo:

    <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.



    Css incorporati Vai all'argomento precedente        Attributi di stile per il testo Vai all'argomento successivo