Свойство CSS text-decoration отвечает за оформление текста в плане подчеркиваний. Можно сделать нижнее, верхнее подчеркивание. Также можно зачеркнуть текст или применить все подчеркивания сразу.
Синтаксис CSS text-decoration
- none — текст без оформления
- underline — нижнее подчеркивание
- overline — верхнее подчеркивание
- line-through — зачеркивание текста
- blink — мерцающий текст (рекомендуется не применять это значение)
Можно указать несколько значений. Например
Как изменить стиль и цвет подчеркивания
Для изменения стиля подчеркивания есть специальное свойство text-decoration-style :
- solid — сплошное подчеркивание
- double — двойная линия
- dotted — пунктирная линия
- dashed — штриховая линия
- wavy — волнистая линия
Для изменения цвета подчеркивания служит свойство text-decoration-color :
color может принимать значения в виде RGB, названия цвета (см. коды и названия html цветов для сайта)
К сожалению, свойство text-decoration-style и text-decoration-color не поддерживается почти всеми браузерами (идет уже 2016 год).
Определение и применение
CSS свойство text-decoration добавляет декорирование текста (подчеркивание, перечеркивание, линия над текстом).
Кроме того в CSS3 свойство text-decoration является короткой записью(сокращенным свойством) для следующих свойств, добавленных в CSS3:
Обращаю Ваше внимание, что в настоящее время вышеуказанные свойства (добавленные в CSS3) имеют очень ограниченную поддержку и не рекомендованы к использованию.
| 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
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|
Описание
Добавляет оформление текста в виде его подчеркивания, перечеркивания, линии над текстом и мигания. Одновременно можно применить более одного стиля, перечисляя значения через пробел.
Синтаксис
text-decoration: [ blink || line-through || overline || underline ] | none | inherit
Значения
HTML5 CSS2.1 IE Cr Op Sa Fx
Объектная модель
[window.]document.getElementBy >elementID ").style.textDecoration
[window.]document.getElementBy >elementID ").style.textDecorationBlink
[window.]document.getElementBy >elementID ").style.textDecorationLineThrough
[window.]document.getElementBy >elementID ").style.textDecorationNone
[window.]document.getElementBy >elementID ").style.textDecorationOverLine
[window.]document.getElementBy >"elementID ").style.textDecorationUnderline
Браузеры
Internet Explorer до версии 7.0 включительно не поддерживает значение inherit . Линия полученная с помощью значения line-through в IE7 располагается выше, чем в других браузерах; в IE8 эта ошибка исправлена.