Le proprietà del testo in CSS servono per definire lo stile e la formattazione del contenuto testuale di un documento.
Indice
- Colori del testo
- text-transform
- text-decoration
- text-indent
- text-align
- direction
- text-shadow
- box-shadow
- text-rendering
Colori del testo
La proprietà color imposta il colore del testo. Per impostazione predefinita, il suo valore è impostato su inherit, il che significa che il testo eredita il colore del suo elemento genitore.
Per la maggior parte dei browser il valore di default per il colore del testo è il nero.
p {color: #000000; } /* Colore nero */
text-transform
La proprietà text-transform controlla il formato del testo. I valori possibili sono i seguenti:
text-transform : inherit | none | uppercase | lowercase | capitalize
Questa proprietà consente di convertire tutto il testo in maiuscolo o minuscolo. Il valore capitalize converte la prima lettera del testo in maiuscolo. Questa proprietà viene ereditata per impostazione predefinita, quindi è possibile utilizzare il valore none per rimuove l'effetto di trasformazione del testo ereditato.
text-decoration
La proprietà text-decoration applica ulteriori effetti visuali al testo selezionato.
text-decoration : none | underline + overline + line-through + blink
Per poter aggiungere più decorazioni al testo, bisognerà separare i valori con il simbolo +. La seguente regola applica una linea sopra e sotto al testo al testo contente la class sottolineato:
.sottolineato {text-decoration: underline overline; }
Questa proprietà non viene ereditata, ma il suo effetto viene visualizzato in tutti i discendenti incorporati negli elementi in un modo simile all'eredità.
text-indent
La prima riga di testo in un elemento a blocchi può essere indentata con la proprietà text-indent. I valori possono essere impostati su un'unità di misura o su una percentuale di larghezza dell'elemento genitore. Il testo può avere anche un rientro "invertito" usando un valore negativo.
text-indent (block) : inherit | <length> | <percentage>
Questa proprietà può essere impostata solo per gli elementi che fanno parte di un blocco, come ad esempio il paragrafo. Nel seguente esempio il rientro del paragrafo ha un valore impostato a 1em.
p { text-indent: 1em; }
text-align
I testi contenuti all'interno di un elemento blocco, possono essere allineati grazie alla proprietà text-align. Questa proprietà rimpiazza l'attributo (ormai deprecato) align in HTML.
text-align (block) : inherit | left | center | right | justify
Gli elementi testuali e inline possono essere allineati a sinistra, al centro e a destra. Il valore justify può giustificare le righe del testo sulla destra e sulla sinistra.
p { text-align: left; } /* Paragrafo con allineamento a sinistra */
La proprietà text-align viene ereditata, quindi deve essere esplicitamente dichiarata negli elementi figlio per poter cambiare l'allineamento.
direction
La direzione di scrittura del testo può essere cambiata con la proprietà direction.
direction (block) : inherit | ltr | rtl
Il valore predefinito è ltr, che applica al testo la scrittura da sinistra verso destra. Il valore può essere cambiato in rtl per far fluire il testo da destra verso sinistra. Rtl è il valore che viene utilizzato ad esempio nell'arabo.
<p style="direction: rtl">Testo scritto da destra verso sinistra.</p>
Questa proprietà può essere ereditata per tutto il testo della pagina web impostando il valore di direction nel body della pagina.
text-shadow
La proprietà text-shadow applica un effetto di ombreggiatura al testo.
text-shadow : inherit | none | <offset-x> <offset-y> [<blur-radius>] [<color>]
L'ombra viene definita utilizzando due valori di offset, seguiti da due valori opzionali per la sfocatura (blur) e per il colore (color). Gli offset x e y sono specificati come valori di lunghezza relativi al testo. I valori positivi spostano l'ombra da destra e verso il basso; mentre i valori negativi la spostano da sinistra e verso l'alto.
L'effetto blur può essere applicato all'impostazione blur radius, che allunga l'effetto di ombreggiatura sbiadendo i bordi. Il valore facoltativo finale per la proprietà text-shadow è il colore dell'ombra. Se non viene specificato alcun valore di colore, la maggior parte dei browser restituisce l'ombra dello stesso colore del testo.
Il seguente esempio fa apparire un'ombra rossa leggermente sfocata nella parte superiore e sulla destra di tutti gli elementi H1:
h1 { text-shadow: 1px -1px 1px red; }
La proprietà text-shadow è una proprietà nata in CSS3 supportata dalla maggior parte dei browser.
box-shadow
Oltre al testo, è possibile aggiungere un effetto ombra agli elementi blocco con la proprietà box-shadow.
box-shadow (block) : inherit | none | [inset] <offset-x> <offset-y> [<blur-radius>] [<spread-radius>] [<color>]
I valori per l'ombra della casella sono gli stessi di text-shadow, con due eccezioni. È possibile specificare un quarto valore di lunghezza del raggio di diffusione (blur-radius) che aumenta o riduce l'ombra. Questo valore è facoltativo ed è impostato a 0 se non viene specificato, rendendo l'ombra delle stesse dimensioni dell'elemento.
La seguente regola della classe ombra mostra un'ombra rossa sfocata in basso a destra di un qualsiasi elemento di blocco che utilizza la classe:
.ombra { box-shadow: 3px 3px 3px 6px red; }
Il secondo valore della proprietà box-shadow è dato dalla parola chiave inset. Grazie a questo valore l'ombra viene proiettata all'interno del box anziché all'esterno.
.ombra-interna { box-shadow: inset 3px 3px 3px 6px red; }
La proprietà box-shadow è supportata dai browser, ma può essere espansa utilizzando i prefissi -webkit e -moz come nel seguente esempio:
.ombra
{
/* Chrome 1-5, Safari 2-5.1+ */
-webkit-box-shadow: 3px 3px 5px 6px red;
/* Firefox 3.5-3.6 */
-moz-box-shadow: 3px 3px 5px 6px red;
box-shadow: 3px 3px 5px 6px red;
}
text-rendering
Di default i browser decretano automaticamente come renderizzare il testo al fine di ottimizzare parametri come la velocità, la leggibilità o la geometria. Questo aspetto può essere modificato utilizzando la proprietà text-rendering:
text-rendering (text elements) : inherit | auto | optimizeSpeed | optimizeLegibility | geometricPrecision
L'ottimizzazione per la leggibilità è spesso auspicabile, ma bisogna tenere presente che è possibile che questo valore influisca negativamente sulle prestazioni, in particolar modo se applicato al testo di pagine pesanti e visualizzate su dispositivi mobili.
p.legibility { text-rendering: optimizeLegibility; }
p.speed { text-rendering: optimizeSpeed; }
La proprietà text-rendering non è supportata di default da nessuno standard CSS, ma è supportata dai browser.
