|
|
Guida ai CSS
Foglio di style
esterno Abbiamo visto come definire uno stile in
linea quando magari serve una veloce particolarità delimitata ad una sola
zona del nostro documento.
Abbiamo visto anche come definire invece uno stile ad inizio
pagina al quale tutto il documento poteva fare riferimento ed uso.
Vediamo adesso quello che secondo me è il più comodo e pratico dei sistemi,
quello in cui esiste un foglio esterno separato dal documento, e nel quale
scrivere tutti gli stili che necessitano comprese le classi e gli eventuali id.
Anche nel caso in cui decidessimo di fare uso di un foglio di style esterno, sarà
possibile definire all'occorrenza stili ad inizio pagina o stili in linea e
questi avrebbero la precedenza sul nostro
foglio esterno.
Cosa significa foglio di stile esterno ?
Significa che se gli stili definiti sono molti, o meglio ancora molte sono le
pagine web che ne faranno uso, la cosa migliore, non fosse altro che per
praticità d'uso, sarà quella di creare una struttura alla quale tutte le
pagine possano fare riferimento, questa struttura altro non sarebbe che il
nostro 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 adoperando le
stesse regole sintattiche viste 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 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 dove poi immancabilmente se ne dimenticava 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 comunque che il wordpad o notepad a corredo di windows andranno
benissimo, l'importante sarà salvare sempre in formato ascii cioè privo di
particolari formattazioni, 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 files), potrà leggere come fare a questo
link.
Esaminiamo più attentamente il nostro foglio 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, questo perchè
essendo un foglio esterno la dichiarazione viene messa nel documento HTML che lo
richiama, facendo uso delle 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 assegnare al file stesso.
Ovviamente questa riga deve essere inserita in tutte le pagine web che fanno
riferimento al foglio di style così creato.
un foglio di style esterno tipo potrebbe essere questo:
BODY{
margin-left : .5cm;
margin-right : .5cm;
color : #000099;
font-family : Verdana,Arial,Helvetica;
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 ridefinisce, tanto per capire meglio e cominciare a famigliarizzare
con le varie sigle:
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 fare uso di Arial, se anche questo dovesse
mancare allora Helvetica, dopo di che sarà assunto il font di default =
font-family : Verdana,Arial,Helvetica;
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 di colore verde =
A:LINK{text-decoration : none; color : #009900;}
Link visitati: non sottolineati di colore grigio =
A:VISITED{text-decoration : none; color : Gray;}
Cambio colore al passaggio del mouse: non sottolineati di colore grigio =
A:HOVER{text-decoration :none; Color : #ffff00;}
Tabelle: 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;}
Continua
Nuova pagina 1
|
|
