Introduzione al linguaggio dei fogli di stile

Questo documento è la traduzione in italiano dell'unica versione ufficiale del documento che è la versione originale in inglese "Adding a touch of Style" su http://www.w3.org/MarkUp/Guide/Style. I possibili errori dovuti alla traduzione sono di esclusiva responsabilità della traduttrice Chiara Minnucci e non sono in alcun modo imputabili al W3C. Questa traduzione è stata realizzata nell'Aprile del 2007. Per qualsiasi commento su questa traduzione rivolgersi a Chiara Minnucci.

Come aggiungere un tocco di stile

Questa è una breve guida per aiutarti a dare stile alle tue pagine Web. Essa mostra come usare il linguaggio dei fogli di stile (CSS) oltre ad alternative come l'uso dello stesso HTML. Questo tragitto ti guiderà senza incontrare molti dei problemi creati dalle differenze tra diverse marche e versioni di browser.

Per far funzionare i fogli di stile, è importante che il tuo codice sia privo di errori. Un modo valido per correggere gli errori in modo automatico è utilizzare lo strumento HTML Tidy. Quest'ultimo corregge il codice rendendolo più facile da leggere e da scrivere. Vi raccomando di usare regolarmente Tidy su ogni codice che state scrivendo. Tidy è molto efficace per pulire codici creati da strumenti ufficiali non molto accurati.

Come iniziare

Iniziamo definendo il colore del testo e dello sfondo. Si potrà fare ciò utilizzando l'elemento style per definire le proprietà dello stile per i tag del documento:

L'elemento di stile è collocato all'interno dell'intestazione del documento. Ecco un esempio di un file HTML nel quale si trova l'elemento di stile riportato sopra. Un buon modo per sperimentare i fogli di stile CSS è copiare ed incollare questo esempio nel tuo editor:

Le informazioni tra <style> e </style> sono scritte in un linguaggio speciale per le regole di stile. Ogni regola inizia con un tag seguito da una lista di proprietà di stile in parentesi graffe. In questo esempio, la regola è associata al tag <body>. Come si potrà notare, il tag <body> fornisce le basi per creare lo stile della tua pagina Web.

Ogni proprietà di stile inizia con il nome della proprietà, seguito da due punti e, alla fine, il valore della proprietà. Quando c'è più di una proprietà di stile nella lista, avrai bisogno di usare il punto e virgola tra di loro per separarle una dall'altra. In questo esempio, ci sono due proprietà: color che definisce il colore del testo, e background che definisce il colore dello sfondo della pagina. Vi raccomando di aggiungere sempre punto e virgola anche dopo l'ultima proprietà.

I colori possono essere forniti sia attraverso nomi sia attraverso valori numerici, come ad esempio rgb (255, 204, 204) che è un rosa corposo. I tre numeri corrispondono rispettivamente a rosso, verde e blu nella gamma da 0 a 255. Potrai inoltre usare un valore esadecimale, e lo stesso colore può essere scritto come #FFCCCC. Maggiori informazioni sul colore saranno fornite in una delle prossime sezioni.

Nota che l'elemento di stile deve essere collocato nell'intestazione del documento insieme all'elemento di stile. Non deve essere collocato nella parte centrale del testo.

Come collegare ed utilizzare un foglio di stile separato

Se intendi usare lo stesso stile per diverse Pagine Web, vale la pena usare un foglio di stile separato che potrai utilizzare poi con ogni pagina. Potrai fare ciò seguendo quanto sotto:

Il tag <link> deve essere collocato all'interno dell'elemento <head> ... </head>. Ecco un file HTML con un collegamento ad un foglio di stile esterno:

L'elemento di collegamento rel deve essere impostato al valore stylesheet per permettere al browser di riconoscere che l'indirizzo Web è fornito dall'attributo href (URL) per il tuo foglio di stile. Un file di un foglio di stile semplice potrebbe somigliare al seguente:

Nota che lo stesso file HTML può collegarsi ad un foglio di stile esterno ed includere inoltre un elemento di stile per impostazioni di stile aggiuntive, specifiche per questa pagina. Se metti l'elemento di collegamento prima dell'elemento di stile, potrai usare quest'ultimo per annullare le impostazioni di stile nel foglio di stile collegato.

Come impostare i margini della pagina

Le pagine Web hanno un aspetto molto più carino con margini più grandi. Puoi impostare il margine sinistro e destro con le proprietà margin-left e margin-right, ad esempio:

Questo stabilisce entrambi i margini al 10% dell'ampiezza della finestra e i margini saranno in scala quando cambierai la dimensione della finestra del browser.

Come impostare il rientro sinistro e destro

Per distinguere un pò di più le intestazioni, puoi farle iniziare all'interno del margine fissato per il testo, ad esempio:

Questo esempio ha tre regole di stile. Una per il testo, una per h1 (usata per le intestazioni più importanti) e una per il resto delle intestazioni (h2,h3,h4,h5 e h6). I margini delle intestazioni si aggiungono ai margini del testo. I valori negativi vengono usati per spostare l'inizio dell'intestazione alla sinistra del margine fissato per il testo.

Nelle sezioni che seguiranno occorrerà collocare le particolari regole di stile all'interno dell'elemento di stile nell'intestazione del documento (se presente) o in un foglio di stile collegato.

Come definire la grandezza dello spazio bianco in alto ed in basso

I browser fanno un buon lavoro per quanto riguarda gli spazi bianchi sopra e sotto le intestazioni ed i paragrafi ecc. Ci sono due motivi per tenere sotto controllo da solo tutto ciò: quando vuoi molto spazio bianco prima di una particolare intestazione o paragrafo, o quando hai bisogno di un controllo preciso per le spaziature generali.

La proprietà margin-top specifica lo spazio superiore e quella margin-bottom specifica lo spazio inferiore. Per impostare entrambi questi margini per tutte le intestazioni h2, puoi scrivere:

La misura em è un'unità molto utile in quanto si rapporta con la misura del carattere. Un em rappresenta l'altezza del carattere. Usando gli em puoi mantenere il look della pagina Web indipendentemente dal formato del carattere. Questa è un'alternativa molto più sicura rispetto ai pixel o punti che possono causare problemi per utenti che hanno bisogno di caratteri grandi per leggere il testo.

I punti sono comunemente usati nei pacchetti di video scrittura, ad esempio testo da 10 punti. Sfortunatamente la stessa misura per il punto è resa in modo diverso in browser diversi. Ciò che funziona in un browser risulterà illeggibile su un altro. Continuare ad utilizzare gli em evita questo tipo di problemi.

Per specificare lo spazio sopra ad una particolare intestazione, dovrai creare uno stile specifico per l'intestazione. Potrai fare ciò con l'attributo class nel codice, ad esempio:

La regola inizia con il nome del tag, un punto e poi il valore dell'attributo class. Fai attenzione ad evitare di collocare uno spazio prima o dopo il punto. Se lo farai la regola non funzionerà. Ci sono altri modi per impostare gli stili per un particolare elemento, ma l'attributo class è il modo più flessibile.

Quando un'intestazione è seguita da un paragrafo, il valore per il margine inferiore dell'intestazione non è aggiunto al valore del margine superiore del paragrafo. Invece, il massimo dei due valori viene usato per la spaziatura tra l'intestazione e il paragrafo. Questa sottigliezza si applica al margine superiore e al margine inferiore a prescindere da quali tag sono coinvolti.

Rientro della prima riga

A volte potrai decidere di avere un rientro della prima riga di ogni paragrafo. La seguente regola di stile emula il modo tradizionale in cui i paragrafi sono presentati nei romanzi:

Essa fa rientrare la prima linea di ogni paragrafo di 2 em ed elimina la spaziatura tra paragrafi.

Come controllare il carattere

Questa sezione spiega come impostare il carattere ed il suo formato e come aggiungere il corsivo, il neretto e altri stili.

Stili per il carattere

Gli stili più comuni rendono il testo in corsivo o neretto. Molti browser rendono il tag em in corsivo e il tag strong in neretto. Mettiamo che tu invece voglia che em appaia in bold italic e strong in bold-uppercase:

Come impostare il formato del carattere

Molti browser usano un carattere più grande per intestazioni più importanti. Se cancelli il formato di default, puoi rischiare di rendere il formato troppo piccolo da poterlo leggere, in modo particolare se usi i punti. Si raccomanda quindi di specificare il formato del carattere in termini relativi.

Questo esempio stabilisce il formato dell'intestazione in percentuali relative al font usato per il testo normale:

Come impostare le famiglie di caratteri

È molto probabile che i tuoi caratteri preferiti non siano disponibili in tutti i browser. Per ovviare a ciò, ti è consentito elencare diversi tipi di caratteri, in ordine di preferenza. C'è una breve lista di nomi di stile per i caratteri che sono sicuramente disponibili, pertanto si raccomanda di terminare la tua lista con uno di questi stili: serif, sans-serif, cursive, fantasy, o monospace, come ad esempio:

In questo esempio le intestazioni importanti compariranno in Garamond, se questo stile non è presente, in Times New Roman, e se quest'ultimo non è disponibile nel default del browser, in Sans-Serif. Il testo di un paragrafo appare in Verdana e se questo non è disponibile nel default del browser in Sans-Serif.

La leggibilità dei diversi caratteri dipende generalmente più dall'altezza delle lettere in minuscolo che dalla grandezza del carattere in quel tipo di stile. Stili come Verdana sono molto più leggibili di quelli come Times New Roman e sono quindi raccomandati per il testo del paragrafo.

Come evitare problemi con stili di scrittura e margini

La mia prima regola è evitare che il testo non sia ben racchiuso a livello di paragrafo (elemento p.). Ad esempio:

Il testo che segue l'intestazione può correre il rischio su alcuni browser di essere realizzato con carattere e margini incorretti. Ti consiglio pertanto di racchiudere tutto questo testo in un paragrafo, ad esempio:

La mia seconda regola è stabilire la famiglia di stile per gli elementi <pre>, poichè alcuni browser si dimenticano di usare un carattere fisso quando si stabiliscono il formato del carattere o altre proprietà per gli elementi <pre>.

La mia terza regola è stabilire la famiglia di caratteri su intestazioni, p e ul qualora tu intenda fissare bordi o sfondi su elementi quali div. Questa è una via d'uscita per un errore che si verifica quando il browser si dimentica di usare la famiglia di caratteri ereditata ed utilizza invece i caratteri di default come stabilito nelle preferenze del browser.

Come aggiungere i bordi e lo sfondo

Puoi facilmente aggiungere un bordo intorno ad un'intestazione, ad una lista, ad un paragrafo o ad un insieme di questi elementi racchiusi in un div. Ad esempio:

div.box { border: solid; border-width: thin; width: 100% }

Potrai notare che senza la proprietà width alcuni browser collocano il margine destro troppo a destra. Questo può essere usato con un codice come:

<div class="box">
Il contenuto all'interno di questo DIV sarà racchiuso in un riquadro con una linea sottile intorno ad esso.
</div>

C'è una scelta limitata di tipi di bordi: a puntini, a trattini, spessi, doppi, a scanalatura, con bordo, verso l'interno o verso l'esterno. La proprietà border-width definisce l'ampiezza. I suoi valori includono un'ampiezza thin, medium e thick (sottile, media e spessa) insieme ad un'ampiezza specifica, ovvero 0.1 em. La proprietà border-color ti permette di stabilire il colore.

Un bell'effetto è colorare lo sfondo del riquadro con un colore uniforme o con un'immagine a piastrelle. Per fare ciò, puoi utilizzare la proprietà background. Puoi riempire il riquadro includendo un div, seguendo questo schema:

  div.color {
    background: rgb(204,204,255);
    padding: 0.5em;
    border: none;
  }

Senza un'esplicita definizione per la proprietà border, alcuni browser coloreranno solamente lo sfondo di ogni carattere. La proprietà padding introduce dello spazio tra i limiti della regione colorata ed il testo in essa contenuto.

Potrai definire diversi valori per il rivestimento a sinistra, a destra, in alto, o in basso utilizzando le proprietà padding-left, padding-top, padding-right e padding-bottom ., per esempio:

Supponiamo che tu voglia bordi solo su alcuni lati. Puoi controllare le proprietà border per ognuno dei lati indipendentemente usando le proprietà border-left, border-top, border-right e border-bottom insieme al suffisso appropriato: style, width o color, ad esempio:

Ciò crea un bordo rosso solo lungo il lato sinistro di ogni paragrafo con la classe changed.

Come definire i colori

Alcuni esempi per definire i colori sono apparsi nelle sezioni precedenti. Ecco un richiamo:

Questo esempio stabilisce come default il testo in nero e lo sfondo bianco, tuttavia rende gli elementi strong in rosso. Ci sono 16 nomi standard per i colori, che sono spiegati più avanti. Puoi inoltre usare i valori decimali per il rosso, verde e blu dove ogni valore è nell'intervallo da 0 a 255, ad esempio rgb (255, 0, 0) è lo stesso valore del colore red. Puoi inoltre usare per i colori i valori esadecimali che iniziano con il carattere '#' seguito dai sei cifre esadecimali. Un convertitore nelle due direzioni viene incluso qui sotto; questo vi permetterà di convertire valori RGB in valori esadecimali.

Come definire i colori del collegamento

Puoi usare CSS per definire il colore per i collegamenti d'ipertesto, con un colore differente per i collegamenti che devi ancora aprire, che hai già aperto o un colore attivo quando si clicca sul collegamento. Puoi perfino stabilire il colore per quando la freccetta del mouse si muove intorno al collegamento.

A volte, potresti voler mostrare i collegamenti ipertestuali senza che questi siano sottolineati. Puoi fare questo definendo la proprietà text-decoration a none, per esempio:

La maggior parte delle persone quando vedono un testo sottolineato su una pagina Web, si aspettano che questo sia parte di un collegamento ipertestuale. Di conseguenza, si consiglia di lasciare la sottolineatura per collegamenti ipertestuali. Si applica un simile argomento ai colori dei collegamenti; la maggior parte delle persone interpreterà il testo blu sottolineato come collegamenti ipertestuali. Si consiglia di non modificare i colori dei collegamenti, tranne quando il colore dello sfondo renderebbe il testo difficile da leggere.

Daltonismo

Quando si usano i colori, dovrai ricordarti che dal 5 al 10% degli uomini soffrono di una certa forma di daltonismo. Ciò può causare difficoltà a distinguere tra il rosso e il verde, o tra il giallo e il blu. In casi rari, c'è un'incapacità a percepire ogni colore. Si raccomanda di evitare combinazioni di colori per gli sfondi o per i rilievi che renderebbero il testo difficile da leggere per persone con problemi di daltonismo.

Nomi di colori

Il set standard di nomi per i colori è il seguente: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white e yellow. Questi 16 colori sono definiti in HTML 3.2 e 4.01 e corrispondono al set base VGA su PC. Molti browser riconoscono un insieme più ampio di nomi di colori ma l'uso di questi altri colori non è raccomandato.

**Nome di colori e il loro valore sRGB**
	black = "#000000"		green = "#008000"
	silver = "#C0C0C0"		lime = "#00FF00"
	gray = "#808080"		olive = "#808000"
	white = "#FFFFFF"		yellow = "#FFFF00"
	maroon = "#800000"		navy = "#000080"
	red = "#FF0000"		blue = "#0000FF"
	purple = "#800080"		teal = "#008080"
	fuchsia = "#FF00FF"		aqua = "#00FFFF"

Valori esadecimali per i colori

Valori come "#FF9999" rappresentano i colori per il rosso, il verde ed il blu in numeri esadecimali. I primi due caratteri che seguono “#” danno il valore per il rosso , gli altri due subito dopo per il verde e gli ultimi due per il blu. Questi numeri sono sempre nella gamma decimale da 0 a 255. Se conosci i valori decimali puoi convertirli in esadecimali usando un calcolatore come quello che è nel pacchetto di Microsoft Windows.

Colori sicuri per i browser

I nuovi computer utilizzano migliaia o milioni di colori; tuttavia molti vecchi sistemi di colori possono mostrare solo fino a 256 colori alla volta. Per superare questo sistema questi browser fanno riferimento ad una tavolozza fissa. L'effetto è spesso visibile come una sgranatura di colori mentre il browser cerca di approssimare il vero colore in ogni punto dell'immagine. Questo problema scomparirà gradualmente quando i vecchi computer saranno sostituiti da modelli più nuovi.

Molti browser utilizzano la stessa tavolozza chiamata tavolozza sicura per i browser (browser safe palette). Questa usa 6 gradazioni, distanziate in modo omogeneo, nei colori rosso, verde e blu e nelle loro combinazioni. Se selezioni colori da questa tavolozza, potrai evitare l'effetto con sgranatura. Ciò è particolarmente utile per aree di sfondo d'immagini.

Se il browser sta utilizzando la browser safe palette, allo sfondo della pagina sarà applicato il colore più vicino nella tavolozza. Se imposti lo sfondo pagina ad un colore che non è nella browser safe palette, correrai il rischio di avere diversi colori nello sfondo, a seconda che il computer utilizzi colori veri o colori indicizzati.

Questi sono costruiti da colori dove il rosso, il verde e il blu sono limitati ai valori:

Qui di seguito si illustra una tabella dei colori consigliati per i browser insieme ai loro valori esadecimali. I miei ringraziamenti a Bob Stein per questa disposizione.

Cosa si può dire di browser che non utilizzano CSS?

Vecchi browser, ovvero prima di Netscape 4.0 e Internet Explorer 4.0, o non utilizzano CSS per nulla o lo fanno in modo inconsistente. Per questa tipologia di browser, puoi controllare lo stile utilizzando lo stesso HTML.

Come impostare il colore e lo sfondo

RGB	00	51	102	153	204	255
Hex	00	33	66	99	CC	FF

Puoi impostare il colore usando il tag <body>. Nel seguente esempio si imposta lo sfondo con il colore bianco ed il testo in nero:

L'elemento <body> deve essere collocato prima del contenuto visibile della pagina Web, ovvero, dopo l'intestazione della pagina. Puoi inoltre controllare il colore dei collegamenti ipertesto. Ci sono tre attributi per fare ciò:

Puoi anche fare in modo che il browser rivesta lo sfondo pagina con un'immagine, utilizzando l'attributo background per specificare l'indirizzo Web dell'immagine, ovvero:

È una buona idea specificare il colore dello sfondo usando l'attributo bgcolor, nel caso in cui il browser sia incapace di rendere l'immagine. Dovreste controllare che i colori scelti non creino problemi di leggibilità. Come esempio estremo potete considerare il seguente:

Molti browser rendono il testo nero per default. Il risultato finale è che la pagina sarà con il testo nero su uno sfondo nero! Molte persone possono soffrire di una certa forma di daltonismo e, ad esempio, il verde oliva può apparire marrone per alcuni.

Un problema diverso compare quando si cerca di stampare la pagina Web. Molti browser ignoreranno il colore dello sfondo, ma seguiranno fedelmente il colore del testo. Impostare il testo al colore bianco risulterà spesso in una pagina vuota quando si stampa; pertanto il seguente esempio non è consigliato:

Le tabelle possono essere usate per una varietà di effetti d'impaginazione e sono ampiamente utilizzate per questo. Nel futuro, questo ruolo verrà sicuramente sostituito da fogli di stile, che consentono di raggiungere in modo più pratico un'impaginazione precisa con meno sforzo.

Come impostare lo stile di scrittura, il suo formato ed il colore

Il tag <font> può essere usato per selezionare la scrittura, per definire il suo colore e formato. In questo esempio, viene definito solo il colore:

L'attributo face viene usato per definire lo stile di scrittura. Esso applica una lista di font in ordine di preferenza, per esempio:

L'attributo size può essere usato per selezionare il formato della scrittura ed è espresso con un numero da 1 a 6. Se collochi un segno - o + prima del numero, esso viene interpretato come un valore relativo. Usate size="+1" quando vuoi usare il formato immediatamente più grande e size="-1" quando vuoi utilizzare il formato immediatamente più piccolo, come si vede nell'esempio.

Ci sono delle cose che dovreste evitare: non scegliete delle combinazioni di colori che rendono il testo difficile da leggere per persone che hanno problemi di daltonismo. Non utilizzate stili di scrittura che rendono il testo normale in alcune intestazioni; queste ultime dovrebbero essere sempre evidenziate usando i marcatori da h1 a h6, a secondo dell'importanza delle intestazioni.

Come ottenere ulteriori informazioni

Per ulteriori informazioni sul CSS e sugli strumenti che lo utilizzano, dovreste guardare il sito W3C home page for CSS. Questo sito contiene dai consigli generali fino a libri su HTML e CSS, come ad esempio, "Raggett on HTML 4" ", pubblicato nel 1998 da Addison Wesley. Per una spiegazione più dettagliata su CSS, "Cascading Style Sheets" di Håkon Wium Lie e Bert Bos, pubblicato nel 1999 da Addison Wesley, questo testo vi da un quadro dettagliato sul CSS come può essere fornito dai creatori stessi del CSS

E' mia intenzione ampliare questa guida con pagine aggiuntive che spiegano per quanto riguarda il CSS i fogli di stile audio, la stampa e il posizionamento

rosso:		Valore eadecimale
verde:
blu: