Stile esterno alla pagina
Il
modo più pratico per definire i nostri stile di pagina è sicuramente quello in
cui tutto quello che desideriamo in termini di "style" lo dichiariamo in
un file esterno alla pagina html. In questo file, salvato con
l'estensione del nome css, dichiareremo tutti gli "attributi" le "classi"
e gli "id" che ci necessitano e richiameremo il file ad inizio pagina.
Sembra
chiaro che tale metodo può essere utilizzato da tutte le pagine che richiamano
il file (definito e scritto un'unica volta) restando comunque sempre possibile
definire stili ad inizio pagina e/o stili
in linea e questi avrebbero
sempre priorità sul quanto dichiarato nel foglio esterno.
Per creare questo foglio esterno sarà sufficiente 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, privo di particolari formattazioni, avendo cura di salvare il file
con estensione css e non txt come normalmente avviene.
Avremo cura di posizionare questa riga
di codice per il richiamo del nostro foglio Style
<link rel=stylesheet href="nome_assegnato.css" type="text/css">
|
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.
Questa riga di codice sarà ovviamente inserita poi 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,sans-serif;
font-size: 10pt;
} |
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 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;
|
A:LINK{
text-decoration: none;
color: #009900 ;
} |
Link da visitare: non sottolineati di colore verde =
A:LINK{text-decoration: none; color: #009900;}
|
A:VISITED{
text-decoration: none;
color: Gray;
} |
Link visitati: non sottolineati di colore grigio =
A:VISITED{text-decoration: none; color : Gray;}
|
A:HOVER{
Color: #ffff00;
text-decoration: none;
} |
Cambio colore al passaggio del mouse: non sottolineati di colore grigio =
A:HOVER{text-decoration: none; Color: #ffff00;}
|
TD{
font-family: "MS Sans Serif";
font-size: 12pt;
} |
Tabelle: font Ms Sans Serif dimensione 12 punti=
TD{font-family: "MS Sans Serif";font-size: 12pt;}
|
p{
text-align: justify;
text-indent: 12px;
} |
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";
Continua:
Le Classi |