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

Часть раздела Styling with 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, чтобы убрать подчеркивание по умолчанию.
Добавьте атрибут class со значением "underline" к элементу <p>.
Напишите CSS-правило, которое выбирает все элементы с классом underline. Установите text-decoration в значение underline.
Добавьте атрибут class со значением "strike" к элементу <div>.
Напишите CSS-правило, которое выбирает все элементы с классом strike. Установите text-decoration в значение line-through.

Шпаргалка

Свойство text-decoration добавляет или удаляет оформление текста внутри HTML-элементов.

Общие значения:

none: Удаляет любое оформление текста (по умолчанию)
underline: Добавляет подчеркивание к тексту
overline: Добавляет линию над текстом
line-through: Добавляет зачеркивание

a {
    text-decoration: none;
}

.underline {
    text-decoration: underline;
}

.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>