Свойство CSS text-decoration

Свойство CSS text-decoration отвечает за оформление текста в плане подчеркиваний. Можно сделать нижнее, верхнее подчеркивание. Также можно зачеркнуть текст или применить все подчеркивания сразу.

Синтаксис CSS text-decoration

...
text-decoration: none|underline|overline|line-through|inherit;
...

Где:

  • none – текст без оформления
  • underline – нижнее подчеркивание
  • overline – верхнее подчеркивание
  • line-through – зачеркивание текста
  • blink – мерцающий текст (рекомендуется не применять это значение)

Можно указать несколько значений. Например

text-decoration: underline overline;

Как изменить стиль и цвет подчеркивания

Для изменения стиля подчеркивания есть специальное свойство text-decoration-style:

text-decoration-style: solid|double|dotted|dashed|wavy;

Где:

  • solid – сплошное подчеркивание
  • double – двойная линия
  • dotted – пунктирная линия
  • dashed – штриховая линия
  • wavy – волнистая линия

Для изменения цвета подчеркивания служит свойство text-decoration-color:

text-decoration-style: color;

color может принимать значения в виде RGB, названия цвета (см. коды и названия html цветов для сайта)

Примечание

К сожалению, свойство text-decoration-style и text-decoration-color не поддерживается почти всеми браузерами (идет уже 2016 год).

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

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

<html>
<head>
<style>
.primer1{
text-decoration: underline;
}
.primer2{
text-decoration: overline;
}
.primer1_2{
text-decoration: underline,overline;
}
</style>
</head>
<body>
Обычный текст.
<font class="primer1">Нижнее подчеркивание</font>
<font class="primer2">Верхнее подчеркивание</font>
<font class="primer1_2">Верхнее и нижнее подчеркивание</font>
</body>
</html>

Вот как это выглядит на странице:


Обычный текст.

Нижнее подчеркивание

Верхнее подчеркивание

Верхнее и нижнее подчеркивание





Пример 2. Зачеркнутый текст

<html>
<head>
<style>
.primer3{
text-decoration: line-through;;
}
</style>
</head>
<body>
Обычный текст. <font class="primer3">Зачеркнутый текст</font>
</body>
</html>

Вот как это выглядит на странице:


Обычный текст. Зачеркнутый текст

Пример 3. Меняем цвет и тип подчеркивания

<html>
<head>
<style>
.primer4{
text-decoration: underline;
text-decoration-style: dotted;
text-decoration-color: red;
}
</style>
</head>
<body>
Обычный текст. <font class="primer3">Красное подчеркивание с пунктирной линией</font>
</body>
</html>

Вот как это выглядит на странице:


Обычный текст.

Красное подчеркивание с пунктирной линией

Примечание

Если вы не видите каких-то изменений в последнем примере, то можно попробовать использовать проверенный способ с помощью свойства border-bottom:

border-bottom: 1px datted red;

Для обращения к text-decoration из JavaScript нужно писать следующую конструкцию:

object.style.textDecoration="VALUE"




Читайте также:

• Свойство CSS font

• Свойство css display

• Свойство css transform

• Подчеркнутый текст html

• Свойство css transform-origin

• Все про CSS border

• Все про CSS background

• Все про CSS transition

• Свойство css text-indent


← Перейти в каталог CSS уроков

Читайте также:

Copy Protected by Chetan's WP-Copyprotect.