Vai ai contenuti

LAU



Home > Proprietà CSS2 > Proprietà per il testo


Proprietà CSS2

Proprietà per il testo

Tabella riassuntiva e descrittiva delle funzionalità, valori e supporto dei browser relativa alla specifiche dei CSS2 per la gestione del testo.

  • NN: indica da quale versione di Netscape Navigator viene supportata la proprietà.
  • IE: indica da quale versione di Internet Explorer viene supportata la proprietà.
  • MF: indica da quale versione di Mozilla Firefox viene supportata la proprietà.
Proprietà Valori IE NN MF
color <colore> 3.0 4.0 1.0
direction ltr
rtl
6.0 6.0 1.0
letter-spacing normal
<lunghezza>
4.0 6.0 1.0
text-align left
right
center
justify
4.0 4.0 1.0
text-decoration none
underline
overline
line-through
blink
4.0 4.0 1.0
text-indent %
<lunghezza>
4.0 4.0 1.0
text-shadow none
<colore>
<lunghezza>
- - -
text-transform none
capitalize
uppercase
lowercase
4.0 4.0 1.0
unicode-bidi normal
embed
bidi-override
5.0 - -
white-space normal
pre
nowrap
5.0 4.0 1.0
word-spacing normal
<lunghezza>
6.0 6.0 1.0

Esempi dimostrativi delle funzionalitą di alcune proprietą del testo:

torna alla lista completa delle proprietà

color

La proprietà color definisce il colore del testo.
Il valore del colore può essere espresso con:

  • un <nome>;
  • un valore <rgb>;
  • un valore esadecimale.
body{ 
color: red;
}

In questo esempio il colore dell'elemento body è impostato in rosso.

torna alla tabella

direction

La proprietà direction imposta la direzione del testo.
La proprietà direction ammette i seguenti valori:

  • ltr (da sinistra verso destra);
  • rtl (da destra verso sinistra).
div{ 
direction: rtl;
}

In questo esempio la direzione del testo dell'elemento div andrà da destra verso sinistra).

torna alla tabella

letter-spacing

La proprietà letter-spacing consente di diminuire o aumentare lo spazio bianco tra i caratteri.
La proprietà letter-spacing ammette i seguenti valori:

  • normal (definisce uno spazio regolare tra i caratteri);
  • <lunghezza> (definisce uno spazio fisso tra i caratteri).
p{ 
letter-spacing: 12px;
}

In questo esempio lo spazio tra i caratteri dell'elemento p è stabilito in 12 pixel.

La proprietà letter-spacing non consente di impostare lo spazio tra i caratteri con valori negativi.

torna alla tabella

text-align

La proprietà text-align consente di allineare il testo.
La proprietà text-align ammette i seguenti valori:

  • left (allinea il testo a sinistra);
  • right (allinea il testo a destra);
  • center (allinea il testo centralmente);
  • justify (allinea il testo sia sul lato destro sia sul lato sinistro).
p{ 
text-align: left;
} 

In questo esempio il testo viene allineato a sinistra (left).

torna alla tabella

text-decoration

La proprietà text-decoration aggiunge elementi decorativi al testo.
La proprietà text-decoration ammette i seguenti valori:

  • none (definisce il testo normale);
  • underline (definisce il testo sottolineato);
  • overline (definisce il testo con una barra sopra);
  • line-through (definisce il testo barrato);
  • blink (definisce il testo lampeggiante).
p{ 
text-decoration: underline;
}

In questo esempio il testo è sottolineato (underline).

torna alla tabella

text-indent

La proprietà text-indent consente di regolare l'indentazione del testo.
La proprietà text-indent può essere espressa con i seguenti valori:

  • <lunghezza> (definisce un'indentazione fissa);
  • % (definisce un'indentazione in percentuale).
p{ 
text-indent: 20px;
}

In questo esempio la prima linea del testo è indentata di 20px.

torna alla tabella

text-shadow

La proprietà text-shadow dovrebbe creare un'ombreggiatura per il testo.

Al momento la proprietà text-shadow non è supportata da nessun browser.

torna alla tabella

text-transform

La proprietà text-transform consente di variare il formato del testo.
La proprietà text-transform può essere espressa con i seguenti valori:

  • capitalize (la prima lettera di ogni singola parola è scritta in maiuscolo);
  • uppercase (ogni lettera di ogni parola è scritta in maiuscolo);
  • lowercase (ogni lettera di ogni parola è scritta in minuscolo);
  • none (nessuna variazione).
p{ 
text-transform: uppercase;
}

In questo esempio ogni lettera di ogni parola dell'elemento p sarà scritta in minuscolo.

torna alla tabella

unicode-bidi

La proprietà unicode-bidi utilizzata congiuntamente alla proprietà direction determina la direzione del testo.
La proprietà unicode-bidi ammette i seguenti valori:

  • normal (valore predefinito);
  • embed (mantiene l'ordine stabilito dalla proprietà direction);
  • bidi-override (riordina la sequenza stabilita dalla proprietà direction.
.p{
direction: rtl; 
unicode-bidi: bidi-override; 
}

In questo esempio il valore bidi-override della proprietà unicode-bidi consente di riordinare la sequenza stabilita dalla proprietà direction.

La proprietà unicode-bidi non è supportata da Mozilla Firefox e Netscape Navigator.

torna alla tabella

white-space

La proprietà white-space serve a gestire il trattamento degli spazi bianchi presenti in un elemento.
La proprietà white-space ammette i seguenti valori:

  • none (valore di default. Gli spazi bianchi sono ridotti a uno);
  • pre (gli spazi bianchi e l'inizio di nuove righe sono mantenuti così come sono nel codice);
  • nowrap (gli spazi bianchi sono ridotti a uno e l'andata a capo è disabilitata).
div{
white-space: nowrap;
}

In questo esempio gli spazi bianchi dell'elemento div sono ridotti a uno e l'andata a capo è disabilitata.

torna alla tabella

word-spacing

La proprietà word-spacing è complementare a letter-spacing. Serve ad aumentare lo spazio tra le parole comprese in un elemento.
La proprietà word-spacing ammette i seguenti valori:

  • normal (valore di default. Le parole mantengono il loro spazio normale);
  • <lunghezza> (Le parole saranno spaziate secondo la distanza impostata).
p{
word-spacing: 1.2em; 
}

In questo esempio le parole dell'elemento p saranno spaziate di 1.2em.

La proprietà word-spacing non consente di utilizzare valori negativi.

torna alla tabella

[ Torna all’inizio della pagina ]



Sito realizzato dal Laboratorio di Accessibilità e Usabilità del CSI-Piemonte - Privacy, cookies e accessibilità

[ Torna all’inizio della pagina ]