4 Creare contenuti per il web - Andrea Giachetti
4 Creare contenuti per il web - Andrea Giachetti
4 Creare contenuti per il web - Andrea Giachetti
You also want an ePaper? Increase the reach of your titles
YUMPU automatically turns print PDFs into web optimized ePapers that Google loves.
80<br />
oppure:<br />
<br />
<br />
Inserire i fogli di st<strong>il</strong>e in un documento<br />
<br />
...<br />
Questi ultimi metodi sono vantaggiosi in quanto realizzano propriamente uno dei principali<br />
vantaggi dell'uso dei fogli di st<strong>il</strong>e, cioè la separazione tra documento che contiene struttura<br />
logica e contenuto testuale e documento che contiene lo st<strong>il</strong>e di rappresentazione. Questo fa sì<br />
che si possa modificare lo st<strong>il</strong>e di tutte le pagine che importano lo stesso f<strong>il</strong>e, modificando solo<br />
quest'ultimo. L'altra possib<strong>il</strong>ità cui avevamo accennato, cioè quella di inserire differenti st<strong>il</strong>i <strong>per</strong><br />
differenti mezzi di visualizzazione può essere infine realizzata con l'attributo “media”, inserito<br />
in o , es:<br />
<br />
<br />
In questo caso ho due fogli di st<strong>il</strong>e e se <strong>il</strong> documento HTML è visualizzato sullo schermo, userò<br />
<strong>il</strong> primo, se è stampato, <strong>il</strong> secondo. I possib<strong>il</strong>i valori <strong>per</strong> l'attributo “media” sono: “screen”<br />
(desktop e laptop), “handheld” (PDA e smartphone), “print” (stampanti), “bra<strong>il</strong>le” (browser<br />
bra<strong>il</strong>le), “embossed” (stampanti bra<strong>il</strong>le), “projection” (proiezioni), “speech” o “aural”<br />
(sintetizzatori vocali), “tty” (telescriventi), “tv” (televisioni), “all” (tutti i dispositivi). Il<br />
supporto all'interpretazione dell'attributo media, <strong>per</strong>ò, non è ancora largamente diffuso.<br />
E' possib<strong>il</strong>e definire fogli di st<strong>il</strong>e alternativi anche senza che questi siano selezionati<br />
automaticamente in base al tipo di terminale. Basta infatti definire <strong>per</strong> ciascun f<strong>il</strong>e di st<strong>il</strong>e<br />
importato un'etichetta con l'attributo “title”. Molti browser di ultima generazione (ad esempio<br />
Moz<strong>il</strong>la Firefox) consentono in questo caso di scegliere <strong>il</strong> foglio di st<strong>il</strong>e da usare tra i diversi<br />
definiti dall'autore visualizzando le etichette in un menu (menù visualizza/st<strong>il</strong>e pagina).<br />
Si parla di fogli di st<strong>il</strong>e a cascata in quanto, essendo possib<strong>il</strong>e definire regole di st<strong>il</strong>e in vari<br />
modi e posizioni, in decodifica <strong>il</strong> browser scorre la lista delle regole <strong>per</strong> ciascun elemento della<br />
pagina ed a parità di specificità della validità della regola, considera valida l'ultima. Si noti che<br />
le regole di st<strong>il</strong>e possono essere inserite anche localmente a livello del singolo elemento,<br />
inserendo nell'elemento stesso l'attributo style=”...” seguito dalla definizione della regola<br />
che si applicherà quindi al solo elemento che la contiene. Se non si ut<strong>il</strong>izzano i fogli di st<strong>il</strong>e<br />
quest'ultima modalità è appunto quella che sostituisce la formattazione ottenuta con gli attributi<br />
vecchio st<strong>il</strong>e di HTML, in genere dichiarati “deprecated” nelle ultime versioni del linguaggio e<br />
quindi da evitare.<br />
Cerchiamo ora di chiarire cosa siano le regole di st<strong>il</strong>e che troveremo, ad esempio, nei f<strong>il</strong>e<br />
style.css degli esempi visti prima. La sintassi è molto semplice, ed è riportata in Figura 39:<br />
prima di tutto si inserisce un selettore, che determina a quali parte del documento si applica la<br />
regola, e poi un numero variab<strong>il</strong>e di coppie proprietà-valore, che attribuiscono le proprietà di