4 Creare contenuti per il web - Andrea Giachetti

Creare contenuti per il web: (X)HTML e CSS in dettaglio 79
mediante attributi e valori. Questo non è un modo ideale in quanto codifica simultaneamente
contenuto logico ed aspetto grafico. Inoltre le possibilità di modifica dell'aspetto grafico erano
limitate: la visualizzazione degli elementi era perlopiù standard e fissata dal browser.
Da HTML 4.01 si è cercato di separare il contenuto dal layout e di ampliare le possibilità di
variazioni stilistiche. Il risultato sono state le cosiddette regole di stile, che vengono in genere
codificate in documenti separati dalla pagina stessa detti fogli di stile o fogli di stile a cascata
(Cascading Style Sheets o CSS) .
La prima versione di questa codifica risale al 1996, la versione attuale 2.1 è del 2004 e si sta
lavorando alla versione 3.0.
Questa codifica separata fornisce numerosi vantaggi: innanzitutto consente di controllare in
maniera più semplice l'aspetto grafico della pagina, generando codice più compatto. In un sito si
possono inserire molte pagine che fanno riferimento ad un solo foglio di stile e questo stile può
essere variato senza dover toccare il codice delle pagine. Si possono anche utilizzare fogli di
stile differenti per supportare differenti strumenti di visualizzazione che necessitano di
adattamenti di blocchi e caratteri alle diverse dimensioni (monitor, stampanti, palmari, ecc.). In
tale modo si può anche supportare l'accessibilità (creando fogli appositi per lettori braille, ecc.),
sempre senza riscrivere i documenti.
Vediamo quindi la codifica dei CSS in maggior dettaglio. La sintassi delle regole di stile è
separata da quella dell'HTML/XHTML e viene collegata al documento HTML/XHTML in uno
dei seguenti modi:
• Mediante inserimento “inline” all'interno della pagina, inserendo l'apposito elemento
dentro , come nell'esempio sotto:
Inserire i fogli di stile in un documento
body { background: #FFFFCC; }
…
• Utilizzando uno o più documenti di stile associati (fogli di stile) contenenti le regole e
collegati alla pagina in uno dei due seguenti modi:
Inserire i fogli di stile in un documento
@import url(stile.css);