Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial
  • Lezione 27 di 33
  • livello principiante
Indice lezioni

Maiuscoletto, indentazione, spazi nel testo con i CSS

Le proprietà avanzate del testo: rendere più leggibile una pagina, inserire l'ombreggiatura
Le proprietà avanzate del testo: rendere più leggibile una pagina, inserire l'ombreggiatura
Link copiato negli appunti

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;}

Esempi per tutte le proprietà.


Ti consigliamo anche