CSS, la formattazione del testo

La formattazione del testo attraverso i fogli di stile migliora di molto la resa finale del documento oltre a semplificare il compito per il web designer che adesso dispone di utili proprietà per: specificare un elenco di font da usare per il documento, usare dimensioni assolute o relative per i font, modificare il sistema di interlinea (la spaziatura fra le righe), applicare particolari decorazioni al testo etc... Andiamo per ordine e iniziamo subito la presentazione delle proprietà per la gestione del testo.

font-family

Una volta nell'HTML si indicava un solo font da usare per l'elemento del documento, e se questo non era disponibile presso l'utente? Il browser applicava (lo fa tutt'ora se scrivete il documento esclusivamente in HTML, senza usare CSS) un font di default. Ovviamente questo non garantisce la stessa impressione che il web-designer voleva trasmettere al lettore! Con la proprietà font-family dei fogli di stile è possibile impostare il tipo di carattere da assegnare al testo e da lasciare in eredità agli elementi figli. Le novità portate dai fogli di stile non si esauriscono alla possibilità di ereditarietà ma vanno ben oltre, con la proprietà font-family il web designer può specificare non uno ma bensì una lista di font!

E' il web designer che suggerisce al browser questo elenco, tutti i fonti sono quindi compatibili con lo stile grafico adottato nel documento (almeno così dovrebbe essere).

La lista raccoglie un elenco di font, ognuno separato dal successivo da una virgola. Attenzione, se il nome di un font è composto da più parole occorre racchiudere lo stesso fra virgolette! La lista di font deve poi terminare con un punto e virgola (per rendere valida la regola!). Ogni sistema operativo mappa dietro alcuni nomi di famiglie di caratteri uno o o più font predefiniti. Si consiglia di mettere al termine della lista una famiglia di font, come ultima possibilità! Le famiglie di font definite dal W3C per i fogli di stile sono: serif, sans-serif, cursive, fantasy e monospace. All'interno di queste famiglie di caratteri vengono quindi mappati tutti i font simili tra loro. La sintassi prevista per la scelta dei font deve rispettare la seguente struttura: selettore {font-family: font1,font2,...,famiglia_generica;}. Ecco subito un esempio: p {font-family: Arial, Helvetica, sans-serif;}.

font-size

Questa proprietà permette di regolare le dimensioni dei font, si applica a tutti gli elementi ed è ereditata dagli elementi figli. La dimensione di un font può essere assoluta (indipendente cioè da nessun'altra dimensione) oppure relativa (valutata in relazione alle dimensioni dell'elemento padre!). Alcune parole chiavi usate per le dimensioni assolute sono: xx-small, x-small, small, medium, large, x-large, xx-large, px (per i pixel), cm (per i centimetri), mm (per i millimetri), pt (per i punti, la più usata) e in (per i pollici). Le parole chiavi per i valori relativi sono: smaller, larger, em e % (per i valori percentuali). Un esempio: p {font-size: 12px;}.

font-weight

Esprime il peso del testo ovvero l'intensità e lo spessore dei punti che disegnano i caratteri. Si applica a tutti gli elementi e viene ereditato dagli elementi figli. La sintassi prevista dal W3C è la seguente: selettore {font-weight: valore;}. Dove valore può essere: un valore numerico che va da 100 a 900, normal (che corrisponde a 400), bold (che corrisponde a 700), bolder (più pesante rispetto al testo dell'elemento padre) e infine lighter (più leggero rispetto al testo dell'elemento padre). Un esempio: p {font-weight_ bold}

font-style

Assegna uno stile al testo, osserva questa sintassi: selettore {font-style: valore}. Questi i valori previsti: normal per il testo normale (valore di default), italic per il testo scritto in corsivo e oblique per schiacciare ancora di più il testo rispetto a quanto già fa italic. Un esempio: p {font-style: italic;}.

line-height

Descrive lo spazio che deve esistere fra due linee di testo. Osserva questa sintassi: selettore {line-height: valore;}. I possibili valori sono: normal, le righe di testo sono separate come solitamente avviene (è l'impostazione di default); numero, lo spazio fra le righe corrisponde al prodotto fra la dimensione data al font e il numero scelto; numero unità, lo spazio fra le righe di testo coincide con il valore e l'unità di misura data; numero%, lo spazio fra le righe di testo è una percentuale della dimensione data al font. Un esempio: p {line-height: 15px;}

font

Consente di specificare su unica riga tutte le (singole) proprietà fin qui viste. La sintassi da rispettare è la seguente: selettore {font: valori;}. Attenzione, i valori delle singole proprietà sono separati fra loro da un carattere di spazio. Per la lista di font, invece, occorre usare una o più virgole come elemento separatore.

Font di sistema

Vi piacerebbe usare nel documento gli stessi font usati dal sistema operativo?

Con i fogli di stile è possibile fare anche questo. A tale proposito il W3C ha definito le parole chiavi per far riferimento agli elementi del sistema operativo che prevedono all'interno il testo. Ecco l'elenco delle parole da ricordare: caption, per il font usato nei pulsanti; icon, per il font usato nelle label delle icone; menu, per il font usato nel menu dei programmi; message-box, per il font usato nei messaggi di sistema; status-bar, per il font usato dalla barra di stato. Un esempio: p {font: menu}.

Notate l'assenza di altri parametri, in questo modo non solo si userà il font di sistema ma verrà rispettato anche lo stile e le dimensioni date dal sistema operativo all'elemento di riferimento scelto!

Allineamento del testo

La sintassi prevista è la seguente: selettore {text-align: valore;}. Dove valore può essere: left, allinea il testo a sinistra; right, allinea il testo a destro; center, allinea il testo al centro; justify, giustifica il testo a destro e a sinistra. Un esempio: p {text-align: justify}.

text-decoration

Con questa proprietà possiamo assegnare al testo alcune semplici decorazioni. La sintassi da rispettare è la seguente: selettore {text-decoration: valore1, valore2, ...;}. I possibili valori sono: none, per nessuna decorazione; underline, il testo viene sottolineato; overline, il testo viene marcato in alto con una linea; line-through, il testo viene barrato da una linea; blink, il testo lampeggia! Un esempio: #urgent {text-decoration: blink;}.