Указание стиля для линии оформления
Свойство text-decoration-style задаёт стиль линии оформления. Оно может принимать одно из следующих значений:
solid— по умолчанию, одинарная линия.double— двойная линия.dotted— точечная линия.dashed— пунктирная линия.wavy— волнистая линия.
Пример
Каждый элемент показывает разный стиль подчёркивания.
Prompt
HTML-страница, показывающая свойство text-decoration-style.
Во внутреннем блоке
<style> подчеркни несколько элементов разными стилями: solid, double, dotted, dashed, wavy и один красный волнистый. Используй h1, h2, h3 и классы абзацев. Добавь элемент для каждого.
Вывод: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
h1 {
text-decoration-line: underline;
text-decoration-style: solid;
}
h2 {
text-decoration-line: underline;
text-decoration-style: double;
}
h3 {
text-decoration-line: underline;
text-decoration-style: dotted;
}
p.ex1 {
text-decoration-line: underline;
text-decoration-style: dashed;
}
p.ex2 {
text-decoration-line: underline;
text-decoration-style: wavy;
}
p.ex3 {
text-decoration-line: underline;
text-decoration-color: red;
text-decoration-style: wavy;
}
</style>
</head>
<body>
<h1>Solid underline</h1>
<h2>Double underline</h2>
<h3>Dotted underline</h3>
<p class="ex1">Dashed underline.</p>
<p class="ex2">Wavy underline.</p>
<p class="ex3">Red wavy underline.</p>
</body>
</html>
Указание толщины для линии оформления
Свойство text-decoration-thickness задаёт толщину линии оформления.
Пример
Каждый элемент показывает разную толщину подчёркивания: auto, 5px, 25% и толстую двойную линию.
Prompt
HTML-страница, показывающая свойство text-decoration-thickness.
Во внутреннем блоке
<style> подчеркни элементы с разной толщиной: auto, 5px, 25% и абзац, сочетающий красное двойное подчёркивание толщиной 5px. Используй h1, h2, h3 и абзац. Добавь элемент для каждого.
Вывод: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
h1 {
text-decoration-line: underline;
text-decoration-thickness: auto;
}
h2 {
text-decoration-line: underline;
text-decoration-thickness: 5px;
}
h3 {
text-decoration-line: underline;
text-decoration-thickness: 25%;
}
p {
text-decoration-line: underline;
text-decoration-color: red;
text-decoration-style: double;
text-decoration-thickness: 5px;
}
</style>
</head>
<body>
<h1>Auto thickness</h1>
<h2>5px thickness</h2>
<h3>25% thickness</h3>
<p>A red double underline that is 5px thick.</p>
</body>
</html>
Сокращённое свойство
Свойство text-decoration является сокращённой записью для: text-decoration-line (обязательно), text-decoration-color (необязательно), text-decoration-style (необязательно) и text-decoration-thickness (необязательно).
Пример
Сокращённая запись задаёт линию, цвет, стиль и толщину в одном объявлении.
Prompt
HTML-страница, показывающая сокращённое свойство text-decoration.
Во внутреннем блоке
<style> используй сокращённую запись на четырёх элементах: underline; underline red; underline red double; и underline red double 5px. Используй h1, h2, h3 и абзац. Добавь элемент для каждого.
Вывод: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
h1 {
text-decoration: underline;
}
h2 {
text-decoration: underline red;
}
h3 {
text-decoration: underline red double;
}
p {
text-decoration: underline red double 5px;
}
</style>
</head>
<body>
<h1>underline</h1>
<h2>underline red</h2>
<h3>underline red double</h3>
<p>underline red double 5px</p>
</body>
</html>
Небольшой совет о ссылках
Все ссылки по умолчанию подчёркнуты. Иногда вы видите ссылки без подчёркивания. Используйте text-decoration: none, чтобы убрать подчёркивание у ссылок.
Пример
Подчёркивание убрано у ссылок.
Prompt
HTML-страница, убирающая стандартное подчёркивание ссылок.
Во внутреннем блоке
<style> задай a { text-decoration: none; }, чтобы ссылки не были подчёркнуты. Добавь пару ссылок.
Вывод: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
a {
text-decoration: none;
}
</style>
</head>
<body>
<p>These links have no underline:</p>
<a href="https://prompt-cookbook.com">PromptCookbook</a>
<a href="https://www.example.com">Example</a>
</body>
</html>