Introduzione ai fogli di stile
I fogli di stile sono uno strumento molto
comodo. Permettono di risparmiare banda e modificare un intero sito cambiando
solo un file!
All'inizio usavano i css soltanto per formattare il testo. Ultimamente
prende sempre più piede la realizzazione di layout completi usando
solamente css.
La realizzazione dei layout con i css rende il lavoro molto più semplice
e creativo. I siti diventano molto più veloci da navigare perchè più leggeri.
Come se non bastasse sono più belli da vedere, l'interfaccia diventa
più amichevole.
Ci sono grossi vantaggi anche dal punto di vista dell'accessibilità.
Possiamo adattare i css ad ogni esigenza. Ad esempio possiamo realizzare
due fogli di stile diversi per lo stesso sito. Uno bello da vedere e l'altro
altamente accessibile e dare la possibilità agli utenti di scegliere
tra le due versioni.
Possiamo applicare i fogli di stile alle pagine web in due modi: tramite
un file esterno oppure inserendo il codice css direttamente nelle pagine.
Se scegliamo la seconda possibilità perdiamo gran parte dei vantaggi
descritti sopra. Ma in alcuni casi, come vedremo più avanti, può essere
utile.
Facciamo un esempio di cosa si può fare con i css a livelo base.
A destra toviamo il codice CSS usato per ottenere l'effetto.
prova css |
.Stile1 {
color: #FF0000;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
font-size: x-large;
} |
prova css |
.Stile2 {
font-family: "Courier New", Courier, monospace;
color: #00CC00;
font-size: smaller;
} |
prova css |
.Stile3 {
font-family: "Times New Roman", Times, serif;
color: #0000FF;
font-size: xx-large;
font-style: italic;
} |
Come possiamo vedere lo stile può cambiare radicalmente l'aspetto
grafico di un testo.