Maiuscoletto, indentazione, spazi nel testo con i CSS

24 giugno 2013

Dopo aver analizzato le più importanti proprietà 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;}

Esempi per tutte le proprietà.

Tutte le lezioni

1 ... 26 27 28 ... 33

Se vuoi aggiornamenti su Maiuscoletto, indentazione, spazi nel testo con i CSS inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su Maiuscoletto, indentazione, spazi nel testo con i CSS

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy