Creare e gestire i fogli di style esterni. Perché sono importanti e cosa possono offrire al webmaster.
ALLWEB free
Web Directory Script Linguaggi
Italiano Inglese Tutte
 
 01 Nov 2014
aggiungi in preferiti  
Home    Mappa directory    Script




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;}