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 l’altezza di una riga di testo. Specifica l’allineamento orizzontale del testo. Specifica la decorazione aggiunta al testo. Imposta l’indentazione della prima linea in un blocco di testo. Specifica come gestire il testo che fuoriesce da un blocco contenitore. Aggiunge un’ombreggiatura al testo. Modifica le lettere maiuscole/minuscole di un testo. Specifica l’allineamento 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 dall’elemento 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 l’esempio all’url http://www.w3schools.com/cssref/playit.asp?filename=playcss_letter-spacing.

 line-height
Definisce l’altezza di una linea di testo.

selettore { line-height: altezza;}

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

 text-align
Imposta l’allineamento orizzontale del testo all’interno 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

2

 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 l’esempio all’url http://www.w3schools.com/cssref/playit.asp?filename=playcss_text-decoration.

 text-indent
Definisce l’indentazione della prima riga di contenuto in un elemento di blocco. I valori negativi sono consentiti e determinano l’effetto 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 l’indentazione in percentuale rispetto alla larghezza dell’elemento genitore;  inherit. Si veda l’esempio all’url 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

3

Si veda l’esempio all’url 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 dell’ombreggiatura (in pixel) e sono obbligatori;  blur rappresenta l’offuscamento (in pixel) ed è facoltativo;  colore è il colore dell’ombreggiatura, specificato facoltativamente mediante un qualsiasi colore valido;  inherit. Si veda l’esempio all’url 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 l’allineamento 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 l’elemento 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

4

          

baseline, allinea la linea base dell’elemento con quella dell’elemento genitore (è il default); sub, allinea l’elemento come se fosse un pedice; super, allinea l’elemento 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 l’elemento 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 all’altezza della linea di testo; inherit.

Si veda l’esempio all’url http://www.w3schools.com/cssref/playit.asp?filename=playcss_vertical-align&preval=25px.

 white-space
Dichiara come il browser dovrà gestire lo spazio vuoto all’interno 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 un’interruzione di riga;  pre-line, elimina tutti gli spazi aggiuntivi e il testo va a capo quando è necessario o quando si incontra un’interruzione di riga;  pre-wrap, mantiene tutti gli spazi aggiuntivi e il testo va a capo quando è necessario o quando si incontra un’interruzione di riga;  inherit. Si veda l’esempio all’url http://www.w3schools.com/cssref/playit.asp?filename=playcss_white-space.

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

5

 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 dell’elemento 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

6

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

7

Sign up to vote on this title
UsefulNot useful