text-decoration
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 6.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Краткая информация
| Значение по умолчанию | none |
|---|---|
| Наследуется | Нет |
| Применяется | Ко всем элементам |
| Ссылка на спецификацию | http://www.w3.org/TR/CSS21/text.html#propdef-text-decoration |
Версии CSS
Описание
Добавляет оформление текста в виде его подчеркивания, перечеркивания, линии над текстом и мигания. Одновременно можно применить более одного стиля, перечисляя значения через пробел.
Синтаксис
text-decoration: [ blink || line-through || overline || underline ] | none | inherit
Значения
HTML5 CSS2.1 IE Cr Op Sa Fx
Объектная модель
[window.]document.getElementById(» elementID «).style.textDecoration
[window.]document.getElementById(» elementID «).style.textDecorationBlink
[window.]document.getElementById(» elementID «).style.textDecorationLineThrough
[window.]document.getElementById(» elementID «).style.textDecorationNone
[window.]document.getElementById(» elementID «).style.textDecorationOverLine
[window.]document.getElementById( «elementID «).style.textDecorationUnderline
Браузеры
text-decoration
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 6.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Краткая информация
| Значение по умолчанию | none |
|---|---|
| Наследуется | Нет |
| Применяется | Ко всем элементам |
| Ссылка на спецификацию | http://www.w3.org/TR/CSS21/text.html#propdef-text-decoration |
Версии CSS
Описание
Добавляет оформление текста в виде его подчеркивания, перечеркивания, линии над текстом и мигания. Одновременно можно применить более одного стиля, перечисляя значения через пробел.
Синтаксис
text-decoration: [ blink || line-through || overline || underline ] | none | inherit
Значения
HTML5 CSS2.1 IE Cr Op Sa Fx
Объектная модель
[window.]document.getElementById(» elementID «).style.textDecoration
[window.]document.getElementById(» elementID «).style.textDecorationBlink
[window.]document.getElementById(» elementID «).style.textDecorationLineThrough
[window.]document.getElementById(» elementID «).style.textDecorationNone
[window.]document.getElementById(» elementID «).style.textDecorationOverLine
[window.]document.getElementById( «elementID «).style.textDecorationUnderline
Браузеры
text-decoration
Время чтения: меньше 5 мин
Обновлено 10 ноября 2021
Кратко
Свойство text-decoration позволяет добавить декоративные линии тексту. Текст можно подчеркнуть, перечеркнуть или добавить линию над текстом.
text-decoration: underline часто встречается при работе со ссылками.
Пример
Как это понять
По факту свойство text-decoration является шорткатом и позволяет указать значения для свойств:
Но, как правило, его используют только для указания положения линии.
Как пишется
Положение линии
Пишем свойство text-decoration и после двоеточия указываем одно из доступных значений:
Выше указаны стандартные значения, с которыми вы будете сталкиваться чаще всего.
Стиль линии
Не многие знают, что после ключевого слова, означающего положение линии, можно указать ещё и стиль этой линии и её цвет.
Для управления стилем линии используются следующие ключевые слова:
Управлять стилем подчёркивания обычно не требуется, но об этой возможности знать нужно.
Как будет выглядеть двойное перечёркивание:
Цвет линии
Мы можем изменить это значение, указав после ключевых слов типа и стиля линии код цвета в любом доступном в вебе формате.
Например, сделаем двойное подчёркивание красного цвета:
Цветом линии можно управлять отдельно при помощи свойства text-decoration-color :
Подсказки
💡 Свойство не наследуется.
💡 Свойство text-decoration целиком нельзя анимировать при помощи свойства transition 😒
Но можно анимировать цвет линии!
Пусть по умолчанию цвет линий будет совпадать с цветом текста, а по наведению курсора цвет будет меняться на другой за 0.3 секунды.
На практике
Егор Левченко
Алёна Батицкая
2.18. CSS3-оформление текста
Модуль содержит возможности CSS, относящиеся к оформлению текста, такие как подчеркивание, тени текста, а также акценты в тексте восточно-азиатских языков.
Свойства для оформления текста
1. Оформление линии: подчеркивание, обводка и зачеркивание
Подчеркивание, обводка и перечеркивающие линии отображаются только для незамещаемых блоков уровня строки ( display: inline ) и отображаются по всему тексту, включая пробелы между символами и словами, за исключением отступов в начале и конце строки.
Браузеры могут прерывать подчеркивание и обводку в том месте, где линия пересекает глиф, отображаясь на некотором расстоянии по обе стороны от контура глифа. Когда браузер прерывает подчеркивание или обводку на границах глифа, форма линии на этой границе должна соответствовать форме глифа. Однако, спецификация не предписывает конкретный метод для «следования форме» глифа, оставляя это на усмотрение браузеру.
Рис. 1. Прерывание линии подчеркивания
1.1. Вид линии оформления: свойство text-decoration-line
Поддержка браузерами
Свойство text-decoration-line определяет, какой тип линии, если таковые имеются, добавляется к элементу.
Свойство не наследуется.
| text-decoration-line | |
|---|---|
| Значения: | |
| none | Ни оформляет, ни запрещает оформление текста. Значение по умолчанию. |
| underline | Подчёркивает каждую строку текста. |
| overline | Каждая строка текста имеет линию над ней (то есть на противоположной стороне от подчеркивания). |
| line-through | Добавляет линию через середину каждой строки текста. |
| inherit | Наследует значение свойства от родительского элемента. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
1.2. Стиль линии оформления: свойство text-decoration-style
Поддержка браузерами
Свойство не наследуется.
| text-decoration-style | |
|---|---|
| Значения: | |
| solid | Добавляет отрезок простой линии. Значение по умолчанию. |
| double | Две параллельные сплошные линии с небольшим промежутком между ними. |
| dotted | Последовательность круглых точек. |
| dashed | Последовательность прямоугольных штрихов. |
| wavy | Указывает на волнистую линию. |
| inherit | Наследует значение свойства от родительского элемента. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
1.3. Цвет линии оформления: свойство text-decoration-color
Поддержка браузерами
Свойство не наследуется.
1.4. Краткая запись свойств линии оформления: свойство text-decoration
Поддержка браузерами
1.5. Расположение линии оформления: свойство text-underline-position
Поддержка браузерами
Свойство text-underline-position устанавливает положение линии подчеркивания, указанного в элементе.
2. Тень текста: свойство text-shadow
Поддержка браузерами
Свойство text-shadow используется для добавления тени к тексту. Тень текста — интересный инструмент, который позволяет создавать удивительные эффекты. Тени могут быть однослойными или многослойными, размытыми, цветными или полупрозрачными. Задавая тень для элемента, можно указывать только одно значение длины и цвет, таким образом создавая цветную копию отдельного символа или слова. Также, с помощью тени можно сделать текст более читаемым, если контраст между цветом текста и фоном невелик.
Каждая тень применяется как к самому тексту, так и к элементам его оформления (свойство text-decoration ). Одновременно можно задавать несколько теней, указывая их через запятую. Тени накладываются друг на друга, но не перекрывают сам текст. Первая тень всегда расположена сверху над остальными тенями. Свойство наследуется.
Свойство не наследуется.
Изучаем подчеркивание текста CSS
Подходы
Способы, с помощью которых можно подчеркнуть текст в интернете:
Давайте рассмотрим их один за другим и поговорим об их плюсах и минусах.
text-decoration
text-decoration CSS — это самый простой способ подчеркивания в CSS. Применяется всего одно свойство и на этом все. Для небольших размеров шрифта это может выглядеть довольно прилично, но увеличьте размер и та же линия начинает выглядеть неуклюже.
Самая большая проблема применения text-decoration — отсутствие настраиваемости. Свойство соответствует любому размеру шрифта или цвету текста, к которому оно применено, и не существует кроссбраузерного способа изменить заданный стиль.
border-bottom
Результат применения border-bottom к строчным элементам:
box-shadow
Это свойство формирует подчеркивание с помощью двух теней: одна создает прямоугольник, вторая — скрывает большую его часть, кроме нижней. Данный метод применим только для однотонного фона.
background-image
background-image дает результат, подходящий под все перечисленные критерии. При этом используются linear-gradient и background-position, чтобы создать изображение, которое повторяется по горизонтали вдоль строк текста. При этом для текста должно быть задано display: inline;.
Вместо linear-gradient можно добавить собственное изображение с какими-нибудь эффектами.
Фильтры SVG
Вот как это выглядит в Chrome и Firefox :
Underline.js (canvas)
Это только техническая демо-версия, поэтому для использования библиотеки придется осуществить глобальные изменения в разрабатываемом проекте.
Мы приводим данный метод для демонстрации возможностей при создании красивых, интерактивных подчеркиваний.
Свойства text-decoration-*
Это свойство прекрасно работает само по себе, но можно добавить несколько экспериментальных свойств для настройки внешнего вида:
Только не радуйтесь раньше времени. Помните о проблеме поддержки браузерами.