Menu
Coddy logo textTech

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

Часть раздела 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;
}
challenge icon

Задание

Легко

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

  1. Напишите правило CSS, нацеленное на все элементы <a>. Установите для text-decoration значение none, чтобы удалить подчёркивание по умолчанию.
  2. Добавьте атрибут class со значением "underline" элементу <p>.
  3. Напишите правило CSS, нацеленное на все элементы с классом underline. Установите для text-decoration значение underline.
  4. Добавьте атрибут class со значением "strike" элементу <div>.
  5. Напишите правило 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>
quiz iconПроверьте себя

В этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.

Все уроки раздела Styling with CSS

Потренируйтесь самостоятельно: Песочница Web