Proprietà per il testo
|
Valori |
|
|
<colore> |
|
|
ltr |
|
|
normal |
|
|
left |
|
|
none |
|
|
% |
|
|
none |
|
|
none |
|
|
normal |
|
|
normal |
|
|
normal |
Esempi dimostrativi delle funzionalità di alcune proprietà del testo:
· Esempio 1: allineamento e indentazione del testo
· Esempio 2: variazioni di formato
· Esempio 3: Formattazioni vanzate
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.
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).
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.
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).
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).
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.
La proprietà text-shadow dovrebbe creare un'ombreggiatura per il testo.
Al momento la proprietà text-shadow non è supportata da nessun browser.
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.
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-bidiconsente di riordinare la sequenza stabilita dalla proprietà direction.
La proprietà unicode-bidi non è supportata da Mozilla Firefox e Netscape Navigator.
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.
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.