*
Diodati.org

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.

Dave Raggett   Aggiungere un tocco di stile

Dave Raggett, 29 Agosto 2000.

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.

Nel seguito vi sarà insegnato come:

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:

<style type="text/css">
  body { color: black; background: white; }
</style>

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:

<link rel="stylesheet" href="style.css">

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:

<style type="text/css">
  body { margin-left: 10%; margin-right: 10%; }
</style>

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:

<style type="text/css">
  body { margin-left: 10%; margin-right: 10%; }
  h1 { margin-left: -8%;}
  h2,h3,h4,h5,h6 { margin-left: -4%; }
</style>

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:

h2 { margin-top: 8em; margin-bottom: 3em; }

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:

<h2 class="sottosezione">Per cominciare</h2>

Il comando di stile assume poi questa forma:

h2.sottosezione { margin-top: 8em; margin-bottom: 3em; }

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:

p { text-indent: 2em; margin-top: 0; margin-bottom: 0; }

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:

em { font-style: italic; font-weight: bold; }
strong { text-transform: uppercase;  font-weight: bold; }

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

h2 { text-transform: lowercase; }

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:

h1 { font-size: 200%; }
h2 { font-size: 150%; }
h3 { font-size: 100%; }

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:

body { font-family: Verdana, sans-serif; }
h1,h2 { font-family: Garamond, "Times New Roman", serif; }

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:

<h2>Primavera nel Wiltshire</h2>

Alberi in fiore, canti di uccelli e il suono di agnelli
che belano nei prati.

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ì:

<h2>Primavera nel Wiltshire</h2>

<p>Alberi in fiore, canti di uccelli e il suono di agnelli
che belano nei prati.</p>

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.

pre { font-family: monospace; }

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.

h1,h2,h3,h4,h5,p,ul { font-family: sans-serif; }

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:

  p.changed {
    padding-left: 0.2em;
    border-left: solid;
    border-right: none;
    border-top: none;
    border-bottom: none;
    border-left-width: thin;
    border-color: red;
  }

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:

  body {
    color: black;
    background: white;
  }
  strong { color: red }

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.

  :link { color: rgb(0, 0, 153) }  /* per i collegamenti non visitati */
  :visited { color: rgb(153, 0, 153) } /* per i collegamenti visitati */
  :active { color: rgb(255, 0, 102) } /* quando il collegamento è cliccato */
  :hover { color: rgb(0, 96, 255) } /* quando il mouse è 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:

  a.plain { text-decoration: none }

che sopprimerebbe la sottolineatura per un collegamento del tipo:

Questo è <a class="plain" href="cosa.html">non sottolineato</a>

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"

Pertanto il valore cromatico "#800080" equivale al nome "purple".

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.

Inserite un valore RGB o esadecimale e premete il pulsante appropriato per convertire
rosso: Valore esadecimale del colore
verde:
blu:

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:

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

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.

FFF
 FFF
CCC
 CCC
999
 999
666
 666
333
 333
000
 000
FFC
 C00
FF9
 900
FF6
 600
FF3
 300
99C
 C00
CC9
 900
FFC
 C33
FFC
 C66
FF9
 966
FF6
 633
CC3
 300
CC0
 033
CCF
 F00
CCF
 F33
333
 300
666
 600
999
 900
CCC
 C00
FFF
 F00
CC9
 933
CC6
 633
330
 000
660
 000
990
 000
CC0
 000
FF0
 000
FF3
 366
FF0
 033
99F
 F00
CCF
 F66
99C
 C33
666
 633
999
 933
CCC
 C33
FFF
 F33
996
 600
993
 300
663
 333
993
 333
CC3
 333
FF3
 333
CC3
 366
FF6
 699
FF0
 066
66F
 F00
99F
 F66
66C
 C33
669
 900
999
 966
CCC
 C66
FFF
 F66
996
 633
663
 300
996
 666
CC6
 666
FF6
 666
990
 033
CC3
 399
FF6
 6CC
FF0
 099
33F
 F00
66F
 F33
339
 900
66C
 C00
99F
 F33
CCC
 C99
FFF
 F99
CC9
 966
CC6
 600
CC9
 999
FF9
 999
FF3
 399
CC0
 066
990
 066
FF3
 3CC
FF0
 0CC
00C
 C00
33C
 C00
336
 600
669
 933
99C
 C66
CCF
 F99
FFF
 FCC
FFC
 C99
FF9
 933
FFC
 CCC
FF9
 9CC
CC6
 699
993
 366
660
 033
CC0
 099
330
 033
33C
 C33
66C
 C66
00F
 F00
33F
 F33
66F
 F66
99F
 F99
CCF
 FCC
CC9
 9CC
996
 699
993
 399
990
 099
663
 366
660
 066
006
 600
336
 633
009
 900
339
 933
669
 966
99C
 C99
FFC
 CFF
FF9
 9FF
FF6
 6FF
FF3
 3FF
FF0
 0FF
CC6
 6CC
CC3
 3CC
003
 300
00C
 C33
006
 633
339
 966
66C
 C99
99F
 FCC
CCF
 FFF
339
 9FF
99C
 CFF
CCC
 CFF
CC9
 9FF
996
 6CC
663
 399
330
 066
990
 0CC
CC0
 0CC
00F
 F33
33F
 F66
009
 933
00C
 C66
33F
 F99
99F
 FFF
99C
 CCC
006
 6CC
669
 9CC
999
 9FF
999
 9CC
993
 3FF
660
 0CC
660
 099
CC3
 3FF
CC0
 0FF
00F
 F66
66F
 F99
33C
 C66
009
 966
66F
 FFF
66C
 CCC
669
 999
003
 366
336
 699
666
 6FF
666
 6CC
666
 699
330
 099
993
 3CC
CC6
 6FF
990
 0FF
00F
 F99
66F
 FCC
33C
 C99
33F
 FFF
33C
 CCC
339
 999
336
 666
006
 699
003
 399
333
 3FF
333
 3CC
333
 399
333
 366
663
 3CC
996
 6FF
660
 0FF
00F
 FCC
33F
 FCC
00F
 FFF
00C
 CCC
009
 999
006
 666
003
 333
339
 9CC
336
 6CC
000
 0FF
000
 0CC
000
 099
000
 066
000
 033
663
 3FF
330
 0FF
00C
 C99
009
 9CC
33C
 CFF
66C
 CFF
669
 9FF
336
 6FF
003
 3CC
330
 0CC
00C
 CFF
009
 9FF
006
 6FF
003
 3FF

Campionari di colori della tavolozza browser sicura sono disponibili gratuitamente per molte popolari applicazioni grafiche su www.visibone.com.

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:

<body bgcolor="white" text="black">

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:

Ecco un esempio che li imposta tutti e tre:

<body bgcolor="white" text="black"
  link="navy" vlink="maroon" alink="red">

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.:

<body bgcolor="white" background="texture.jpeg" text="black"
  link="navy" vlink="maroon" alink="red">

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:

<body bgcolor="black">

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:

<body bgcolor="black" text="white">

Potete anche usare l'attributo bgcolor in celle di tabella, ad esempio:

<table border="0" cellpadding="5">
 <tr>
  <td bgcolor="yellow">cella di tabella colorata</td>
 </tr>
</table>

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:

Questa frase ha una <font color="yellow">parola</font> in giallo.

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

<font face="Garamond, Times New Roman">del testo qualsiasi...</font>

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:

<font size="+1" color="maroon"
  face="Garamond, Times New Roman">testo qualunque...</font>

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.

Buona fortuna e andate a scrivere!

Dave Raggett <dsr@w3.org>

Copyright  ©  2000 W3C ® (MIT, INRIA, Keio ), All Rights Reserved. W3C liability, trademark, document use and software licensing rules apply. Your interactions with this site are in accordance with our public and Member privacy statements.

*Leggi: Introduzione ad HTML
*Vai a: Diodati.org > Traduzioni dal sito W3C
*Scrivi: info@diodati.org
*Ultima modifica: 10/3/2003 ore 17:47