Энциклопедия CSS: text-decoration

CSS - text-decoration
CSS text-decoration
Селектор:	p; h1; a; span
Свойство:	text-decoration
Значения:	none; underline; overline; line-through; blink; inherit; initial; unset
Портал Веб-разработчиков • • Портал CSS

Свойство text-decoration в CSS используется для задания декоративных эффектов для текста, таких как подчеркивание, перечеркивание и другие линии. Оно часто применяется к текстовым элементам, таким как a, p, h1 и span, чтобы добавить визуальные акценты или изменить стандартное поведение текста.

Использование CSS для управления текстовым декором можно обсудить на странице обсуждения.

Основные значения text-decoration

Свойство text-decoration поддерживает следующие значения:

• none — убирает любое текстовое оформление (например, убирает подчеркивание у ссылок).
• underline — добавляет подчеркивание к тексту.
• overline — добавляет линию над текстом.
• line-through — добавляет перечеркивание текста.
• blink — заставляет текст мигать (устаревшее и почти нигде не поддерживается).
• inherit — наследует значение от родительского элемента.
• initial — устанавливает значение по умолчанию.
• unset — убирает установленное значение, возвращая его к значению по умолчанию или наследуемому.

Примеры использования

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

HTML-код:

<p class="underlined-text">Этот текст подчеркнут.</p>

CSS-код:

.underlined-text {
    text-decoration: underline;
    font-size: 18px;
    color: blue;
}

Результат:

Этот текст подчеркнут.

Пример с перечеркиванием текста

HTML-код:

<p class="strikethrough-text">Этот текст перечеркнут.</p>

CSS-код:

.strikethrough-text {
    text-decoration: line-through;
    color: red;
    font-style: italic;
}

Результат:

Этот текст перечеркнут.

Пример с линией над текстом

HTML-код:

<h1 class="overlined-text">Линия над заголовком</h1>

CSS-код:

.overlined-text {
    text-decoration: overline;
    font-size: 24px;
    font-weight: bold;
}

Результат:

Линия над заголовком

Советы по использованию text-decoration

• Используйте none, чтобы убрать стандартное подчеркивание у ссылок и добавить свое оформление.
• line-through отлично подходит для обозначения скидок или удаления текста, сохраняя его видимым.
• С осторожностью используйте устаревшее значение blink, так как оно не поддерживается в современных браузерах.

Совместимость

Свойство text-decoration поддерживается всеми современными браузерами. Однако значение blink практически нигде не работает и считается устаревшим.

Дополнительные материалы

Обсудить вопросы, связанные с использованием text-decoration, можно на странице обсуждения.