Sommario
Le proprietà definite nelle seguenti sezioni influenzano la presentazione visuale dei caratteri, degli spazi, delle parole e dei paragrafi.
| Valore: | <length> | <percentage> | inherit |
| Iniziale: | 0 |
| Si applica a: | elementi a livello di blocco |
| Ereditata: | si |
| Percentuali: | in riferimento alla larghezza del blocco contenitore |
| Media: | visuale |
Questa proprietà specifica il rientro della prima riga di testo in un blocco. Più precisamente, essa specifica il rientro del primo riquadrato che fluisce nel primo riquadrato di riga del blocco. Il riquadrato è rientrato rispetto al limite sinistro (o destro, per l'impaginazione da destra a sinistra) del riquadrato di riga. I programmi utente dovrebbero rendere questo rientro come uno spazio vuoto.
I valori hanno i seguenti significati:
Il valore di 'text-indent' può essere negativo, ma possono esservi limiti nell'implementazione specifica.
Il seguente esempio provoca un rientro del testo di '3em'.
P { text-indent: 3em }
| Valore: | left | right | center | justify | <string> | inherit |
| Iniziale: | dipende dal programma utente e dalla direzione di scrittura |
| Si applica a: | elementi a livello di blocco |
| Ereditata: | si |
| Percentuali: | N/A |
| Media: | visuale |
Questa proprietà descrive il modo in cui il contenuto in riga di un blocco viene allineato. I valori hanno i seguenti significati:
Un blocco di testo è uno strato di riquadrati di riga. Nel caso di 'left', 'right' e 'center', questa proprietà specifica come i riquadrati in riga all'interno di ciascun riquadrato di riga si allineeranno rispetto ai lati sinistro e destro del riquadrato di riga; l'allineamento non è rispetto alla finestra di visualizzazione. Nel caso di 'justify', il programma utente può allungare i riquadrati in riga in aggiunta per aggiustare le loro posizioni. (Si vedano anche 'letter-spacing' e 'word-spacing'.)
In questo esempio, si noti che, poichè 'text-align' è ereditato, tutti gli elementi a livello di blocco all'interno dell'elemento DIV con 'class=center' avranno il loro contenuto in riga centrato.
DIV.center { text-align: center }
Nota. L'algoritmo di giustificazione effettiva usato dipende dal programma utente e dalla lingua del testo scritto.
I programmi utente conformi possono interpretare il valore 'justify' come 'left' o 'right', a seconda se la direzione di scrittura predefinita dell'elemento è, rispettivamente, da sinistra a destra o da destra a sinistra.
| Valore: | none | [ underline || overline || line-through || blink ] | inherit |
| Iniziale: | none |
| Si applica a: | tutti gli elementi |
| Ereditata: | no (si veda il testo) |
| Percentuali: | N/A |
| Media: | visuale |
Questa proprietà descrive le decorazioni aggiunte al testo di un elemento. Se la proprietà è specificata per un elemento a livello di blocco, influenza tutti i discendenti a livello di riga dell'elemento. Se è specificata per (o influenza) un elemento a livello di riga, influenza tutti i riquadrati generati dall'elemento. Se l'elemento non ha contenuto o nessun contenuto testuale (per esempio l'elemento IMG in HTML), i programmi utente devono ignorare questa proprietà.
I valori hanno i seguenti significati:
Il colore richiesto per la decorazione testuale dovrebbe essere derivato dal valore della proprietà 'color'.
Questa proprietà non è ereditata, ma i riquadrati discendenti di un riquadrato a blocco dovrebbero essere formattati con la stessa decorazione (per esempio dovrebbero essere tutti sottolineati). Il colore delle decorazioni dovrebbe rimanere lo stesso anche se gli elementi discendenti hanno differenti valori 'color'.
Nel seguente esempio per l'HTML, il contenuto testuale di tutti gli elementi A che si comportano da ipercollegamenti sarà sottolineato:
A[href] { text-decoration: underline }
Questa proprietà accetta un elenco separato da virgola di effetti di ombreggiatura da applicare al testo dell'elemento. Gli effetti di ombreggiatura si applicano nell'ordine specificato e possono così coprirsi l'uno con l'altro, ma non copriranno mai il testo stesso. Gli effetti di ombreggiatura non alterano le dimensioni di un riquadrato, ma possono estendersi oltre i suoi confini. Il livello di strato degli effetti di ombreggiatura è il medesimo di quello dell'elemento stesso.
Ogni effetto di ombreggiatura deve specificare uno spostamento dell'ombreggiatura e può, facoltativamente, specificare un raggio della zona d'ombra e un colore dell'ombreggiatura.
Uno spostamento dell'ombreggiatura è specificato con due valori <length> che indicano la distanza dell'ombra dal testo. Il primo valore di lunghezza specifica la distanza orizzontale alla destra del testo. Un valore di lunghezza orizzontale negativo posiziona l'ombra alla sinistra del testo. Il secondo valore di lunghezza specifica la distanza verticale sotto il testo. Un valore di lunghezza verticale negativo posiziona l'ombra sopra il testo.
Un raggio della sfocatura può facoltativamente essere specificato dopo lo spostamento dell'ombreggiatura. Il raggio della sfocatura è un valore di lunghezza che indica i confini dell'effetto di sfocatura. L'algoritmo esatto per calcolare l'effetto di sfocatura non è specificato.
Un valore di colore può facoltativamente essere specificato prima o dopo i valori di lunghezza dell'effetto d'ombra. Il valore di colore sarà usato come base per l'effetto d'ombra. Se non viene specificato nessun colore, si userà invece il valore della proprietà 'color'.
Le ombreggiature del testo possono essere usate con gli pseudo-elementi :first-letter :first-line.
L'esempio di sotto imposterà un'ombreggiatura del testo alla destra e sotto il testo dell'elemento. Poichè non è stato specificato alcun colore, l'ombra avrà lo stesso colore dell'elemento stesso, e poichè non è stato specificato un raggio di sfocatura, l'ombreggiatura del testo non sarà sfocata:
H1 { text-shadow: 0.2em 0.2em }
Il prossimo esempio posizionerà un'ombreggiatura alla destra e sotto il testo dell'elemento. L'ombra avrà un raggio di sfocatura di 5px e sarà rossa.
H2 { text-shadow: 3px 3px 5px red }
Il prossimo esempio specifica un elenco di effetti di ombreggiatura. La prima ombra sarà alla destra e sotto il testo dell'elemento e sarà rossa senza sfocatura. La seconda ombra coprirà il primo effetto di ombreggiatura e sarà gialla, sfocata, e posizionata alla sinistra e sotto il testo. Il terzo effetto di ombreggiatura sarà posizionato alla destra e sopra il testo. Poichè non viene specificato alcun colore d'ombra per il terzo effetto di ombreggiatura, verrà usato il valore della proprietà 'color' dell'elemento:
H2 { text-shadow: 3px 3px red, yellow -3px 3px 2px, 3px -3px }
Si consideri questo esempio:
SPAN.glow {
background: white;
color: white;
text-shadow: black 0px 0px 5px;
}
Qui le proprietà 'background' e 'color' hanno lo stesso valore e la proprietà 'text-shadow' è usata per creare un effetto "eclissi solare":
Nota. Questa proprietà non è definita nei CSS1. Alcuni effetti di ombreggiatura (come quello dell'ultimo esempio) possono rendere il testo invisibile nei programmi utente che supportano solo i CSS1.
| Valore: | normal | <length> | inherit |
| Iniziale: | normal |
| Si applica a: | tutti gli elementi |
| Ereditata: | si |
| Percentuali: | N/A |
| Media: | visuale |
Questa proprietà specifica il comportamento della spaziatura fra i caratteri del testo. I valori hanno i seguenti significati:
Gli algoritmi di spaziatura dei caratteri dipendono dal programma utente. La spaziatura dei caratteri può anche esere influenzata dalla giustificazione (si veda la proprietà 'text-align').
In questo esempio, lo spazio tra caratteri negli elementi BLOCKQUOTE è aumentato di '0.1em'.
BLOCKQUOTE { letter-spacing: 0.1em }
Nel seguente esempio, non si permette al programma utente di alterare lo spazio tra caratteri:
BLOCKQUOTE { letter-spacing: 0cm } /* Same as '0' */
Quando lo spazio risultante tra due caratteri non è lo stesso dello spazio predefinito, i programmi utenti non dovrebbero usare legature.
I programmi utente conformi possono considerare il valore della proprietà 'letter-spacing' come 'normal'.
| Valore: | normal | <length> | inherit |
| Iniziale: | normal |
| Si applica a: | tutti gli elementi |
| Ereditata: | si |
| Percentuali: | N/A |
| Media: | visuale |
Questa proprietà specifica il comportamento della spaziatura tra parole. I valori hanno i seguenti significati:
Gli algoritmi di spaziatura delle parole sono dipendenti dal programma utente. La spaziatura tra le parole è anche influenzata dalla giustificazione (si veda la proprietà 'text-align').
In questo esempio, la spaziatura tra parole negli elementi H1 è aumentata di '1em'.
H1 { word-spacing: 1em }
I programmi utente conformi possono considerare il valore della proprietà 'word-spacing' come 'normal'.
| Valore: | capitalize | uppercase | lowercase | none | inherit |
| Iniziale: | none |
| Si applica a: | tutti gli elementi |
| Ereditata: | si |
| Percentuali: | N/A |
| Media: | visuale |
Questa proprietà controlla gli effetti dell'uso delle maiuscole del testo di un elemento. I valori hanno i seguenti significati:
La trasformazione effettiva in ciascun caso dipende dalla lingua scritta. Si veda RFC 2070 ([RFC2070]) per i modi di individuare la lingua di un elemento.
I programmi utente conformi possono considerare il valore di 'text-transform' come 'none' per i caratteri che non provengono dal repertorio Latin-1 e per gli elementi scritti in lingue per le quali la trasformazione è differente da quella specificata nelle tabelle di conversione dei casi di ISO 10646 ([ISO10646]).
In questo esempio, tutto il testo nell'elemento H1 è trasformato in testo maiuscolo.
H1 { text-transform: uppercase }
| Valore: | normal | pre | nowrap | inherit |
| Iniziale: | normal |
| Si applica a: | elementi a livello di blocco |
| Ereditata: | si |
| Percentuali: | N/A |
| Media: | visuale |
Questa proprietà dichiara come viene gestito lo spazio bianco all'interno dell'elemento. I valori hanno i seguenti significati:
I seguenti esempi mostrano quale comportamento per lo spazio bianco ci si aspetta dagli elementi PRE e P, e dall'attributo "nowrap" in HTML.
PRE { white-space: pre }
P { white-space: normal }
TD[nowrap] { white-space: nowrap }
I programmi utente conformi possono ignorare la proprietà 'white-space' nei fogli di stile dell'autore e dell'utente, ma ne devono specificare il valore nel foglio di stile predefinito.