Декорирование текста (text-decoration): Тренажер CSS

Тренажер по CSS для пользователей с начальным уровнем подготовки.

В этой серии заданий вы попрактикуетесь в использовании CSS-свойств для декорирования текста. Вы научитесь добавлять и убирать подчеркивания, надчеркивания, зачеркивания, а также изменять их стиль (сплошной, волнистый, пунктирный и т.д.). Задания построены от простого к сложному: сначала вы будете использовать базовые свойства, а затем перейдете к более тонкой настройке и комбинированию различных стилей оформления текста. Вам нужно будет заполнить пропущенные части CSS-кода, чтобы достичь нужного визуального результата.

Список тем

Добавление подчеркивания

Ваша задача — добавить простое подчеркивание к тексту внутри элемента с классом `underline-me`. Используйте свойство, отвечающее за тип линии декорации текста.

CSS

.underline-me {
  /* Добавьте подчеркивание тексту */
  text-decoration-line: input1;
}

                     .underline-me {
  /* Добавьте подчеркивание тексту */
  text-decoration-line: input1;
}

HTML

<p class="underline-me">Этот текст должен быть подчеркнут.</p>

Чтобы добавить подчеркивание, используйте свойство `text-decoration-line` со значением `underline`. Как вариант, можно использовать сокращенное свойство `text-decoration` с тем же значением.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Добавление зачеркивания

Сделайте так, чтобы текст внутри элемента с классом `strike-me` был зачеркнут. Используйте сокращенное свойство для декорирования текста.

CSS

.strike-me {
  /* Добавьте зачеркивание тексту */
  input1: line-through;
}

                     .strike-me {
  /* Добавьте зачеркивание тексту */
  input1: line-through;
}

HTML

<p class="strike-me">Этот текст должен быть зачеркнут.</p>

Для добавления зачеркивания используйте сокращенное свойство `text-decoration` со значением `line-through`. Также можно использовать `text-decoration-line: line-through;`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Удаление подчеркивания у ссылки

По умолчанию ссылки в браузере подчеркнуты. Уберите это подчеркивание для ссылки с классом `no-underline-link`.

CSS

.no-underline-link {
  /* Уберите подчеркивание у этой ссылки */
  text-decoration: input1;
}

                     .no-underline-link {
  /* Уберите подчеркивание у этой ссылки */
  text-decoration: input1;
}

HTML

<a href="#" class="no-underline-link">Эта ссылка не должна быть подчеркнута</a>

Чтобы убрать любое декорирование текста, включая подчеркивание у ссылок, используйте свойство `text-decoration` со значением `none`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Волнистое подчеркивание

Добавьте тексту с классом `wavy-underline` подчеркивание, но сделайте его волнистым. Используйте свойства для типа линии и стиля линии.

CSS

.wavy-underline {
  text-decoration-line: input1;
  input2: wavy;
}

                     .wavy-underline {
  text-decoration-line: input1;
  input2: wavy;
}

HTML

<p class="wavy-underline">Этот текст должен иметь волнистое подчеркивание.</p>

Используйте свойство `text-decoration-line` со значением `underline` для добавления подчеркивания и свойство `text-decoration-style` со значением `wavy` для установки волнистого стиля.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Пунктирное надчеркивание

Добавьте тексту с классом `dotted-overline` надчеркивание (линию над текстом) в виде пунктира.

CSS

.dotted-overline {
  input1: overline;
  text-decoration-style: input2;
}

                     .dotted-overline {
  input1: overline;
  text-decoration-style: input2;
}

HTML

<p class="dotted-overline">У этого текста должно быть пунктирное надчеркивание.</p>

Используйте свойство `text-decoration-line` со значением `overline` для линии над текстом и свойство `text-decoration-style` со значением `dotted` для пунктирного стиля.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Двойное зачеркивание (сокращенная запись)

Используя сокращенное свойство `text-decoration`, примените к тексту с классом `double-strike` двойное зачеркивание.

CSS

.double-strike {
  /* Используйте сокращенное свойство */
  input1: input2 input3;
}

                     .double-strike {
  /* Используйте сокращенное свойство */
  input1: input2 input3;
}

HTML

<p class="double-strike">Этот текст должен быть зачеркнут двойной линией.</p>

Сокращенное свойство `text-decoration` позволяет задать несколько значений одновременно. Чтобы установить двойное зачеркивание, используйте значения `line-through` (тип линии) и `double` (стиль линии) через пробел.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Подчеркивание при наведении

Сделайте так, чтобы текст с классом `underline-on-hover` становился подчеркнутым только при наведении на него курсора мыши.

CSS

.underline-on-hover {
  /* Изначально убираем подчеркивание */
  text-decoration: none;
}

.underline-on-hoverinput1 {
  /* Добавляем подчеркивание при наведении */
  text-decoration: input2;
}

                     .underline-on-hover {
  /* Изначально убираем подчеркивание */
  text-decoration: none;
}

.underline-on-hoverinput1 {
  /* Добавляем подчеркивание при наведении */
  text-decoration: input2;
}

HTML

<p class="underline-on-hover">Подчеркни меня при наведении!</p>

Для применения стилей при наведении используется псевдокласс `:hover`. Добавьте правило для `.underline-on-hover:hover` и установите в нем `text-decoration: underline;`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Комбинирование свойств: штриховое подчеркивание

Задайте тексту с классом `dashed-underline` подчеркивание в виде штрихов (dashed). Используйте отдельные свойства для типа и стиля линии.

CSS

.dashed-underline {
  input1: underline;
  input2: dashed;
}

                     .dashed-underline {
  input1: underline;
  input2: dashed;
}

HTML

<p class="dashed-underline">Этот текст должен иметь штриховое подчеркивание.</p>

Используйте свойство `text-decoration-line` со значением `underline` и свойство `text-decoration-style` со значением `dashed`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку