Se c'è un aspetto essenziale dei
CSS questo è il nuovo approccio che hanno introdotto per
la gestione del testo. Prima c'era il tag
<font>:
pagine pesanti e difficili da gestire. Oggi qualcosa che può
trasformare una pagina web in un perfetto esempio di stile
tipografico e che finalmente consente, almeno in parte, la
potenza e la flessibilità di un word-processor.
La proprietà che definiscono il modo in cui il testo
appare sullo schermo sono tante e abbiamo deciso di suddividere
l'argomento in due lezioni. Iniziamo quindi dalle proprietà
di base. Sono quelle che definiscono i seguenti aspetti:
La lezione è corredata di un
documento
di esempio che mostra l'uso delle proprietà
esaminate e corredato di codice.
font-family
La proprietà font-family serve a impostare il tipo di
carattere di una qualunque porzione di testo. Si applica a
tutti gli elementi ed è ereditata.
Gli uomini del W3C hanno creato un meccanismo che consente
all'autore di impostare nei CSS non un font singolo e unico, ma
un elenco di caratteri alternativi. Il meccanismo funziona
così:
p {font-family: arial, Verdana, sans-serif;}
Quando la pagina verrà caricata, il browser tenterà
di usare il primo font della lista. Se questo non è
disponibile userà il secondo. In mancanza anche di
questo verrà utilizzato il font principale della
famiglia sans-serif presente sul sistema. La spiegazione di
tutto ciò è semplice: ovviare al problema dei
diversi font presenti sulle piattaforme software.
Dunque: quando si imposta la proprietà font-family si
possono usare tutti i font che si vuole, ma non dimenticate mai
di inserire alla fine l'indicazione di una famiglia generica.
Esse sono cinque (tra parentesi riportiamo i caratteri
predefiniti su ciascuna sui sistemi Windows):
serif
(Times New Roman)
sans-serif
(arial)
cursive
(Comic Sans)
fantasy
(Allegro BT)
- monospace (Courier)
I nomi dei font della lista vanno separati dalla virgola. I
caratteri con nomi composti da più parole vanno inseriti
tra virgolette. Se usate famiglie strane e poco comuni come
fantasy o cursive usate più di una famiglia generica.
Questa andrebbe sempre messa alla fine, altrimenti risulta
praticamente inutile la definizione di font specifici.
Sintassi
selettore {font-family: <font 1>, <font2>,
....,<famiglia generica>;}
Esempi
div {font-family: Georgia, "Times New Roman",
serif;}
font-size
Insieme a font-family è la proprietà
considerata essenziale nella definizione dell'aspetto del
testo, di cui definisce le dimensioni. Applicabile a tutti gli
elementi ed ereditata.
Sintassi
selettore { font-size: <valore>; }
Valori
I valori delle dimensioni del testo possono essere espressi
in vari modi. Per un approfondimento sull'uso dei diversi
metodi e sulle implicazioni in termini di accessibilità
e compatibilità cross-browser si consiglia la lettura
dell'articolo "Stabilire le dimensioni dei font con i CSS:
vantaggi, problemi e soluzioni".
I diversi sistemi si possono distinguere a seconda che
definiscano le dimensioni in senso assoluto o relativo.
Dimensione assoluta significa che essa non dipende da nessun
altro elemento ed è quella definita dall'unità di
misura usata. Dimensione relativa significa che essa viene
calcolata in base alla dimensione del testo dell'elemento
parente.
Sono valori assoluti:
le sette parole chiave
xx-small, x-small, small,
medium, large, x-large,
xx-large
- quelli espressi con le seguenti unità di
misura: pixel (px), centimetri (cm),
millimetri (mm), punti (pt),
picas (pc), pollici (in),
x-height(ex). Di tutte queste unità le
uniche proponibili per il testo sono punti e pixel. Si
consiglia di usare la prima solo per CSS destinati alla
stampa.
Sono valori relativi:
Esempi
p {font-size: 12px;}
div.titolo {font-size: 50%;}
#div1
{font-size: large;}
h2 {font-size: 1.2em;}
font-weight
Serve a definire la consistenza o "peso" visivo
del testo. Si applica a tutti gli elementi ed è
ereditata.
Sintassi
selettore {font-weight: <valore>;}
Valori
Il "peso" visivo di un carattere può essere
espresso con una scala numerica o con parole chiave:
valori numerici
100 - 200 - 300 - 400 - 500 - 600 - 700 - 800 - 900 ordinati
in senso crescente (dal leggero al pesante)
normal.
Valore di default. E' l'aspetto normale del font ed equivale
al valore 400
bold. Il
carattere acquista l'aspetto che definiamo in genere
grassetto. Equivale a 700
bolder.
Misura relativa. Serve a specificare che una determinata
porzione di testo dovrà apparire più pesante
rispetto al testo dell'elemento parente
- lighter. Misura relativa. Il testo
sarà più leggero di quello dell'elemento parente
Esempi
p {font-weight: 900;}
div {font-weight: bold;}
font-style
Imposta le caratteristiche del testo in base ad uno di
questi tre valori:
La proprietà si applica a tutti gli elementi ed è
ereditata.
Sintassi
selettore {font-style: <valore>;}
Esempi
p {font-style: italic;}
Line-height
Grazie a line-height è possibile finalmente usare
nelle nostre pagine un sistema di interlinea degno di questo
nome. La proprietà, in realtà, serve a definire
l'altezza di una riga di testo all'interno di un elemento
blocco. Ma l'effetto ottenuto è appunto quello tanto
agognato da tutti i web designer: un modo per impostare uno
spazio tra le righe. La proprietà si applica a tutti gli
elementi ed è ereditata.
Sintassi
selettore {line-height: <valore>;}
Valori
normal. Il
browser separerà le righe con uno spazio ritenuto
"ragionevole". Dovrebbe corrispondere a un valore
numerico compreso tra 1 e 1.2
valore numerico.
Usando valori numerici tipo 1.2, 1.3, 1.5 si ottiene questo
risultato: l'altezza della riga sarà uguale alla
dimensione del font moltiplicata per questo valore.
un valore numerico
con unità di misura. L'altezza della riga sarà
uguale alla dimensione specificata.
- percentuale. L'altezza della riga
viene calcolata come una percentuale della dimensione del
font.
Il consiglio è di non usare mai la percentuale, di
valutare attentamente l'utilizzo di unità esplicite e di
affidarsi senza problemi al valore numerico.
Esempi
p {line-height: 1.5;}
body {line-height: 15px;}
font
La proprietà
font può essere
paragonata a
background. Si tratta di una
proprietà a sintassi abbreviata che serve a impostare
con una sola dichiarazione tutte le principali caratteristiche
del testo. Le proprietà definibili in forma abbreviata
con
font sono:
font-family
font-size
line-height
font-weight
font.-style
font-variant
- font di sistema
Sintassi
selettore {font: <valori>;}
Alcune indicazioni sull'uso. I valori relativi alle singole
proprietà non vanno separati da virgole. Virgola che
deve invece separare i valori definiti per la font-family.
Anche in questo caso i nomi dei font costituiti da più
parole vanno racchiusi tra virgolette. Per quanto riguarda
l'ordine, la dichiarazione dovrebbe sempre finire con la coppia
font-size > font-family.
Il valore della proprietà line-height si imposta
invece così, facendo seguire il suo valore a quello di
font-size e separando i due con una slash:
font-size/line-height
Esempi
p {font: bold 12px/1.5 Georgia, "Times New Roman",
serif;}
Nell'ordine abbiamo definito: font-weight, dimensione/
interlinea, font-family.
Usare i font di sistema
All'interno della proprietà font è possibile
impostare, invece della normale lista di caratteri, un valore
corrispondente ai cosiddetti
font di sistema.
Si tratta del tipo di carattere che usiamo sul nostro sistema
operativo per definire l'aspetto di elementi dell'interfaccia
come barre dei menu, icone o barra di stato. In particolare, le
parole chiave relative ai font di sistema sono 6 e riguardano:
caption:
carattere usato per pulsanti e menu a tendina
icon:
carattere usato per la descrizione delle icone
menu:
carattere usato nei menu delle varie finestre
message-box:
usato per i gli alert e gli altri box con messaggi di sistema
small-caption:
carattere per i controlli più piccoli
- status-bar: il font usato per la barra
di stato
Se si intende usare uno dei font di sistema non è
necessario specificare altri valori oltre alla keyword. Il
nostro testo, in pratica, erediterà le impostazioni
definite nel sistema operativo relative a carattere e
dimensione.
Esempi
p {font: menu;}
div {font: status-bar;}
Allinerare il testo: Text-align
La proprietà serve a impostare l'allineamento del
testo. E' ereditata e si applica a tutti gli elementi.
Sintassi
selettore { text-align: <valore>; }
Valori
Text-decoration
Imposta particolari decorazioni e stili per il testo.
Ereditabile e applicabile a tutti gli elementi.
Sintassi
p {text-decoration: <valore> o <valori>;}
Valori
none. Il
testo non avrà alcuna decorazione particolare
underline.
Il testo sarà sottolineato
overline Il
testo avrà una linea superiore
line-through.
Il testo sarà attraversato da una linea orizzontale al
centro
- blink. Testo lampeggiante
Esempi
p {text-decoration: none;}
a {text-decoration:
underline;}
Links
Negli articoli che seguono troverete risposte a importanti
questioni legate alla gestione del testo con i CSS e che
esulano dall'impianto di una guida come questa. La lettura è
pertanto fortemente consigliata:
L'arte del testo perfetto: come utilizzare i CSS per
formattare il testo di una pagina web
Stabilire le dimensioni dei font in un CSS: vantaggi,
problemi e soluzioni
I font e la tipografia del testo
REALIZZAZIONE PRATICA SU
COFFEECUP:
la seguente immagine rappresenta la schermata di CoffeeCup
della pagina “stile.css”
