Dopo aver analizzato le più importanti proprietà CSS per la gestione del testo, passiamo alla disamina di quelle avanzate.
font-variant
Consente di trasformare il testo in maiuscoletto (lettere in maiuscolo rese con dimensioni uguali ai caratteri minuscoli ). Proprietà ereditata.
Sintassi ed esempi
selettore {font-variant: valore;}I valori possibili sono solo due:
normal: il testo ha il suo aspetto normale; valore iniziale e di default;small-caps: trasforma il testo in maiuscoletto.
h2 {font-variant: small-caps;}text-indent
Definisce l'indentazione della prima riga in ogni elemento contenente del testo. Proprietà ereditata.
Sintassi ed esempi
selettore {text-indent: valore;}Si può esprimere il valore con:
- un valore numerico con unità di misura;
- un valore in percentuale.
Come al solito, il valore con unità di misura è assoluto, quello in percentuale è relativo. In questo caso il valore è relativo alla larghezza dell'area del contenuto. In pratica, se per un paragrafo largo 200px imposto un'indentazione uguale al 10%, essa sarà uguale a 20px.
p {text-indent: 10px;}
div {text-indent: 10%;}text-transform
Questa proprietà serve a cambiare gli attributi del testo relativamente a tre aspetti: maiuscolo, minuscolo, prima lettera maiuscola. È una proprietà ereditata.
Sintassi ed esempi
selettore {text-transform: valore;}Il valore può essere:
- la keyword
none: valore di default; nessuna trasformazione viene applicata; capitalize: la prima lettera di ogni parola viene trasformata in maiuscolo;uppercase: tutto il testo diventa maiuscolo;lowercase: tutto il testo è minuscolo.
p {text-transform: capitalize;}
h1 {text-transform: uppercase;}white-space
Questa proprietà serve a gestire il trattamento degli spazi bianchi presenti in un elemento. E' ereditata.
È una cosa nota a chi ha un minimo di dimestichezza con il codice HTML. Se nel codice di una pagina si lasciano spazi bianchi tra le parole, essi saranno automaticamente convertiti in un solo spazio quando la pagina viene visualizzata nel browser. A meno di non racchiudere il testo con tag come <pre> o <code>. In questo caso, spazi bianchi e fine riga saranno rispettati e manterranno l'aspetto che essi hanno nel codice. Uguale meccanismo è implementabile nei CSS con white-space.
Sintassi ed esempi
selettore {white-space: valore;}I valori possibili sono:
none: valore di default; gli spazi bianchi sono ridotti a uno;pre: gli spazi bianchi e l'inizio di nuove righe sono mantenuti così come sono nel codice HTML;nowrap: gli spazi bianchi sono ridotti a uno e l'andata a capo è disabilitata.
p {white-space: pre;}
div {white-space: nowrap;}letter-spacing
Aumenta lo spazio tra le lettere di una parola. Proprietà ereditata.
Sintassi ed esempi
selettore {letter-spacing: valore;}Per i valori si può scegliere tra:
normal: valore di default; le lettere mantengono il loro spazio normale;- un valore numerico con unità di misura: le lettere saranno spaziate secondo la distanza impostata.
È possibile anche impostare valori negativi. Ciò farà sì che le lettere appaiano sempre più compresse.
h1 {letter-spacing: 5px;}word-spacing
Proprietà complementare a letter-spacing. Serve ad aumentare lo spazio tra le parole comprese in un elemento. Proprietà ereditata.
Sintassi ed esempi
selettore {word-spacing: valore;}Per i valori possiamo usare:
normal: valore di default; le parole mantengono il loro spazio normale;- un valore numerico con unità di misura: le parole saranno spaziate secondo la distanza impostata.
p {word-spacing: 1.2em;}
div { word-spacing: 15px;}