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
 
 20 May 2013
rss directory aggiungi in preferiti  
Home    Mappa directory    Giochi    XXXDirectory    Script    Forum




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