Оформление текста CSS
Свойство text-decoration управляет декоративными линиями на тексте.
Это сокращённая запись для этих свойств: text-decoration-line, text-decoration-color, text-decoration-style и text-decoration-thickness.
Добавление линии оформления к тексту
Свойство text-decoration-line задаёт тип линии, добавляемой к тексту. Оно может принимать одно или несколько из следующих значений:
none— по умолчанию, без линии.underline— линия под текстом.overline— линия над текстом.line-through— линия через текст.
Совет: вы можете комбинировать значения, например overline underline, чтобы показать линии и сверху, и снизу от текста.
Примечание: лучше не подчёркивать текст, который не является ссылкой, так как это может запутать читателя.
Пример
Каждый элемент показывает разную линию оформления, а абзац сочетает две.
<style> задай <h1> линию сверху, <h2> — зачёркивание, <h3> — подчёркивание, а <p> — одновременно линию сверху и подчёркивание. Добавь заголовок каждого уровня и абзац.
Вывод: полная HTML-страница
<!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>
Указание цвета для линии оформления
Свойство text-decoration-color задаёт цвет линии оформления.
Пример
Линиям оформления заданы разные цвета с помощью text-decoration-color.
<style> задай <h1> красную линию сверху, <h2> — синее зачёркивание, <h3> — зелёное подчёркивание, а <p> — фиолетовую линию сверху и подчёркивание, используя вместе text-decoration-line и text-decoration-color. Добавь заголовок каждого уровня и абзац.
Вывод: полная HTML-страница
<!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>