Оформление текста

Часть раздела Стилизация с CSS путешествия по HTML на Coddy. Урок 22 из 76.

В CSS свойство text-decoration используется для добавления или удаления декоративного оформления текста внутри HTML-элемента. Это свойство позволяет подчёркивать текст, добавлять линию над ним или перечёркивать его, выделяя текст визуально или указывая на определённые состояния.

К распространённым значениям text-decoration относятся:

none: Убирает любое текстовое оформление. Это значение по умолчанию.

underline: добавляет подчёркивание к тексту.

overline: Добавляет надчёркивание над текстом.

line-through: Добавляет линию посередине текста (зачёркивание). Обычно используется, чтобы обозначить текст, который был удалён, убран или больше не является действительным.

Например:

a {
    text-decoration: none;
}

.underline {
    text-decoration: underline;
}

.strike {
    text-decoration: line-through;
}

Задание

Легко

Вам дан HTML-документ с абзацем (<p>), содержащим элемент-якорь (<a>), и элементом <div>. Ваша задача — использовать свойство text-decoration, чтобы задать стиль этим элементам. Выполните следующие шаги:

Напишите правило CSS, которое выбирает все элементы <a>. Задайте свойству text-decoration значение none, чтобы убрать подчёркивание по умолчанию.
Добавьте элементу <p> атрибут class со значением "underline".
Напишите правило CSS, которое выбирает все элементы с классом underline. Задайте свойству text-decoration значение underline.
Добавьте элементу <div> атрибут class со значением "strike".
Напишите правило CSS, которое выбирает все элементы с классом strike. Задайте свойству text-decoration значение line-through.

Попробуйте сами

<html>
<head>
    <title>Text Decoration</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <p>This is a paragraph with a <a href="#">link</a>.</p>
    <div>This is a division.</div>
</body>
</html>