Fogli di style, CSS esterni:
Questo è sicuramente il
miglior utilizzo per gli style. Se utilizziamo un foglio
esterno possiamo in qualunque momento modificare ogni parametro del sito soltanto cambiando
un solo attributo, pensate a quanti fogli dovreste rivedere se non avete un foglio esterno
di style.
Altra proprietà fondamentale dei fogli di style esterni è il fatto di alleggerire il foglio e
permettere un caricamento più veloce delle pagine. Questa caratteristica si ottiene perché il
foglio di style viene caricato in memoria browser soltanto una volta (la prima) e viene poi
richiamato (se necessario) ogni volta che carichiamo una nuova pagina dello stesso sito (se sulla
pagina c'è il richiamo).
CREAZIONE E UTILIZZO:
- Create un foglio con formato .CSS (per esempio salvate un foglio con nome 'sito.css').
- Compilate il foglio inserendo soltanto i tag da variare con i loro attributi (vedi esempio per la sintassi).
- Richiamate il foglio CSS inserendo questa riga fra i tag head di ogni pagina:
<link rel=stylesheet href="nome.css" type="text/css">
Da adesso ogni parametro tag assumerà le caratteristiche del foglio CSS salvo indicato
diversamente.
Esempio di foglio css:
A:LINK {text-decoration:none; color:#000000;}
A:VISITED {text-decoration:none; color:#000000;}
A:HOVER {color:slateblue; text-decoration:none;}
A.ciao:link {font-family:Arial,verdana,Helvetica; color:#FFFFFF; text-decoration:none; font-size:14px}
A.ciao:visited {font-family:Arial,verdana,Helvetica; color:#FFFFFF; text-decoration:none; font-size:14px}
A.ciao:hover {font-family:Arial,verdana,Helvetica; color:#FFFFFF; text-decoration:underline; font-size:14px}
body {font-family:Arial,verdana,Helvetica; font-size:13px; color:2f4f4f;}
.ciao2{font-family:Arial,verdana,Helvetica; font-size:20px; color:2f4f4f; font-weight:bold;}
.esempi{font-family:Arial,verdana,Helvetica; font-size:12px; color:#031D81; font-weight:bold; font-style:italic;}
.titolo1{font-family:Arial,verdana,Helvetica; font-size:16px; color:#246688; font-weight:bold;}
.titolo2{font-family:Arial,verdana,Helvetica; font-size:12px; color:#246688; font-weight:bold;}