Proprietà CSS text-decoration
Usa la proprietà abbreviata CSS text-decoration per specificare tipo, stile e colore della decorazione del testo. Scopri i valori e gli esempi.
La proprietà CSS text-decoration aggiunge linee decorative al testo — solitamente il sottolineato sotto un link, una riga di cancellazione sul testo eliminato, o una sopralineatura per enfatizzare. È la proprietà a cui si ricorre quando si vuole aggiungere (o, altrettanto spesso, rimuovere) queste linee.
Questa pagina tratta la sintassi abbreviata, tutti i valori accettati, come interagisce con le sue proprietà a forma estesa, e i casi pratici in cui si utilizza (come la formattazione dei link).
Cosa fa text-decoration
In CSS3, text-decoration è un'abbreviazione che imposta contemporaneamente tre proprietà estese:
- text-decoration-line — quali linee appaiono (
underline,overline,line-through, o più contemporaneamente). - text-decoration-color — il colore della linea (di default corrisponde al colore del testo dell'elemento,
currentColor). - text-decoration-style — lo stile della linea (
solid,double,dotted,dashed,wavy).
Poiché è un'abbreviazione, ogni proprietà estesa omessa viene reimpostata al suo valore iniziale. La linea stessa, text-decoration-line, ha come valore predefinito none — quindi text-decoration: none è il modo canonico per rimuovere il sottolineato da un link.
Nella specifica CSS1 originale, text-decoration non era un'abbreviazione. Era una singola proprietà che accettava solo queste parole chiave:
noneunderlineoverlineline-throughblink(ora deprecata e ignorata dai browser moderni)
L'abbreviazione CSS3 è un superset di quell'elenco, quindi le vecchie dichiarazioni con singola parola chiave come text-decoration: underline continuano a funzionare esattamente come prima.
Quando usarla
- Rimozione dei sottolineati dei link:
a { text-decoration: none; }— poi aggiungi la tua formattazione al passaggio del mouse. - Marcatura delle modifiche:
line-throughper il testo rimosso,underlineper il testo inserito. - Sottolineati personalizzati: combina colore e stili
wavy/dottedper sottolineature in stile correttore ortografico o decorazioni di link con il marchio aziendale.
Suggerimento sull'accessibilità: I sottolineati sono la convenzione visiva che indica che il testo è un link. Se li rimuovi, rendi i link distinguibili in un altro modo (una differenza di colore chiara più un sottolineato al passaggio del mouse/focus), affinché il link sia ancora evidente per ogni lettore.
| Proprietà | Dettaglio |
|---|---|
| Valore iniziale | none currentColor solid (il valore iniziale di ciascuna proprietà estesa) |
| Si applica a | Tutti gli elementi. Si applica anche a ::first-letter e ::first-line. |
| Ereditata | No. |
| Animabile | No. |
| Versione | CSS1, CSS3 |
| Sintassi DOM | object.style.textDecoration = "underline dotted red"; |
Sintassi
text-decoration: <line> <color> <style> | initial | inherit;<line>è una o più parole chiavetext-decoration-line(none,underline,overline,line-through).<color>è qualsiasi valore di colore CSS.<style>è una parola chiavetext-decoration-style(solid,double,dotted,dashed,wavy).
L'ordine delle tre parti non ha importanza e puoi omettere qualsiasi elemento. Più valori di line possono essere combinati — ad esempio underline overline disegna entrambi contemporaneamente:
/* underline, in red, with a wavy style */
text-decoration: underline wavy red;
/* two lines at once; color and style fall back to defaults */
text-decoration: underline overline;Esempio della proprietà text-decoration:
Esempio della proprietà CSS text-decoration con valori overline, line-through, underline e overline
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.a {
text-decoration: overline;
}
.b {
text-decoration: line-through;
}
.c {
text-decoration: underline;
}
.d {
text-decoration: underline overline;
}
</style>
</head>
<body>
<h2>Text-decoration property example</h2>
<p class="a">Lorem Ipsum is simply dummy text...</p>
<p class="b">Lorem Ipsum is simply dummy text...</p>
<p class="c">Lorem Ipsum is simply dummy text...</p>
<p class="d">Lorem Ipsum is simply dummy text...</p>
</body>
</html>Risultato
Esempio della proprietà text-decoration con un colore specificato:
Esempio della proprietà CSS text-decoration con la proprietà text-decoration-color
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
text-decoration: underline;
text-decoration-color: #1c87c9;
}
</style>
</head>
<body>
<h2>Text-decoration property example</h2>
<p>Lorem ipsum is simply dummy text...</p>
</body>
</html>Il prefisso -webkit- è omesso qui poiché i browser moderni supportano pienamente la proprietà standard.
Esempio della proprietà text-decoration con uno stile specificato:
Esempio della proprietà CSS text-decoration con le proprietà text-decoration-line e text-decoration-style
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
text-decoration-line: underline;
}
div.t1 {
text-decoration-style: dotted;
}
div.t2 {
text-decoration-style: wavy;
}
div.t3 {
text-decoration-style: solid;
}
div.t4 {
text-decoration-line: overline underline;
text-decoration-style: double;
}
</style>
</head>
<body>
<h2>Text-decoration property example</h2>
<div class="t1">Lorem ipsum is simply dummy text...</div>
<br />
<div class="t2">Lorem ipsum is simply dummy text...</div>
<br />
<div class="t3">Lorem ipsum is simply dummy text...</div>
<br />
<div class="t4">Lorem ipsum is simply dummy text...</div>
</body>
</html>Valori
| Valore | Descrizione |
|---|---|
| text-decoration-line | Specifica il tipo di decorazione del testo. |
| text-decoration-color | Specifica il colore della decorazione del testo. |
| text-decoration-style | Specifica lo stile della decorazione del testo. |
| initial | Imposta la proprietà al suo valore predefinito. |
| inherit | Eredita la proprietà dall'elemento genitore. |
Proprietà correlate
- text-decoration-line — imposta le linee singolarmente.
- text-decoration-color — imposta il colore della decorazione indipendentemente dal colore del testo.
- text-decoration-style — scegli linee solid, double, dotted, dashed o wavy.