Introduzione di Dave Raggett ai CSS

PRIMA PAGINA

Nota del traduttore. La presente traduzione è stata autorizzata da Dave Raggett, autore del testo inglese, con un messaggio di martedì 24/04/2001 indirizzato al sottoscritto.

Il documento originale, intitolato Adding a touch of style, è disponibile sul sito W3C all'indirizzo http://www.w3.org/MarkUp/Guide/Style.html. Non si tratta di un documento normativo e come tale è soggetto a possibili variazioni. La traduzione, effettuata sul testo inglese aggiornato al 29 agosto 2000, può contenere errori.

Aggiungere un tocco di stile

Questa è una breve guida su come stilizzare le vostre pagine Web. Vi sarà mostrato come usare il linguaggio Cascading Style Sheets (CSS) del W3C come pure soluzioni alternative all'interno dello stesso HTML. L'itinerario metterà in chiaro la maggior parte dei problemi causati dalle differenze tra i diversi tipi e versioni di browser.

Perché i fogli di stile funzionino è importante che il vostro codice di marcatura sia privo di errori. Un metodo conveniente per correggere automaticamente gli errori di marcatura è utilizzare il programma HTML Tidy, che, tra le altre cose, riordina il codice di marcatura rendendo più facile leggerlo e modificarlo. La mia raccomandazione è di lanciare regolarmente Tidy su qualsiasi codice voi stiate modificando. Tidy è molto efficace nel ripulire il codice di marcatura creato con strumenti di produzione dai comportamenti sciatti.

Per cominciare

Cominciamo con l'impostare il colore del testo e dello sfondo. Per mezzo dell'elemento STYLE potete definire le proprietà di stile dei marcatori del documento:

Tutto ciò che è compreso tra <style> e </style> è scritto nella notazione speciale dei comandi di stile. Ogni comando comincia con un nome di marcatore seguito da un elenco di proprietà di stile racchiuso tra le parentesi { e }. In questo caso il comando agisce sull'elemento body. Come vedrete, l'elemento body fornisce le basi per impostare l'aspetto complessivo della vostra pagina Web.

Ogni proprietà di stile comincia con il nome della proprietà, seguito dai due punti e, infine, dal valore della proprietà. Quando c'è più di una proprietà di stile nell'elenco, dovete usare un punto e virgola tra ciascuna di esse per delimitare ogni proprietà dalla successiva. In questo esempio sono presenti due proprietà - "color" che imposta il colore del testo, e "background" che imposta il colore di sfondo della pagina. Io raccomando sempre di aggiungere il punto e virgola anche dopo l'ultima proprietà.

I colori possono essere dati come nomi o come valori numerici, per esempio rgb(255, 204, 204) che è un rosa carne. I tre numeri corrispondono rispettivamente a rosso, verde e blu in una gamma che va da 0 a 255. Potete utilizzare anche la notazione esadecimale: lo stesso colore può essere scritto anche come #FFCCCC. Maggiori dettagli sul colore sono forniti in una sezione successiva.

Notate che l'elemento style deve essere inserito nella testa del documento insieme con l'elemento title. Non dovrebbe essere inserito all'interno del corpo.

Collegare ad un foglio di stile separato

Se è probabile che vogliate utilizzare gli stessi stili per parecchie pagine Web, vale la pena di considerare la possibilità di usare un foglio di stile separato, al quale attivare un collegamento da ciascuna pagina. Potete farlo nel modo che segue:

L'elemento LINK dovrebbe essere posizionato nella testa del documento. L'attributo rel deve essere impostato al valore "stylesheet" per consentire al browser di riconoscere che l'attributo href fornisce l'indirizzo Internet (URL) del vostro foglio di stile.

Impostare i margini della pagina

Le pagine Web hanno un aspetto molto più gradevole con margini più grandi. Potete impostare i margini sinistro e destro grazie alle proprietà "margin-left" e "margin-right", ad esempio:

Ciò imposta entrambi i margini al 10% della larghezza della finestra, e i margini saranno scalati proporzionalmente al ridimensionamento della finestra del browser.

Impostare i rientri sinistro e destro

Allo scopo di rendere le intestazioni un po' più riconoscibili, è possibile farle cominciare all'interno del margine impostato per il body, ad esempio:

Questo esempio ha tre comandi di stile. Uno per l'elemento body, uno per h1 (usato per le intestazioni più importanti) ed uno per il resto delle intestazioni (h2, h3, h4, h5 e h6). I margini delle intestazioni si sommano ai margini del body. I valori negativi sono usati per spostare l'inizio delle intestazioni alla sinistra del margine impostato per il body.

Nelle sezioni successive, gli esempi di particolari comandi di stile dovranno essere posizionati all'interno dell'elemento style nella testa del documento (se presente) o in un foglio di stile collegato.

Controllare lo spazio bianco sopra e sotto

I browsers fanno un gran bel lavoro con gli spazi bianchi sopra e sotto le intestazioni e i paragrafi, ecc. Due ragioni per acquisire voi stessi il controllo su questo comportamento sono: quando volete un mucchio di spazio bianco prima di una particolare intestazione o di un paragrafo, o quando vi occorre un preciso controllo sulla spaziatura in generale.

La proprietà "margin-top" specifica lo spazio sopra, mentre "margin-bottom" specifica lo spazio sotto. Per impostarli per tutte le intestazioni h2, potete scrivere:

Gli em sono unità di misura molto utili poiché vengono scalati con la dimensione del carattere. Un em equivale all'altezza del carattere. Usando gli em potete preservare l'aspetto generale della pagina Web indipendentemente dalla grandezza del carattere. Questo è molto più sicuro che usare alternative quali pixel o punti, che possono causare problemi all'utente che necessita di caratteri grandi per riuscire a leggere il testo.

I punti sono usati comunemente nei programmi di videoscrittura, es.: un testo di 10pt. Sfortunatamente la medesima grandezza del punto è visualizzata in modo differente su differenti browser. Ciò che appare perfetto con un browser sarà illeggibile con un altro! Non allontanarsi dall'uso degli em evita questi problemi.

Per specificare lo spazio sopra una particolare intestazione, dovreste creare uno stile con un nome per quell'intestazione. Potete farlo inserendo l'attributo class nel codice di marcatura, ad esempio:

Il comando di stile comincia con il nome dell'elemento, segue un punto e poi il valore dell'attributo class. Fate attenzione ad evitare di inserire spazi prima o dopo il punto. Se lo fate, il comando non funzionerà. Vi sono altri modi per impostare gli stili per un particolare elemento, ma l'attributo class è il più flessibile.

Quando un'intestazione è seguita da un paragrafo, il valore di margin-bottom dell'intestazione non è aggiunto al valore di margin-top del paragrafo. Invece, viene usato il maggiore dei due valori per definire lo spazio tra l'intestazione e il paragrafo. Questa sottigliezza si applica a margin-top e a margin-bottom indipendentemente da quali siano gli elementi coinvolti.

Rientrare la prima riga

Può capitare talvolta che vogliate creare un rientro per la prima riga di ciascun paragrafo. Il seguente comando di stile emula il modo tradizionale in cui i paragrafi sono resi nei romanzi:

Esso fa rientrare la prima riga di ogni paragrafo di 2 em e sopprime lo spazio tra un paragrafo e l'altro.

Controllare il carattere

Questa sezione spiega come impostare il carattere e la dimensione, e come aggiungere corsivo, grassetto e altri stili.

Stili dei caratteri

Gli stili più comuni consistono nel piazzare il testo in corsivo o in grassetto. La maggior parte dei browser visualizza l'elemento em in corsivo e l'elemento strong in grassetto. Poniamo invece che voi vogliate che em appaia in grassetto corsivo e strong in grassetto maiuscolo:

Se vi sentite così propensi, potete forzare le intestazioni ad apparire in lettere minuscole nel modo che segue:

Impostare la dimensione del carattere

La maggior parte dei browser usa una dimensione del carattere maggiore per le intestazioni più importanti. Se annullate la dimensione predefinita, correte il rischio di rendere il testo troppo piccolo per essere leggibile, particolarmente se usate i punti. Vi raccomando perciò di specificare la dimensione dei caratteri in termini relativi.

Questo esempio imposta la dimensione delle intestazioni in percentuali relative alla dimensione usata per il testo normale:

Impostare la famiglia di caratteri

E' probabile che il vostro carattere favorito non sia disponibile su tutti i browser. Per aggirare questo problema, potete elencare una serie di caratteri in ordine di preferenza. Ecco un breve elenco di generici nomi di carattere la cui disponibilità è garantita, così vi raccomando di terminare la vostra lista con uno di questi: serif, sans-serif, cursive, fantasy o monospace, per esempio:

In questo esempio, le intestazioni importanti dovrebbero essere mostrate preferibilmente in Garamond; in sua mancanza in Times New Roman, e, se anche questo è indisponibile, nel carattere con le grazie predefinito del browser. I paragrafi di testo dovrebbero apparire invece in Verdana o, se questo non è disponibile, nel carattere a bastoncino predefinito del browser.

La leggibilità di differenti caratteri dipende generalmente più dall'altezza delle lettere minuscole che dalla dimensione del carattere stesso. Caratteri come il Verdana sono molto più leggibili di quelli come il Times New Roman e sono perciò raccomandati per i paragrafi di testo.

Evitare problemi con caratteri e margini

La mia prima regola è di evitare l'uso di testo nel body che non sia inserito in un elemento a livello di blocco come p. Ad esempio:

Il testo che segue l'intestazione corre il rischio di essere visualizzato su alcuni browser con caratteri e margini anomali. Vi consiglio perciò di racchiudere tutto quel testo in un paragrafo, così:

La mia seconda regola è di impostare la famiglia di caratteri per l'elemento pre, dal momento che alcuni browser trascurano di usare una spaziatura fissa, quando impostate la grandezza del carattere o altre proprietà per pre.

La mia terza regola è di impostare la famiglia di caratteri per gli elementi intestazione, p e ul, se avete intenzione di definire bordi e sfondi per elementi quali div. Ciò serve per aggirare un baco a causa del quale il browser trascura di usare la famiglia di caratteri ereditata, passando invece al carattere predefinito impostato nelle preferenze del browser.

Aggiungere bordi e sfondi

Potete aggiungere facilmente un bordo intorno a un'intestazione, un elenco, un paragrafo o un gruppo di questi, usando l'elemento div. Ad esempio:

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

Notate che senza la proprietà "width" alcuni browser piazzeranno il bordo destro troppo lontano sulla destra. Ciò può poi essere usato con una marcatura del tipo:

<div class="box">
Il contenuto all'interno dell'elemento DIV sarà racchiuso
in un riquadro circondato da una linea sottile.
</div>

Esiste una gamma limitata di tipi di bordi: puntati, tratteggiati, solidi, doppi, scanalati, a rilievo, verso l'interno e verso l'esterno. La proprietà border-width imposta la larghezza. I suoi valori includono thin, medium e thick, così come valori specifici di larghezza, ad es. 0.1em. La proprietà border-color vi consente di impostare il colore.

Un effetto simpatico è colorare lo sfondo del riquadro con un colore solido o con un'immagine a porzioni. Per fare questo usate la proprietà background. Potete riempire il riquadro che racchiude un div nel modo che segue:

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

Senza un'esplicita definizione della proprietà border alcuni browser applicheranno il colore di sfondo solo dietro i caratteri. La proprietà padding introduce alcuni spazi tra i margini della regione colorata e il testo che essa contiene.

Potete impostare differenti valori per la spaziatura interna sui lati sinistro, superiore, destro e inferiore per mezzo delle proprietà padding-left, padding-top, padding-right e padding-bottom. Es.: padding-left: 1em.

Supponiamo che vogliate dei bordi solo sul alcuni dei lati. Potete controllare le proprietà dei bordi per ciascuno dei lati in modo indipendente usando la famiglia di proprietà border-left, border-top, border-right e border-bottom insieme con l'appropriato suffisso: style, width o color, ad esempio:

che imposta un bordo rosso lungo il margine sinistro dei soli paragrafi con l'attributo class="changed".

Impostare i colori

Alcuni esempi su come impostare i colori sono apparsi nelle precedenti sezioni. Ecco un promemoria:

Questo imposta il testo predefinito in nero su sfondo bianco, ma rende gli elementi strong in rosso. Esistono 16 nomi di colore standard, che sono illustrati nel seguito. Potete usare anche valori decimali per le componenti di rosso, verde e blu, dove ciascun valore appare nella gamma tra 0 e 255, es.: rgb(255, 0, 0) è lo stesso che red. Potete utilizzare anche valori esadecimali, purché comincino con il carattere '#' seguito da sei cifre esadecimali. Più sotto trovate un convertitore a due vie, che vi consente di convertire i valori da RGB a esadecimali.

Impostare il colore dei collegamenti

Potete usare i CSS per impostare il colore dei collegamenti ipertestuali, con un colore differente per i collegamenti ancora da seguire, per quelli già seguiti e per il colore attivo quando il collegamento viene cliccato. Potete impostare anche il colore che viene visualizzato quando il puntatore del mouse passa sopra il collegamento.

Talvolta potreste volere che i collegamenti ipertestuali siano mostrati senza la sottolineatura. Potete ottenere ciò impostando la proprietà text-decoration a none, per esempio:

La maggior parte della gente, quando vede del testo sottolineato su una pagina Web, si aspetterà che esso sia parte di un collegamento ipertestuale. Di conseguenza, è consigliabile non rimuovere la sottolineatura dai collegamenti ipertestuali. Analogo argomento si applica anche ai colori dei link: la maggior parte delle persone interpreterà del testo blu sottolineato come un collegamento ipertestuale. Vi raccomando perciò di non modificare i colori dei collegamenti, eccetto quando il colore dello sfondo renderebbe altrimenti difficile la lettura del testo.

Cecità per i colori

Quando utilizzate il colore, ricordate che tra il 5 e il 10% della popolazione soffre di una qualche forma di cecità per il colore. Ciò può causare difficoltà nel distinguere tra il rosso e il verde, o tra il giallo e il blu. In rari casi c'è un'incapacità completa a percepire i colori. E' consigliabile evitare combinazioni di colore tra primo piano e sfondo che renderebbero difficile la lettura a persone affette da forme di cecità per i colori.

Nomi di colori

L'insieme standard di nomi di colori è il seguente: aqua [acqua, celeste chiaro], black [nero], blue, fuchsia, gray [grigio], green [verde scuro], lime [verde brillante], maroon [marrone scuro], navy [blu marino], olive [verde oliva], purple [porpora], red [rosso], silver [color argento, grigio chiaro], teal [alzavola], white [bianco] e yellow [giallo]. Questi 16 colori sono definiti nell'HTML 3.2 e 4.01 e corrispondono all'insieme VGA di base sui PC. La maggior parte dei browser accetta un insieme più largo di nomi di colori, ma il loro uso non è raccomandato.

**Nomi di colori e valori 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 dei colori

Valori come "#FF9999" rappresentano i colori come numeri esadecimali per il rosso, il verde e il blu. I primi due caratteri subito dopo il # danno il valore del rosso, i due successivi danno il verde, gli ultimi due il blu. Questi numeri sono sempre compresi tra 0 e 255 decimale. Se conoscete i valori decimali, potete convertirli ad esadecimali usando un calcolatore, come quello fornito in dotazione con Microsoft Windows.

Colori sicuri dei browser

I calcolatori più recenti supportano migliaia o milioni di colori, ma molti dei sistemi più vecchi possono mostrare solo fino a 256 colori alla volta. Per far fronte a ciò, questi browser ripiegano sui colori di una tavolozza fissa. L'effetto che ne consegue è spesso visibile come una colorazione picchiettata, dovuta al fatto che il browser tenta di approssimare il vero colore in ciascun punto dell'immagine. Tale problema scomparirà gradualmente, nella misura in cui i vecchi calcolatori saranno rimpiazzati da modelli più recenti.

La maggior parte dei browser supporta la cosiddetta tavolozza "browser sicura". Questa usa sei gradazioni uniformemente spaziate di rosso, verde e blu e loro combinazioni. Se scegliete i colori dell'immagine da questa tavolozza, eviterete l'effetto di picchiettatura. Ciò risulta particolarmente utile per le aree di sfondo delle immagini.

Se il browser sta usando la tavolozza sicura, lo sfondo della pagina adopera il colore più vicino nella tavolozza. Se impostate lo sfondo di pagina ad un colore che non fa parte della tavolozza sicura, correte il rischio che lo sfondo appaia con colori differenti a seconda di se il computer stia usando colori indicizzati [massimo 256] o reali [oltre 16 milioni di colori visualizzabili].

I colori della tavolozza sicura sono costituiti da combinazioni di rosso, verde e blu ristrette ai seguenti valori:

Ecco qui una tabella con i colori sicuri per i browser ed i relativi valori esadecimali. I miei ringraziamenti a Bob Stein per questo arrangiamento.

Cosa fare con i browser che non supportano i CSS?

I browser più vecchi, vale a dire precedenti a Netscape 4.0 e a Internet Explorer 4.0, o non supportano del tutto i CSS o li supportano in modo inconsistente. Per questi browser potete ancora governare lo stile per mezzo dello stesso HTML.

Impostare il colore e lo sfondo

Potete impostare il colore usando il marcatore BODY. Il seguente esempio imposta il colore di sfondo a bianco e il colore del testo a nero:

L'elemento BODY dovrebbe essere piazzato sempre prima del contenuto visibile della pagina Web, ad esempio prima della prima intestazione. Potete controllare anche il colore dei collegamenti ipertestuali. Vi sono tre attributi per questo:

Potete anche ottenere che il browser piastrelli lo sfondo della pagina con un'immagine, adoperando l'attributo background per specificare l'indirizzo Internet dell'immagine, es.:

E' una buona idea di specificare un colore di sfondo usando l'attributo bgcolor nel caso che il browser sia incapace di visualizzare l'immagine. Dovreste assicurarvi che i colori che avete scelto non causino problemi di leggibilità. Considerate il seguente come un caso estremo:

La maggior parte dei browser visualizzeranno il testo in nero per impostazione predefinita. Il risultato finale è che la pagina sarà mostrata con testo nero su uno sfondo nero! Una quantità di persone soffre per una forma o l'altra di cecità per il colore, per esempio il verde oliva ad alcuni può apparire marrone.

Un problema distinto si manifesta quando provate a stampare una pagina Web. Molti browser ignoreranno il colore di sfondo, ma obbediranno al colore del testo. Impostare il testo a bianco condurrà spesso ad una pagina vuota in stampa, perciò l'impostazione seguente non è raccomandata:

Le tabelle possono essere usate per una moltitudine di effetti di impaginazione e sono state largamente sfruttate a tal scopo. Nel futuro questo ruolo sarà probabilmente soppiantato dai fogli di stile, che rendono pratico ottenere un'impaginazione precisa con uno sforzo minore.

Impostare il carattere, la sua dimensione ed il colore

Il marcatore FONT può essere usato per selezionare il carattere, impostarne la dimensione ed il colore. L'esempio seguente imposta semplicemente il colore:

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

L'attributo face è usato per definire il carattere. Esso assume una lista di caratteri in ordine di preferenza, es.:

L'attributo size può essere usato per selezionare la dimensione del carattere come un numero compreso tra 1 e 7. Se anteponete un - o un + al numero, questo è interpretato come un valore relativo. Usate size="+1" quando volete adoperare la prossima dimensione maggiore di carattere disponibile e size="-1" quando volete adoperare, invece, la prossima minore, ad esempio:

Ci sono un paio di cose che dovreste evitare: non scegliere combinazioni di colore che rendono il testo di difficile lettura per le persone che sono cieche ai colori. Non usare l'elemento font per trasformare il testo normale in un'intestazione: queste dovrebbero sempre essere codificate usando i marcatori da h1 ad h6 in modo appropriato all'importanza dell'intestazione.

Ottenere ulteriori informazioni

Per ulteriori informazioni su CSS e strumenti che li supportano, dovreste dare uno sguardo alla home page del W3C per i CSS. Questa include puntatori a libri su HTML e CSS, ad esempio "Raggett on HTML 4", pubblicato nel 1998 da Addison Wesley. Vedete anche "Beginning XHTML", pubblicato nel 2000 da Wrox Press. Per una più dettagliata spiegazione sui CSS, "Cascading Style Sheets" di Håkon Wium Lie e Bert Bos, pub. nel 1999 da Addison Wesley, che fornisce uno sguardo approfondito sui CSS, così come sono visti dai loro stessi architetti.

Ho intenzione di estendere questa guida con pagine addizionali sul posizionamento e la stampa con i CSS e sui fogli di stile acustici.

rosso:		Valore esadecimale del colore
verde:
blu: