Decorarea textului CSS
Proprietatea text-decoration controlează liniile decorative de pe text.
Este o prescurtare pentru aceste proprietăți: text-decoration-line, text-decoration-color, text-decoration-style și text-decoration-thickness.
Adaugă o linie de decorare la text
Proprietatea text-decoration-line setează tipul de linie adăugat la text. Poate avea una sau mai multe dintre aceste valori:
none— implicit, fără linie.underline— o linie sub text.overline— o linie deasupra textului.line-through— o linie prin mijlocul textului.
Sfat: Poți combina valori, precum overline underline, pentru a afișa linii atât deasupra, cât și dedesubtul textului.
Notă: Este mai bine să nu subliniezi text care nu este un link, deoarece poate deruta cititorul.
Exemplu
Fiecare element arată o linie de decorare diferită, iar paragraful combină două.
<style>, dă lui <h1> o linie deasupra, lui <h2> o linie prin mijloc, lui <h3> o subliniere, iar lui <p> atât linie deasupra, cât și subliniere. Adaugă un titlu de fiecare nivel și un paragraf.
Output: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
h1 {
text-decoration-line: overline;
}
h2 {
text-decoration-line: line-through;
}
h3 {
text-decoration-line: underline;
}
p {
text-decoration-line: overline underline;
}
</style>
</head>
<body>
<h1>Overline heading</h1>
<h2>Line-through heading</h2>
<h3>Underline heading</h3>
<p>This paragraph has a line over and under it.</p>
</body>
</html>
Specifică o culoare pentru linia de decorare
Proprietatea text-decoration-color setează culoarea liniei de decorare.
Exemplu
Liniile de decorare primesc culori diferite cu text-decoration-color.
<style>, dă lui <h1> o linie roșie deasupra, lui <h2> o linie albastră prin mijloc, lui <h3> o subliniere verde, iar lui <p> o linie mov deasupra și o subliniere, folosind împreună text-decoration-line și text-decoration-color. Adaugă un titlu de fiecare nivel și un paragraf.
Output: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
h1 {
text-decoration-line: overline;
text-decoration-color: red;
}
h2 {
text-decoration-line: line-through;
text-decoration-color: blue;
}
h3 {
text-decoration-line: underline;
text-decoration-color: green;
}
p {
text-decoration-line: overline underline;
text-decoration-color: purple;
}
</style>
</head>
<body>
<h1>Red overline heading</h1>
<h2>Blue line-through heading</h2>
<h3>Green underline heading</h3>
<p>This paragraph has purple lines over and under it.</p>
</body>
</html>