Урок 12 із 104
12%
← Назад

Оформлення тексту в CSS

Вивчаємо властивості text-decoration-line, text-decoration-style та text-decoration-color для оформлення тексту.

Оформлення тексту в CSS

Властивості сімейства text-decoration дозволяють додавати підкреслення, перекреслення, надкреслення, а також змінювати стиль і колір декоративної лінії.

Основні властивості

  • text-decoration-line — визначає тип декоративної лінії.
  • text-decoration-style — задає стиль лінії.
  • text-decoration-color — задає колір лінії.

text-decoration-line

За допомогою цієї властивості можна додати різні типи декоративних ліній.


p {
  text-decoration-line: underline;
}

Можливі значення:

  • none — без оформлення.
  • underline — підкреслення.
  • overline — лінія над текстом.
  • line-through — перекреслення.
  • underline overline — кілька ліній одночасно.

text-decoration-style

Дозволяє змінити стиль декоративної лінії.


p {
  text-decoration-line: underline;
  text-decoration-style: wavy;
}

Основні значення:

  • solid — суцільна лінія.
  • double — подвійна.
  • dotted — крапки.
  • dashed — штрихова.
  • wavy — хвиляста.

text-decoration-color

Дозволяє встановити власний колір декоративної лінії незалежно від кольору тексту.


p {
  color: black;

  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: red;
}

Приклад використання всіх властивостей


<p class="example">
  CSS Text Decoration
</p>

.example {
  font-size: 28px;

  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: crimson;
}
❗ Важливо:

Якщо потрібно лише прибрати стандартне підкреслення посилання, достатньо використати text-decoration-line: none або короткий запис text-decoration: none.

Практичне завдання

📌 Завдання:
  1. №1. Створіть абзац із підкресленням.
  2. №2. Зробіть підкреслення хвилястим.
  3. №3. Задайте підкресленню червоний колір.
💡 Показати підказку

Спочатку задайте text-decoration-line, потім змініть стиль через text-decoration-style і лише після цього встановіть колір за допомогою text-decoration-color.

✅ Показати відповідь

<!-- HTML -->

<p class="text">
  CSS Text Decoration
</p>

<!-- CSS -->

.text {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: red;
}