Gestione del testo: propriet=E0 avanzate | Guida CSS =

Gestione del=20 testo: propriet=E0 avanzate =

Con le propriet=E0 avanzate di gestione del testo si = interviene su=20 aspetti complessivamente poco importanti e per alcune di = esse il=20 supporto non =E8 affatto garantito. Come per la precedente = lezione=20 abbiamo preparato un documento di esempio che mostra i risultati = dell'applicazione=20 delle varie propriet=E0. Gli esempi sono accompagnati dal = codice e da=20 commenti su aspetti particolari.

font-size-adjust

Questa propriet=E0 pu=F2 servire a migliorare la = leggibilit=E0 di un=20 carattere alternativo tra quelli indicati con la propriet=E0 = font-family. La propriet=E0 =E8 supportata solo dai browser = Gecko-based=20 (Mozilla, Netscape 6/7) ed =E8 ereditata.

Sintassi

selettore {font-size-adjust: = <valore>;}

Valori

none. Non avviene nessun aggiustamento. Valore = di=20 default.=20
valore numerico. Indica il fattore di = aggiustamento del=20 font.

Esempi

p {font-size-adjust: 0.50;}

font-stretch

Consente di rendere il testo pi=F9 o meno espanso del = normale.=20 Propriet=E0 non supportata da nessun browser. Ereditata.

Sintassi

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

Valori

normal. Valore di default.=20
parole chiave che indicano diversi gradi di = espansione=20 del testo.

Nell'ordine, dal grado di maggiore espansione al minore = sono:

ultra-expanded, extra-expanded, = expanded,=20 semi-expanded, normal, semi-condensed,=20 condensed, extra-condensed, = ultra-condensed

Oltre a queste abbiamo due parole chiave con funzione = relativa:=20 wider e narrower.

Esempi

p {font-stretch: ultra-expanded;}

font-variant

Consente di trasformare il testo in maiuscoletto (lettere = in=20 maiuscolo rese con dimensioni uguali ai caratteri minuscoli = ).=20 Propriet=E0 ben supportata ed ereditata.

Sintassi

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

Valori

normal. Il testo ha il suo aspetto normale. = Valore di=20 default.=20
small-caps. Trasforma il testo in maiuscoletto. =

Esempi

h2 {font-variant: small-caps;}

text-indent

Definisce l'indentazione della prima riga in ogni = elemento=20 contenente del testo. Propriet=E0 ben supportata ed = ereditata.

Sintassi

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

Valori

un valore numerico con unit=E0 di misura=20
un valore in percentuale

Come al solito, il valore con unit=E0 di misura =E8 = assoluto, quello=20 in percentuale =E8 relativo. In questo caso il valore =E8 = relativo alla=20 larghezza dell'area del contenuto. In pratica, se in un = paragrafo=20 largo 200px setto un'indentazione uguale al 10%, essa sar=E0 = uguale a=20 20px.

Esempi

p {text-indent: 10px;}
div.contenuto=20 {text-indent: 10%;}

text-shadow

Crea un'ombreggiatura per il testo specificato. La = propriet=E0 non=20 =E8 supportata da nessun browser e non =E8 ereditata.

Sintassi

selettore {text-shadow: <valore = colore>=20 <valore x> <valore y> <valore blur>;}

Esempi

h1 {text shadow: blue 2px 2px 3px;}

text-transform

La propriet=E0 serve a cambiare gli attributi del testo=20 relativamente a tre aspetti: maiuscolo, minuscolo, prima = lettera=20 maiuscola. Propriet=E0 ben supportata e comodissima se avete = lunghe=20 porzioni di testo tutto in maiuscolo da trasformare (o = viceversa).=20 Ereditata.

Sintassi

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

Valori

none. Valore di default. Nessuna trasformazine = viene=20 applicata.=20
capitalize. La prima lettera di ogni parola = viene=20 trasformata in maiuscolo.=20
uppercase. Tutto il testo =E8 maiuscolo.=20
lowercase. Tutto il testo =E8 minuscolo. =

Esempi

p {text-transform: capitalize;}
h1=20 {text-transform: uppercase;}

white-space

Questa propriet=E0 serve a gestire il trattamento degli = spazi=20 bianchi presenti in un elemento. E' ereditata.

E' una cosa nota a chi ha un minimo di dimestichezza con = il=20 codice HTML. Se nel codice di una pagina lasciate spazi = bianchi tra=20 le parole, essi saranno automaticamente convertiti in un = solo spazio=20 quando la pagina viene visualizzata nel browser. A meno di = non=20 racchiudere il testo con tag come <PRE> o=20 <CODE>. In questo caso spazi bianchi e fine = riga=20 saranno rispettati e manterranno l'aspetto che essi hanno = nel=20 codice. Uguale meccanismo =E8 implementabile con i CSS con=20 white-space.

Sintassi

selettore {white-space: = <valore>;}

Valori

none. Valore di default. Gli spazi bianchi sono = ridotti=20 a uno.=20
pre. Gli spazi banchi e l'inizio di nuove righe = sono=20 mantenuti cos=EC come sono nel codice (vedi esempio)=20
nowrap. Gli spazi bianchi sono ridotti a uno e = l'andata=20 a capo =E8 disabilitata (vedi esempio)

Esempi

p {white-space: pre;}
div {white-space: = nowrap;}

letter-spacing

Aumenta lo spazio tra le lettere di una parola. = Propriet=E0 ben=20 supportata ed ereditata.

Sintassi

selettore { letter-spacing: = <valore>; }

Valori

normal. Valore di default. Le lettere = mantengono il=20 loro spazio normale.=20
un valore numerico con unit=E0 di misura. Le = lettere=20 saranno spaziate secondo la distanza impostata.

E' possibile anche impostare valori negativi. Ci=F2 = far=E0 s=EC che le=20 lettere appaiano sempre pi=F9 compresse, con il rischio = ovvio=20 dell'illegibilit=E0.

Esempi

h1 { letter-spacing: 5px; }

word-spacing

Propriet=E0 complementare a letter-spacing. Serve ad = aumentare lo=20 spazio tra le parole comprese in un elemento. Propriet=E0 = ben=20 supportata ed ereditata.

Sintassi

selettore { word-spacing: <valore>; = }

Valori

normal. Valore di default. Le parole mantengono = il loro=20 spazio normale.=20
un valore numerico con unit=E0 di misura. Le = parole=20 saranno spaziate secondo la distanza impostata.

Esempi

p { word-spacing: 1.2em; }
div.testo {=20 word-spacing: 5px; }

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 ] =