|
Foglio di style esterno Abbiamo visto come definire uno stile in linea quando ci serve magari una veloce particolarità delimitata ad una sola zona del nostro documento.
Abbiamo visto anche come definire uno stile ad inizio pagina al quale tutto il documento faceva riferimento ed uso.
Vediamo adesso quello che secondo me è il più comodo e pratico dei sistemi, quello in cui esiste un foglio
di stile esterno, separato dalla pagina e richiamato da tutte le pagine web che compongono il sito. In questo foglio, o fogli visto che possono essere più di uno solo, andremo a scrivere tutti gli stili che ci servono, comprese le "classi" e gli "id".
Anche nel caso in cui si facesse uso di un foglio di style esterno, sarà possibile definire all'occorrenza stili ad inizio pagina e/o stili in linea e questi avrebbero priorità sul quanto dichiarato nel foglio esterno.
Cosa significa foglio di stile esterno?
Significa che se gli stili definiti sono molti, o molte sono le pagine web che ne faranno uso, la cosa migliore da fare, non fosse altro per praticità d'uso, sarà quella di creare una struttura esterna alla quale tutte le pagine possano fare riferimento. Questa struttura altro non sarebbe che il foglio di style, un documento di testo normalissimo ma con estensione finale .css dove al suo interno saranno contenute tutte le dichiarazioni valide per un foglio di style. Valgono le stesse regole sintattiche viste fino ad ora per il foglio incorporato a inizio pagina.
Proviamo ad immaginare i vantaggi, pensate di dover fare una modifica all'intero sito, magari semplicemente per cambiare un tipo di font che non vi piace più, o sostituire un colore con un altro, sarà sufficiente apportare la modifica una sola volta a quel singolo foglio esterno per vedere poi immediatamente su tutte le pagine il risultato della modifica.
Comodo vero? Sono finiti (finalmente) i tempi in cui si passavano ore ed ore a rielaborare tutte le pagine web e dove immancabilmente si finiva col dimenticarne sempre qualcuna.
Per creare questo foglio esterno sarà sufficiente ancora una volta un editor, lo stesso che adoperate per html, meglio ancora se uno specifico per css. Vi ricordo che il wordpad o notepad a corredo di windows andranno benissimo, l'importante sarà salvare sempre in formato ascii, cioè testo puro privo di particolari formattazioni ed avendo cura di fare in modo che il file così salvato sia di tipo css e non txt come normalmente avviene. Se qualcuno avesse difficoltà con questo tipo di operazione (rinomina del file), potrà leggere come fare su questa pagina.
Esaminiamo più attentamente il nostro foglio di Stile esterno:
p{
text-align: justify;
text-indent: 12px;
}
Si noterà che praticamente è lo stesso usato nello "style incorporato" con la sola differenza che non ha più gli elementi iniziali che ne dichiaravano lo stile: <style type="text/css">, questo perché trattandosi di un foglio esterno la dichiarazione viene messa nel documento HTML che lo richiama, facendo uso della seguente sintassi:
<link rel=stylesheet href="nome_assegnato.css" type="text/css">
Avendo cura di posizionare questa riga di richiamo fra gli elementi (tags) <head> e </head> del file html, dove nome_assegnato.css sarà il nome esatto che avrete deciso di usare per il vostro foglio di stile.
Ovviamente questa riga deve far parte di tutte le pagine web che fanno riferimento al foglio di style così creato.
Un foglio di style esterno tipo potrebbe essere questo:
html, body{
margin-left: .5cm;
margin-right: .5cm;
color: #000099;
font-family: Verdana, Arial, sans-serif;
font-size: 10pt;
}
a:link{
text-decoration: none;
color: #009900 ;
}
a:visited{
text-decoration: none;
color: Gray;
}
a:hover{
color: #ffff00;
text-decoration: none;
}
td{
font-family: "MS Sans Serif";
font-size: 12pt;
}
p{
text-align: justify;
text-indent: 12px;
}
Vediamo cosa è stato ridefinito, così da capire meglio e cominciare a familiarizzare con le varie sigle:
html, body tutto quello dichiarato all'interno di questo elemento sarà esteso a tutto il documento, per cui tutta la pagina web farà uso del font verdana, nel caso in cui questo non fosse installato nel PC del visitatore si cercherà di usare Arial, se anche questo dovesse mancare allora un font generico della famiglia sans-serif, dopo di che sarà assunto il font di default.
font-family: Verdana, Arial, sans-serif;
Margine laterale dai bordi destro e sinistro: 0,5cm
margin-left: .5cm; margin-right: .5cm;
Colore del testo blu scuro
color: #000099;
Dimensione del font 10 punti
font-size: 10pt;
Link da visitare non sottolineati e di colore verde
a:link{text-decoration: none; color: #009900;}
Link visitati non sottolineati e di colore grigio
a:visited{text-decoration: none; color: Gray;}
Cambio colore al passaggio del mouse sopra il link, non sottolineati e di colore grigio
a:hover{text-decoration: none; Color: #ffff00;}
Celle di tabelle con font Ms Sans Serif dimensione 12 punti
td{font-family: "MS Sans Serif"; font-size: 12pt;}
Paragrafo allineamento giustificato, indentizione 12 pixel
p{text-align: justify; text-indent: 12px;}
NOTA: un parametro composto da due o più parole deve essere racchiuso da virgolette, font-family: "MS Sans Serif"; Quando si propone una scelta fra più fonts con font-family, l'ultima scelta deve essere di una famiglia di fonts, in questo caso sans-serif.
Andrea Bianchi
Continua: Le Classi
Potete fare domande e discutere l'argomento sul Forum
|
Home ·
XHTML con Style ·
Primi Passi ·
Guida HTML ·
Guida CSS ·
Guida PHP ·
F.A.Q. ·
Scripting ·
Applets ·
Grafica Web ·
Forum ·
Comunicazioni 
per stampare questa pagina
Home Page ·
Aggiungi ai preferiti ·
Segnala il sito ai tuoi amici ·
