Testo in CSS
Scopri i fondamenti dello stile del testo con i CSS: decorazione del testo, colore del testo, allineamento e altro ancora. Guarda gli esempi.
Qui esaminiamo le proprietà che possono aiutarti ad applicare stili al tuo testo
- Colore del testo
- Allineamento del testo
- Decorazione del testo
- Trasformazione del testo
- Ombra del testo
- Rientro del testo
- Spaziatura tra le lettere
- Altezza della riga
- Spaziatura tra le parole
Colore del testo
La proprietà color si usa per impostare il colore del testo. Per specificare il colore puoi usare il nome di un colore (red), un valore esadecimale (#ff0000) o un valore RGB (rgb (255,0,0) ).
Esempio della proprietà color:.
Esempio di utilizzo della proprietà CSS color:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p style="color:#ff0000">This is some paragraph in red.</p>
</body>
</html>Risultato
Allineamento del testo
La proprietà di allineamento si usa per allineare il testo all'interno di un elemento: a sinistra, a destra, al centro, ecc.
L'allineamento del testo ha quattro valori:
- Left (text-align: left) - allinea il testo a sinistra
- Right (text-align: right) - allinea il testo a destra
- Center (text-align: center) - posiziona il testo al centro della pagina
- Justify (text-align: justify) - distende la riga di testo per allinearne sia l'estremità sinistra che quella destra (come nelle riviste e nei giornali)
Per impostazione predefinita, i browser allineano il testo a sinistra; se è necessario allineare il testo a destra o posizionarlo al centro, dobbiamo usare il valore corrispondente.
Esempio della proprietà text-align:
Esempio di utilizzo della proprietà CSS text-align:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>This is some paragraph</p>
<p style="text-align:center">Some paragraph with value center.</p>
<p style="text-align:right">Some paragraph with value right.</p>
<p style="text-align:justify">Some paragraph with value justify.</p>
</body>
</html>Decorazione del testo
La decorazione del testo si usa per impostare la decorazione del testo. In CSS3 è uno shorthand per le proprietà CSS text-decoration-line, CSS text-decoration-color e CSS text-decoration-style.
La proprietà decoration si usa per specificare le decorazioni a linea aggiunte al testo. I seguenti valori sono validi per la proprietà text-decoration.
- Overline (text-decoration:overline) - ogni riga di testo ha una linea sopra di sé
- Underline (text-decoration:underline) - ogni riga di testo è sottolineata
- Line-through (text-decoration:line-through) - ogni riga di testo è barrata
- None (text-decoration:none) - non viene applicata alcuna decorazione del testo
Esempio della proprietà text-decoration:
Esempio di utilizzo della proprietà CSS text-decoration:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<a style="text-decoration:none">This is link without underline</a>
<h1 style="text-decoration:overline">Heading with value overline.</h1>
<p style="text-decoration:line-through">Some paragraph with value line-through.</p>
<a style="text-decoration:underline">Some hyperlink with value underline.</a>
</body>
</html>Risultato
Trasformazione del testo
La proprietà transform si usa per controllare l'uso delle maiuscole nel testo. Significa che puoi impostare il testo in maiuscolo, in minuscolo o con l'iniziale maiuscola (title case).
La proprietà transform ha i seguenti valori:
- Uppercase (text-transform: uppercase) - converte tutti i caratteri in maiuscolo
- Lowercase (text-transform: lowercase) - converte tutti i caratteri in minuscolo
- Capitalize (text-transform: capitalize) - converte in maiuscolo il primo carattere di ogni parola
Esempio della proprietà text-transform:
Esempio di utilizzo della proprietà CSS text-transform:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p style="text-transform:uppercase">Paragraph with uppercase.</p>
<p style="text-transform:lowercase">Paragraph with lowercase.</p>
<p style="text-transform:capitalize">Paragraph with capitalize.</p>
</body>
</html>Risultato
Ombra del testo
Usiamo la proprietà text-shadow quando vogliamo dare un'ombra al nostro testo.
La proprietà shadow si usa per applicare vari effetti di ombra al testo. Accetta un elenco di valori. Ogni elemento dell'elenco può avere due o più valori separati da virgola.
La sintassi della proprietà text-shadow può avere questo aspetto
Esempio della proprietà CSS text-shadow
text-shadow: h-shadow v-shadow blur colorQui puoi vedere alcuni esempi di ombra del testo.
Rientro del testo
La proprietà text-indent si usa per specificare la lunghezza dello spazio vuoto della prima riga in un blocco di testo. I valori seguenti sono validi per questa proprietà:
- Length, che specifica il rientro in px, pt, cm, em, ecc. Il valore predefinito è 0. Sono ammessi valori negativi.
- Percentage, che specifica il rientro come percentuale della larghezza del blocco contenitore.
- Each-line, quando il rientro interessa la prima riga e ogni riga dopo un'interruzione di riga forzata, ma non le righe dopo un'interruzione di riga automatica (soft wrap).
- Hanging, che inverte le righe a cui viene applicato il rientro. La prima riga non viene rientrata.
- Initial, che fa usare alla proprietà il suo valore predefinito.
- Inherit, che eredita la proprietà dall'elemento genitore.
Esempio della proprietà text-indent:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
text-indent: 100px;
line-height: 24px;
font-size: 16px;
}
</style>
</head>
<body>
<h2>Text Indentation Example</h2>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
</body>
</html>Spaziatura tra le lettere
La proprietà CSS letter-spacing permette di definire gli spazi tra le lettere/caratteri di un testo. Questa proprietà supporta i seguenti valori:
- Normal, che significa che non ci saranno spazi extra tra i caratteri. È il valore predefinito di questa proprietà.
- Length, che definisce uno spazio extra tra i caratteri. Sono ammessi valori negativi.
- Initial, che fa usare alla proprietà il suo valore predefinito.
- Inherit, che eredita la proprietà dall'elemento genitore.
Esempio della proprietà letter-spacing:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
text-indent: 100px;
line-height: 24px;
font-size: 16px;
letter-spacing: 5px;
}
h3 {
letter-spacing: -1px;
}
</style>
</head>
<body>
<h2>Example of letter-spacing property</h2>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
<h3>
Here is some text with letter-spacing property.
</h3>
</body>
</html>Altezza della riga
La proprietà line-height definisce l'altezza della riga. Si usa per impostare l'interlinea delle righe di un testo. Se il valore di line-height è maggiore del valore di font-size di un elemento, la differenza costituirà l'interlinea del testo. Ecco i valori supportati da questa proprietà:
- Normal, che definisce un'altezza della riga normale. È il valore predefinito di questa proprietà.
- Length, che definisce un'altezza della riga fissa in px, cm, ecc.
- Number, che definisce un numero da moltiplicare per la dimensione corrente del font per impostare l'altezza della riga.
- %, che definisce un'altezza della riga in percentuale della dimensione corrente del font.
- Initial, che fa usare alla proprietà il suo valore predefinito.
- Inherit, che eredita la proprietà dall'elemento genitore.
Esempio della proprietà line-height:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
line-height: 30px;
}
h3 {
line-height: 1;
}
</style>
</head>
<body>
<h2>Example of line-height property</h2>
<p> Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. </p>
<h3>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</h3>
</body>
</html>Spaziatura tra le parole
Con l'aiuto della proprietà CSS word-spacing possiamo modificare lo spazio tra le parole di un testo, non tra i singoli caratteri. Supporta i seguenti valori:
- Normal, che specifica una spaziatura normale tra le parole. È il valore predefinito di questa proprietà.
- Length, che specifica una spaziatura extra tra le parole. Può essere specificata in px, pt, cm, em, ecc. Sono ammessi valori negativi.
- Initial, che fa usare alla proprietà il suo valore predefinito.
- Inherit, che eredita la proprietà dall'elemento genitore.
Esempio della proprietà word-spacing:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
word-spacing: 1em;
}
h3 {
word-spacing: -3px;
}
span {
display: block;
word-spacing: 3rem;
}
</style>
</head>
<body>
<h2>Example of word-spacing property</h2>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
<h3>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</h3>
<span>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs.
</span>
</body>
</html>