formattazione del testo
Questo testo è in stile con alcune delle proprietà di formattazione del testo. Il titolo utilizza il text-align, text-transform e color proprietà. Il paragrafo è rientrato, allineati, ed è specificato lo spazio tra i caratteri. La sottolineatura viene rimosso da questo colore "Try it Yourself" collegamento.
Colore del testo
Il color proprietà viene utilizzata per impostare il colore del testo.
Con CSS, un colore è più spesso specificato da:
- un nome di colore - come il "red"
- un valore esadecimale - come "#ff0000"
- un valore RGB - come "rgb(255,0,0)"
Guardate i valori di colore CSS per un elenco completo dei possibili valori di colore.
Il colore del testo di default per una pagina viene definita nel selettore corpo.
 | Nota: Per W3C compliant CSS: Se si definisce il color proprietà, è necessario anche definire il background-color proprietà. |
|---|
Allineamento testo
Il text-align proprietà viene utilizzata per impostare l'allineamento orizzontale di un testo.
Un testo può essere allineato a sinistra oa destra, centrato o giustificato.
L'esempio seguente mostra allineato al centro e destra e sinistra testo allineato (allineamento a sinistra è di default se la direzione del testo è da sinistra a destra, e l'allineamento a destra è di default se la direzione del testo è da destra a sinistra):
Quando il text-align proprietà è impostata su "justify" , ogni linea è allungata in modo che ogni linea ha uguale larghezza, ed i margini destro e sinistro sono diritti (come nelle riviste e giornali):
la decorazione di testo
Il text-decoration proprietà viene utilizzata per impostare o rimuovere decorazioni dal testo.
Il valore di text-decoration: none; è spesso usato per rimuovere le sottolineature dai collegamenti:
Gli altri text-decoration valori vengono utilizzati per decorare il testo:
Esempio
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
} Prova tu stesso " | Nota: Non è consigliabile per sottolineare il testo, che non è un link, in quanto questo confonde spesso il lettore. |
|---|
Trasformazione di testo
Il text-transform proprietà viene utilizzata per specificare le lettere maiuscole e minuscole in un testo.
Può essere utilizzato per trasformare tutto in lettere maiuscole o minuscole, o in maiuscolo la prima lettera di ogni parola:
Esempio
p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}
p.capitalize {
text-transform: capitalize;
} Prova tu stesso " il rientro del testo
Il text-indent proprietà viene utilizzata per specificare il rientro della prima riga di un testo:
Spaziatura del carattere
Il letter-spacing proprietà viene utilizzata per specificare lo spazio tra i caratteri in un testo.
L'esempio seguente mostra come aumentare o diminuire lo spazio tra i caratteri:
Altezza della linea
La line-height proprietà viene utilizzata per specificare lo spazio tra le linee:
Orientamento testo
La direction proprietà viene utilizzata per cambiare la direzione del testo di un elemento:
parola spaziatura
Il word-spacing proprietà viene utilizzata per specificare lo spazio tra le parole in un testo.
L'esempio seguente mostra come aumentare o diminuire lo spazio tra le parole:
Altri esempi
Disabilitare la disposizione del testo all'interno di un elemento
Questo esempio dimostra come disattivare la disposizione del testo all'interno di un elemento.
Allineamento verticale di un'immagine
Questo esempio mostra come impostare la allineamento verticale di un'immagine in un testo.
Aggiungere un'ombra al testo
Questo esempio dimostra come aggiungere un'ombra al testo.
Mettiti alla prova con esercizi!
Esercizio 1 » Esercizio 2» Esercizio 3 » Esercizio 4» Esercizio 5 »
Tutte le proprietà CSS del testo
| Proprietà | Descrizione |
|---|---|
| color | Imposta il colore del testo |
| direction | Specifica la direzione del testo / direzione di scrittura |
| letter-spacing | Aumenta o diminuisce lo spazio tra i caratteri in un testo |
| line-height | Imposta l'altezza della linea |
| text-align | Specifica l'allineamento orizzontale del testo |
| text-decoration | Specifica la decorazione aggiunto al testo |
| text-indent | Specifica il rientro della prima riga in un testo-blocco |
| text-shadow | Specifica l'effetto ombra aggiunto al testo |
| text-transform | Controlla la capitalizzazione di testo |
| unicode-bidi | Usato insieme alla direzione di proprietà per impostare o restituire se il testo deve essere ignorato per supportare più lingue nello stesso documento |
| vertical-align | Imposta l'allineamento verticale di un elemento |
| white-space | Specifica come white-space all'interno di un elemento viene gestito |
| word-spacing | Aumenta o diminuisce lo spazio tra le parole in un testo |