CSS/Proprietà di base/Testo base

Wikibooks, manuali e libri di testo liberi.

Verranno adesso descritte le proprietà di base del CSS inerenti al testo:

color[modifica]

La proprietà color specifica il colore del testo contenuto in un qualsiasi elemento HTML, ad esempio una pagina intera, o una tabella, o il contenuto di un fieldset, etc.

Sintassi:

selettore { color: <colore>; }

Dove <colore> è un valore esadecimale (ad esempio #FF0000, che indica il rosso) oppure una parola chiave, come negli esempi seguenti:

<style>
     body { color: red; }
     table { color: green; }
</style>

Con l'esempio di cui sopra, assegneremo il colore rosso al testo di tutta la pagina, tranne quello contenuto nelle tabelle.

Allineare il testo[modifica]

Per definire l'allineamento del testo rispetto all'interno dell'elemento che lo contiene si usa la proprietà text-align.

Sintassi:

selettore { text-align: <pos>; }

Dove <pos> può assumere i valori :

  • left
  • center
  • right

che allineano il testo rispettivamente a sinistra, al centro e a destra, e

  • justify

che giustifica il testo ai margini dell'elemento.

text-decoration[modifica]

La proprietà text-decoration serve per definire eventuali decorazioni in aggiunta al testo.

Sintassi:

selettore { text-decoration: <valore> }

Dove <valore> può assumere uno dei seguenti valori:

  • none: al testo non viene applicata nessuna decorazione
  • underline: il testo viene sottolineato da una riga continua
  • overline: ogni riga del testo ha una linea continua sopra
  • line-through: il testo risulta barrato da una linea continua
  • blink: il testo lampeggia (da colore a trasparente). Non tutti i browser supportano questo valore

Indentare i paragrafi[modifica]

Per impostare il rientro per la prima riga del testo si usa la proprietà text-indent.

Sintassi:

selettore { text-indent: <valore> }

Dove <valore> è un valore percentuale o affiancato da un'unita di misura (in questo caso è preferibile usare em) che definisce lo spazio tra il margine dell'elemento e la prima lettera del testo.
È possibile assegnare a questa proprietà anche valori negativi.

text-transform[modifica]

Permette di forzare la capitalizzazione del testo.

Sintassi:

selettore { text-transform: <cap> }

Dove <cap> può assumere uno dei seguenti valori:

  • none: la capitalizzazione del testo rimane quella definita nel codice HTML
  • capitalize: forza la prima lettera di ogni parola alla capitalizzazione maiuscola
  • uppercase: forza il testo ad essere maiuscolo
  • lowercase: forza il testo alla capitalizzazione minuscola

letter-spacing e word-spacing[modifica]

Definiscono lo spazio rispettivamente tra i caratteri e le parole del testo

Sintassi:

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

Dove <valore> può essere normal, che definisce la spaziatura normale tra le lettere o le parole, un valore espresso in percentuale o una grandezza seguita da un'unità di misura valida.

Spazi tra le linee di testo[modifica]

La proprietà line-height serve invece per definire l'altezza della linea testo, che influisce quindi sulle righe successive quando si va a capo. Il suo valore è una grandezza, normalmente espressa in em.

Gestire gli spazi[modifica]

Come ultima del testo analizziamo la proprietà white-space, che vi capiterà di usare abbastanza poco. Questa proprietà serve a definire il comportamento del browser con gli spazi bianchi nel codice HTML, e può assumere i seguenti valori:

  • normal: il browser si comporta come normalmente (va a capo agli spazi, unisce le sequenze di spazi);
  • pre funziona come il tag HTML <pre>: gli spazi bianchi non vengono "condensati" e gli accapo sono mantenuti rispetto al sorgente HTML;
  • nowrap: come normal, solo che il browser non spezza il testo se c'è uno spazio;
  • pre-line: come pre, ma gli spazi vengono condensati.