Propriet del testo con i CSS

Nella tabella seguente sono indicate alcune propriet CSS che permettono di specificare le caratteristiche del testo: Propriet
color letter-spacing line-height tetx-align text-decoration text-indent text-overflow (CSS3) text-shadow (CSS3) text-transform vertical-align word-break (CSS3) white-space word-spacing word-wrap (CSS3)

Descrizione
Imposta il colore del testo. Imposta lo spazio tra i caratteri del testo. Imposta laltezza di una riga di testo. Specifica lallineamento orizzontale del testo. Specifica la decorazione aggiunta al testo. Imposta lindentazione della prima linea in un blocco di testo. Specifica come gestire il testo che fuoriesce da un blocco contenitore. Aggiunge unombreggiatura al testo. Modifica le lettere maiuscole/minuscole di un testo. Specifica lallineamento verticale del testo. Indica come le parole devono essere interrotte, quando si va a capo. Specifica come gestire lo spazio bianco interno ad un elemento. Imposta lo spazio tra le parole del testo. Indica se le parole possono essere interrotte per andare a capo.

Vediamo le propriet nel dettaglio.

color
Imposta il colore di primo piano di un elemento (in HTML il testo). Il colore viene applicato anche al bordo, a meno che non si sia impostato per esso un diverso colore.

selettore {color: colore_testo;}

dove colore_testo pu assumere i seguenti valori: un qualsiasi colore valido; inherit; transparent. Il valore predefinito dipende dal browser. Il valore inherit specifica che il colore (o in generale la propriet) viene ereditata dallelemento genitore.

letter-spacing
Definisce la quantit di spazio bianco da inserire tra i caratteri del testo. Sono consentiti i valori negativi.

selettore { letter-spacing: spaziatura;} 1

Autore: Bocchi Cinzia Ultimo aggiornamento: 20/10/2013

dove spaziatura pu assumere i seguenti valori: normal ( il default), che non modifica lo spazio esistente e che equivale a una lunghezza pari a 0; una misura di lunghezza, specificata mediante valore numerico, eventualmente negativo, e unit di misura. Si veda lesempio allurl http://www.w3schools.com/cssref/playit.asp?filename=playcss_letter-spacing.

line-height
Definisce laltezza di una linea di testo.

selettore { line-height: altezza;}

dove altezza pu assumere i seguenti valori: normal ( il default), che non modifica laltezza corrente; un numero, che verr moltiplicato per la dimensione del font, al fine di ottenere laltezza della linea di testo; una misura di lunghezza, specificata mediante valore numerico, non negativo, e unit di misura; un valore percentuale, che determina laltezza in percentuale rispetto alla dimensione del font; inherit. Si veda lesempio allurl http://www.w3schools.com/cssref/playit.asp?filename=playcss_line-height&preval=3.

text-align
Imposta lallineamento orizzontale del testo allinterno di un elemento di blocco.

selettore { text-align: allineamento;}

dove allineamento pu assumere i seguenti valori: left, allineamento a sinistra ( il default se la scrittura orientata da sinistra a destra); center, allineamento centrato; right, allineamento a destra ( il default se la scrittura orientata da destra a sinistra); justify, allineamento giustificato; inherit.

Autore: Bocchi Cinzia Ultimo aggiornamento: 20/10/2013

 text-decoration
Consente di applicare specifici effetti al testo, come la sottolineatura.

selettore { text-decoration: decorazione;}

dove decorazione pu assumere i seguenti valori: none, nessuna decorazione ( il default); underline, sottolineato; overline, definisce una linea sopra il testo; line-through, barrato inherit. Si veda lesempio allurl http://www.w3schools.com/cssref/playit.asp?filename=playcss_text-decoration.

text-indent
Definisce lindentazione della prima riga di contenuto in un elemento di blocco. I valori negativi sono consentiti e determinano leffetto contrario (un rientro sporgente).

selettore { text-indent: indentazione;}

dove indentazione pu assumere i seguenti valori: 0, nessuna indentazione ( il default); una misura di lunghezza, specificata mediante numero e unit di misura; un valore percentuale, che determina lindentazione in percentuale rispetto alla larghezza dellelemento genitore; inherit. Si veda lesempio allurl http://www.w3schools.com/cssref/playit.asp?filename=playcss_text-indent.

text-overflow
Specifica come gestire il testo che fuoriesce da un blocco contenitore, per evitare che il blocco si espansa orizzontalmente o verticalmente.

selettore { text-overflow: comportamento;}

dove comportamento pu assumere i seguenti valori: clip, il testo viene tagliato ( il default); ellipsis, mostra i puntini di sospensione dove avviene il taglio del testo; un testo specifico che viene mostrato dove avviene il taglio.
Autore: Bocchi Cinzia Ultimo aggiornamento: 20/10/2013

Si veda lesempio allurl http://www.w3schools.com/cssref/playit.asp?filename=playcss_text-overflow.

text-shadow
Aggiunge una o pi ombreggiature al testo. Le varie ombreggiature sono separate da virgole. La propriet non supportata da Internet Explorer 9 e versioni precedenti.

selettore { text-shadow: h-shadow v-shadow blur colore;}

dove: h-shadow e v-shadow specificano la posizione orizzontale e verticale dellombreggiatura (in pixel) e sono obbligatori; blur rappresenta loffuscamento (in pixel) ed facoltativo; colore il colore dellombreggiatura, specificato facoltativamente mediante un qualsiasi colore valido; inherit. Si veda lesempio allurl http://www.w3schools.com/cssref/playit.asp?filename=playcss_text-shadow.

text-transform
Controlla le maiuscole/minuscole in un testo.

selettore { text-transform: trasformazione;}

dove trasformazione pu assumere i seguenti valori: none, nessuna trasformazione ( il default); capitalize, trasforma in maiuscolo il primo carattere di ogni parola; uppercase, trasforma tutti i caratteri in maiuscolo; lowercase, trasforma tutti i caratteri in minuscolo; inherit.

vertical-align
Definisce lallineamento verticale della linea di base di un elemento inline rispetto alla linea di base della riga in cui si trova. I valori negativi sono consentiti e fanno scendere lelemento invece di elevarlo. Si applica anche alle celle delle tabelle, ma i soli valori utilizzabili sono baseline, top, middle e bottom.

selettore { vertical-align: allineamento;}

dove allineamento pu assumere i seguenti valori:

Autore: Bocchi Cinzia Ultimo aggiornamento: 20/10/2013

baseline, allinea la linea base dellelemento con quella dellelemento genitore ( il default); sub, allinea lelemento come se fosse un pedice; super, allinea lelemento come se fosse un apice; top, allinea la parte superiore dell'elemento con la sommit dell'elemento pi alto della linea; text-top, allinea la parte superiore dell'elemento con la parte superiore del font dell'elemento genitore; middle, posizione lelemento nel mezzo dell'elemento padre; bottom, allinea la parte inferiore dell'elemento con l'elemento pi basso sulla linea; text-bottom, allinea la parte inferiore dell'elemento con la parte inferiore del font dell'elemento genitore; lunghezza, specificata mediante numero e unit di misura; percentuale, calcolata rispetto allaltezza della linea di testo; inherit.

Si veda lesempio allurl http://www.w3schools.com/cssref/playit.asp?filename=playcss_vertical-align&preval=25px.

white-space
Dichiara come il browser dovr gestire lo spazio vuoto allinterno di un elemento.

selettore { white-space: spazio;}

dove spazio pu assumere i seguenti valori: normal, visualizza solo uno spazio tra le parole egli spazi eccedenti vengono ignorati; il testo va a capo automaticamente ( il default); nowrap, visualizza solo uno spazio tra le parole e gli spazi eccedenti vengono ignorati; il testo non va a capo automaticamente ma continua fino a quando non si incontra un tag <br>; pre, si comporta come il tag <pre> visualizzando tutti gli spazi bianchi tra le parole e andando a capo quando incontra uninterruzione di riga; pre-line, elimina tutti gli spazi aggiuntivi e il testo va a capo quando necessario o quando si incontra uninterruzione di riga; pre-wrap, mantiene tutti gli spazi aggiuntivi e il testo va a capo quando necessario o quando si incontra uninterruzione di riga; inherit. Si veda lesempio allurl http://www.w3schools.com/cssref/playit.asp?filename=playcss_white-space.

Autore: Bocchi Cinzia Ultimo aggiornamento: 20/10/2013

 word-spacing
Definisce la quantit di spazio vuoto da inserire tra le parole in un elemento. Sono consentiti i valori negativi.

selettore { word-spacing: spazio;}

dove spazio pu assumere i seguenti valori: normal, non modifica la quantit di spazio corrente ed equivale a 0 ( il default); lunghezza, specificata mediante numero e unit di misura; inherit.

word-wrap
Indica se le parole possono essere interrotte per andare a capo.

selettore { word-wrap: rottura;}

dove rottura pu assumere i seguenti valori: normal, manda a capo le parole solo in presenza di specifici break-point ( il default); break-word, manda a capo le parole quando la loro lunghezza eccede la larghezza dellelemento che le contiene.

Riferimenti E. A. Meyer, Cascading Style Sheets - La guida completa, Hops Libri, 2007 W3schools, http://www.w3schools.com/css/css_text.asp W3schools, http://www.w3schools.com/css/css3_text_effects.asp

Quest'opera distribuita con Licenza Creative Commons Attribuzione - Non commerciale - Condividi allo stesso modo 3.0 Italia.

Autore: Bocchi Cinzia Ultimo aggiornamento: 20/10/2013

Autore: Bocchi Cinzia Ultimo aggiornamento: 20/10/2013