Gestione del testo: propriet=E0 di base | Guida CSS

Gestione del=20 testo: propriet=E0 di base =

Se c'=E8 un aspetto essenziale dei CSS questo =E8 il = nuovo approccio=20 che hanno introdotto per la gestione del testo. Prima c'era = il tag=20 <FONT>: pagine pesanti e difficili da gestire. = Oggi=20 qualcosa che pu=F2 trasformare una pagina web in un perfetto = esempio=20 di stile tipografico e che finalmente consente, almeno in = parte, la=20 potenza e la flessibilit=E0 di un word-processor.

La propriet=E0 che definiscono il modo in cui il testo = appare sullo=20 schermo sono tante e abbiamo deciso di suddividere = l'argomento in=20 due lezioni. Iniziamo quindi dalle propriet=E0 di base. Sono = quelle=20 che definiscono i seguenti aspetti:

il font da usare=20
la sua dimensione=20
la sua consistenza=20
l'interlinea tra i paragrafi=20
l'allineamento del testo=20
la sua decorazione (sottolineature e simili) =

La lezione =E8 corredata di un documento di esempio che mostra l'uso = delle=20 propriet=E0 esaminate e corredato di codice.

Font-family

La propriet=E0 font-family serve a impostare = il tipo di=20 carattere di una qualunque porzione di testo. Si applica a = tutti gli=20 elementi ed =E8 ereditata.

Gli uomini del W3C hanno creato un meccanismo = che=20 consente all'autore di impostare nei CSS non un font singolo = e=20 unico, ma un elenco di caratteri alternativi. Il meccanismo = funziona=20 cos=EC:

p {font-family: Arial, Verdana, = sans-serif;}

Quando la pagina verr=E0 caricata, il browser tenter=E0 = di usare il=20 primo font della lista. Se questo non =E8 disponibile = user=E0 il=20 secondo. In mancanza anche di questo verr=E0 utilizzato il = font=20 principale della famiglia sans-serif presente sul sistema. = La=20 spiegazione di tutto ci=F2 =E8 semplice: ovviare al problema = dei diversi=20 font presenti sulle piattaforme software.

Dunque: quando si imposta la propriet=E0 = font-family si=20 possono usare tutti i font che si vuole, ma non dimenticate = mai di=20 inserire alla fine l'indicazione di una famiglia generica. = Esse sono=20 cinque (tra parentesi riportiamo i caratteri predefiniti su = ciascuna=20 sui sistemi Windows):

serif (Times New Roman)=20
sans-serif (Arial)=20
cursive (Comic Sans)=20
fantasy (Allegro BT)=20
monospace (Courier)

I nomi dei font della lista vanno separati dalla virgola. = I=20 caratteri con nomi composti da pi=F9 parole vanno inseriti = tra=20 virgolette. Se usate famiglie strane e poco comuni come = fantasy o=20 cursive usate pi=F9 di una famiglia generica. Questa = andrebbe sempre=20 messa alla fine, altrimenti risulta praticamente inutile la=20 definizione di font specifici.

Sintassi

selettore {font-family: <font 1>,=20 <font2>, ....,<famiglia generica>;}

Esempi

div {font-family: Georgia, "Times New = Roman",=20 serif;}

Font-size

Insieme a font-family =E8 la propriet=E0 = considerata=20 essenziale nella definizione dell'aspetto del testo, di cui=20 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=20 vari modi. Per un approfondimento sull'uso dei diversi = metodi e=20 sulle implicazioni in termini di accessibilit=E0 e = compatibilit=E0=20 cross-browser si consiglia la lettura dell'articolo "Stabilire le dimensioni dei font con i CSS: = vantaggi,=20 problemi e soluzioni".

I diversi sistemi si possono distinguere a seconda che=20 definiscano le dimensioni in senso assoluto o relativo. = Dimensione=20 assoluta significa che essa non dipende da nessun altro = elemento ed=20 =E8 quella definita dall'unit=E0 di misura usata. Dimensione = relativa=20 significa che essa viene calcolata in base alla dimensione = del testo=20 dell'elemento parente.

Sono valori assoluti:

le sette parole chiave xx-small, = x-small,=20 small, medium, large, x-large, = xx-large=20
quelli espressi con le seguenti unit=E0 di = misura: pixel=20 (px), centimetri (cm), millimetri = (mm), punti=20 (pt), picas (pc), pollici (in),=20 x-height(ex). Di tutte queste unit=E0 le uniche = proponibili=20 per il testo sono punti e pixel. Si consiglia di usare la = prima=20 solo per CSS destinati alla stampa.

Sono valori relativi:

le parole chiave smaller e larger=20
quelli espressi in em (em-height)=20
quelli espressi in percentuale

Esempi

p {font-size: 12px;}
div.titolo = {font-size:=20 50%;}
#div1 {font-size: large;}
h2 {font-size: = 1.2em;}

Font-weight

Serve a definire la consistenza o "peso" = visivo del=20 testo. Si applica a tutti gli elementi ed =E8 ereditata.

Sintassi

selettore {font-weight: = <valore>;}

Valori

Il "peso" visivo di un carattere pu=F2 essere espresso = con una=20 scala numerica o con parole chiave:

valori numerici 100 - 200 - 300 - 400 - 500 - = 600 - 700=20 - 800 - 900 ordinati in senso crescente (dal leggero al = pesante)=20
normal. Valore di default. E' l'aspetto normale = del=20 font ed equivale al valore 400=20
bold. Il carattere acquista l'aspetto che = definiamo in=20 genere grassetto. Equivale a 700=20
bolder. Misura relativa. Serve a specificare = che una=20 determinata porzione di testo dovr=E0 apparire pi=F9 = pesante rispetto=20 al testo dell'elemento parente=20
lighter. Misura relativa. Il testo sar=E0 pi=F9 = leggero di=20 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=20 valori:

normal: il testo mantiene il suo aspetto = normale=20
italic: formatta il testo in corsivo=20
oblique: praticamente simile a italic =

La propriet=E0 si applica a tutti gli elementi ed =E8 = ereditata.

Sintassi

selettore {font-style: = <valore>;}

Esempi

p {font-style: italic;}

Line-height

Grazie a line-height =E8 possibile finalmente usare nelle = nostre=20 pagine un sistema di interlinea degno di questo nome. La = propriet=E0,=20 in realt=E0, serve a definire l'altezza di una riga di testo = all'interno di un elemento blocco. Ma l'effetto ottenuto =E8 = appunto=20 quello tanto agognato da tutti i web designer: un modo per = impostare=20 uno spazio tra le righe. La propriet=E0 si applica a tutti = gli=20 elementi ed =E8 ereditata.

Sintassi

selettore {line-height: = <valore>;}

Valori

normal. Il browser separer=E0 le righe con uno = spazio=20 ritenuto "ragionevole". Dovrebbe corrispondere a un valore = numerico compreso tra 1 e 1.2=20
valore numerico. Usando valori numerici tipo = 1.2, 1.3,=20 1.5 si ottiene questo risultato: l'altezza della riga = sar=E0 uguale=20 alla dimensione del font moltiplicata per questo valore.=20
un valore numerico con unit=E0 di misura. = L'altezza della=20 riga sar=E0 uguale alla dimensione specificata.=20
percentuale. L'altezza della riga viene = calcolata come=20 una percentuale della dimensione del font.

Il consiglio =E8 di non usare mai la percentuale, di = valutare=20 attentamente l'utilizzo di unit=E0 esplicite e di affidarsi = senza=20 problemi al valore numerico.

Esempi

p {line-height: 1.5;}
body = {line-height:=20 15px;}

Font

La propriet=E0 font pu=F2 essere = paragonata a=20 background. Si tratta di una propriet=E0 a sintassi = abbreviata=20 che serve a impostare con una sola dichiarazione tutte le = principali=20 caratteristiche del testo. Le propriet=E0 definibili in = forma=20 abbreviata con font sono:

font-family=20
font-size=20
line-height=20
font-weight=20
font.-style=20
font-variant=20
font di sistema

Sintassi

selettore {font: <valori>;}

Alcune indicazioni sull'uso. I valori relativi alle = singole=20 propriet=E0 non vanno separati da virgole. Virgola che deve = invece=20 separare i valori definiti per la font-family. Anche in = questo caso=20 i nomi dei font costituiti da pi=F9 parole vanno racchiusi = tra=20 virgolette. Per quanto riguarda l'ordine, la dichiarazione = dovrebbe=20 sempre finire con la coppia font-size > font-family.

Il valore della propriet=E0 line-height si imposta invece = cos=EC,=20 facendo seguire il suo valore a quello di font-size e = separando i=20 due con una slash:

font-size/line-height

Esempi

p {font: bold 12px/1.5 Georgia, "Times New = Roman",=20 serif;}

Nell'ordine abbiamo definito: font-weight, dimensione/=20 interlinea, font-family.

Usare i font di sistema

All'interno della propriet=E0 font =E8 possibile = impostare, invece=20 della normale lista di caratteri, un valore corrispondente = ai=20 cosiddetti font di sistema. Si tratta del tipo di = carattere=20 che usiamo sul nostro sistema operativo per definire = l'aspetto di=20 elementi dell'interfaccia come barre dei menu, icone o barra = di=20 stato. In particolare, le parole chiave relative ai font di = sistema=20 sono 6 e riguardano:

caption: carattere usato per pulsanti e menu a = tendina=20
icon: carattere usato per la descrizione delle = icone=20
menu: carattere usato nei menu delle varie = finestre=20
message-box: usato per i gli alert e gli altri = box con=20 messaggi di sistema=20
small-caption: carattere per i controlli pi=F9 = piccoli=20
status-bar: il font usato per la barra di stato =

Se si intende usare uno dei font di sistema non =E8 = necessario=20 specificare altri valori oltre alla keyword. Il nostro = testo, in=20 pratica, erediter=E0 le impostazioni definite nel sistema = operativo=20 relative a carattere e dimensione.

Esempi

p {font: menu;}
div {font: = status-bar;}

Text-align

La propriet=E0 serve a impostare = l'allineamento del testo.=20 E' ereditata e si applica a tutti gli elementi.

Sintassi

selettore { text-align: <valore>; = }

Valori

left. Allinea il testo a sinistra=20
right. Allinea il testo a destra=20
center. Centra il testo=20
justify. Giustifica il testo

Text-decoration

Imposta particolari decorazioni e stili per il = testo.=20 Ereditabile e applicabile a tutti gli elementi.

Sintassi

p {text-decoration: <valore> o=20 <valori>;}

Valori

none. Il testo non avr=E0 alcuna decorazione = particolare=20
underline. Il testo sar=E0 sottolineato=20
overline Il testo avr=E0 una linea superiore=20
line-through. Il testo sar=E0 attraversato da = una linea=20 orizzontale al centro=20
blink. Testo lampeggiante

Esempi

p {text-decoration: none;}
a = {text-decoration:=20 underline;}

Links

Negli articoli che seguono troverete risposte a = importanti=20 questioni legate alla gestione del testo con i CSS e che = esulano=20 dall'impianto di una guida come questa. La lettura =E8 = pertanto=20 fortemente consigliata:

L'arte del testo perfetto: come = utilizzare i CSS=20 per formattare il testo di una pagina web

Stabilire le dimensioni dei font in un CSS: = vantaggi,=20 problemi e soluzioni

I font e la tipografia del testo

L=20 e z i o n e s u c c e s s i v=20 = a
[ S o m m a r i = o=20 ] =