CSS/Proprietà di base/Testo base

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

color

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

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

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

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

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

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

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

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.