Foglio di style esterno
Foglio di style esterno Abbiamo visto come definire uno 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 è in assoluto il più comodo e pratico dei sistemi, quello in cui esiste un foglio di stile esterno, separato dalla pagina web, che racchiude tutte le dichiarazioni di style, e che viene 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 di uno o più fogli di style esterni, sarà sempre possibile definire all'occorrenza stili ad inizio pagina e stili in linea, questi avrebbero priorità su quanto dichiarato nel foglio di style esterno.
Cosa significa foglio di stile esterno?
Significa che se gli stili da definire sono molti, se più di una sola pagina web ne farà uso, la cosa migliore da fare è sicuramente quella di creare una struttura esterna alla quale potranno accedere tutte le pagine interessate.
Questa struttura altro non sarebbe che il foglio di style, un documento di normalissimo testo 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. Unica differenza che non dovrà contenere al suo interno le dichiarazioni di style perché già presenti nella pagina html che lo richiama.
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 i tempi in cui si passavano intere ore a rielaborare tutte le varie pagine per le modifiche e dove, immancabilmente, si finiva sempre col dimenticarne qualcuna.
Per creare questo foglio esterno sarà sufficiente ancora una volta un editor testuale, 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, 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 già messa nel documento HTML che lo richiama facendo uso della seguente sintassi:
<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. Per essere certi di non sbagliare mettetela come ultima riga di head. praticamente prima di </head><body>. Il nome_assegnato.css sarà il nome esatto che avrete deciso di usare per il vostro foglio di stile esterno. Evitate nomi lunghi e complessi ed evitate anche spazi vuoti e caratteri riservati quali: £ $ % & / ( ? nel nome che deciderete di usare.
Oltre al type è possibile specificare anche il media al quale si fa riferimento, dove all per tutti i dispositivi di visualizzazione, screen è usato per il browser sullo schermo, print per la stampante, handheld per dispositivi come i palmari. Volendo si possono specificare più di un solo media separandoli da virgole.
<link rel="stylesheet" href="nome_assegnato.css" type="text/css" media="screen">
Si possono avere più fogli di style esterni, è sufficiente richiamarli dalla pagina web allo stesso modo descritto sopra, uno di seguito all'altro:
<link rel="stylesheet" href="foglio_uno.css" type="text/css">
<link rel="stylesheet" href="foglio_due.css" type="text/css">
<link rel="stylesheet" href="foglio_tre.css" type="text/css">
Oppure dall'interno del foglio di style, sia interno che esterno, facendo uso di import ad inizio foglio, prima di definire qualsiasi altra regola e facendo precedere import dal simbolo chiocciola @.
@import "foglio_due.css";
@import "foglio_tre.css";
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: #ff0000;
text-decoration: none;
}
td{
font-family: "MS Sans Serif";
font-size: 12pt;
} p{
text-align: justify;
text-indent: 12px;
}
Vediamo cosa è stato ridefinito, in modo 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 di:
font-family: Verdana, Arial, sans-serif;
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.
margin-left: .5cm; margin-right: .5cm;
Margine laterale dai bordi destro e sinistro: 0,5cm
color:#000099;
Colore del testo blu scuro
font-size: 10pt;
Dimensione del font 10 punti
a:link{text-decoration: none; color: #009900;}
Link da visitare non sottolineati e di colore verde
a:visited{text-decoration: none; color: Gray;}
Link visitati non sottolineati e di colore grigio
a:hover{text-decoration: none; Color: #ff0000;}
Cambio colore al passaggio del mouse sopra il link, non sottolineati e di colore rosso
td{font-family: "MS Sans Serif"; font-size: 12pt;}
Celle di tabelle con font Ms Sans Serif dimensione 12 punti
p{text-align: justify; text-indent: 12px;}
Paragrafo con allineamento giustificato, indentizione 12 pixel
NOTA: un parametro composto da due o più parole come in questo esempio il nome del font, deve essere racchiuso da virgolette, font-family: "MS Sans Serif"; Quando si propone una scelta fra diversi tipi di fonts (uso di font-family), l'ultima scelta deve essere di una famiglia di fonts, in questo caso sans-serif.
In questa fase di apprendimento non si dovrebbe badare troppo al significato di tutte le varie sigle usate per l'esempio, meglio concentrarsi sul metodo di utilizzo, una volta capito il meccanismo le sigle da adoperare si vanno a leggere e si possono copiare dalla tabella dei --►Parametri. Continua: --► Le Classi
Dossier Antivirus
Utenti : 116
Utente online:
Anonimi online: 8
Visite totali: 2009192 
visitatori online
Torna in alto 
