Css text decoration underline: text-decoration | CSS | WebReference

text-decoration — подчёркнутый и зачёркнутый текст

Поддержка браузерами

Описание

CSS свойство text-decoration позволяет добавить к тексту такие элементы декора как подчёркивание, надчёркивание и перечёркивание (то есть сделать зачёркнутый текст).

Свойство text-decoration может принимать одно значение или больше. Чтобы задать сразу несколько значений, их следует разделить пробелами.

Самый часто используемый декор для текста — это подчёркивание. Подчёркнутый текст задаётся значением underline:

/*делаем подчёркнутый текст*/
span {text-decoration: underline;}

Если вам, наоборот, нужно убрать подчёркивание, например убрать подчеркивание ссылки, заданное по умолчанию, то нужно воспользоваться значением none:

/*убираем подчёркивание ссылок*/
a {text-decoration: none;}

Часто требуется не просто убрать подчёркивание ссылки в обычном состоянии, а сделать так, чтобы ссылки были подчёркнуты при наведении на них курсора мыши. Чтобы сделать подчёркивание ссылки при наведении, надо воспользоваться псевдо-классом :hover:

/*убираем подчёркивание ссылок*/
a {text-decoration: none;}

/*задаём подчёркивание ссылок при наведении*/
a:hover {text-decoration: underline;}

К сожалению цвет линий подчёркивания, надчёркивания и перечёркивания, установленных свойством text-decoration, будет совпадать с цветом текста, для которого эти линии используются. Чтобы иметь возможность изменять цвет, толщину и стиль подчёркивания или надчёркивания надо воспользоваться CSS свойствами border-top (создаёт линии над элементом) и border-bottom (создаёт линию под элементом).

Примечание: чтобы добавить к тексту подчёркивание или перечёркивание не обязательно использовать CSS, этих же эффектов можно добиться с помощью HTML тегов: <u> (подчёркнутый текст) и <del> (зачёркнутый текст).

Синтаксис

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

Значения свойства

Пример

div {
text-decoration: none;
}

Подчёркнутый текст (свойство text-decoration) | CSS примеры

Отменить подчёркивание у ссылки

<style>
.raz {
  text-decoration: none;
  border: none; 
}
</style>

<a href="http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html#stil">Стиль ссылки CSS</a>

Часто применяется при создании ссылок в виде кнопок или в виде пунктов меню, поскольку текстовые ссылки в браузерах подчёркиваются по умолчанию (выделение только цветом создаёт неудобство дальтоникам).

Ссылка подчёркивается при наведении

<style>
.raz:not(:hover) {
  text-decoration: none;
}
</style>

<a href="http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html#stil">Стиль ссылки CSS</a>

Пунктирное подчёркивание

<style>
.raz {
  text-decoration: underline; 
  text-decoration-style: dashed; 
  cursor: pointer; 
}
</style>

<span>Стиль текста CSS</span>

Сделать линию над и под текстом

<style>
.raz {
  text-decoration-line: underline overline;
}
</style>

<span>Стиль текста CSS</span>

text-decoration-color

currentcolor

цвет черты что у текста

transparent

черта полностью прозрачная (невидимая)

red

цвет черты ключевым словом

#ff0000 или #ff0000ff

цвет черты в формате HEX

rgb(255,0,0) или rgba(255,0,0,1)

цвет черты в формате RGB или RGBA

hsl(0,100%,50%) или hsla(0,100%,50%,1)

цвет черты в формате HSL() или HSLA()

initial

currentcolor

inherit

наследует значение родителя

unset

currentcolor

Свойство text-decoration-color не наследуется, применяется ко всем элементам

<style>
div {
  text-decoration: underline;
  text-decoration-color: currentcolor;
}
</style>

<div>Свойство <code>text-decoration-color</code> не наследуется, применяется ко всем элементам</div>

ВНИМАНИЕ! Нижестоящие свойства имеют плохую поддержку браузерами. Свойства text-underline-offset

Пропуск выносных частей символов в подчеркиваемом тексте в Google Chrome

<style>
.raz {
  text-decoration: underline;
  text-decoration-skip: ink;
}
</style>

<span>Пример подчёркнутого текста</span>

Подчёркивание без пропусков выносных частей символов в Safari

<style>
.raz {
  text-decoration: underline;
  -webkit-text-decoration-skip: none;
}
</style>

<span>Пример подчёркнутого текста</span>

Разница text-decoration и border

<table>
  <tr>
    <tdvydelit"> text-decoration: underline;">Нижнее подчёркивание, сделанное <code>text-decoration: underline;</code>
    <td><spanvydelit">border-bottom: 1px solid;">Нижнее подчёркивание, сделанное <code>border-bottom: 1px solid;</code></span>
</table>

Свойство text-decoration подходит лучше для подчёркивания многострочного текста (при уменьшении экрана длинное слово также переходит на следующую строку при отзывчивой вёрстке). Свойство border активно использовали, когда не поддерживались свойства text-decoration-line, text-decoration-style и text-decoration-color.

text-decoration-line | htmlbook.ru

Краткая информация

Версии CSS

Описание

Определяет, как должна добавляться декоративная линия к тексту — подчеркивание, перечеркивание, над текстом. Одновременно можно добавлять несколько линий, перечисляя значения через пробел.

Синтаксис

text-decoration-line: [ line-through || overline || underline ] | none

Значения

line-through

Создает перечеркнутый текст (пример).

overline

Линия проходит над текстом (пример).

underline

Устанавливает подчеркнутый текст (пример).

none

Отменяет все эффекты, в том числе и подчеркивания у ссылок, которое задано по умолчанию.

Пример

HTML5CSS3IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>text-decoration-line</title>
  <style>
   a {
    -moz-text-decoration-line: underline;
    -moz-text-decoration-style: wavy;
    -moz-text-decoration-color: red;
   }
  </style>
 </head>
 <body>
  <a href="link1.html">Ссылка с подчёркиванием</a>
 </body>
</html>

Браузеры

Firefox поддерживает свойство -moz-text-decoration-line.

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

text-decoration-style | CSS | WebReference

Устанавливает стиль декоративной линии, которая добавляется к тексту через свойство text-decoration или text-decoration-line.

Краткая информация

Синтаксис

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

Обозначения

Значения

solid

Одинарная линия.

double

Двойная линия.

dotted

Точечная линия.

dashed

Пунктирная линия.

wavy

Волнистая линия.

Песочница

Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.

Пример

<!DOCTYPE HTML> <html> <head> <meta charset=»utf-8″> <title>text-decoration-style</title> <style> a { text-decoration: underline; text-decoration-style: wavy; text-decoration-color: red; } </style> </head> <body> <a href=»page/1.html»>Ссылка с подчёркиванием</a> </body> </html>

Объектная модель

Объект.style.textDecorationStyle

Примечание

Firefox до версии 36 поддерживает свойство -moz-text-decoration-style.

Safari поддерживает свойство -webkit-text-decoration-style.

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

• Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
• Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
• Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
• Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
• Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
• Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

В таблице браузеров применяются следующие обозначения.

•  — свойство полностью поддерживается браузером со всеми допустимыми значениями;
•  — свойство браузером не воспринимается и игнорируется;
•  — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.

Число указывает версию браузера, начиная с которой свойство поддерживается.

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 24.04.2020

Редакторы: Влад Мержевич

text-украшение — веб-технология для разработчиков

CSS-свойство text-художественное оформление задает внешний вид декоративных линий в тексте. Это сокращение для текста-декорации-строки , текста-декорации-цвета , текста-декорации-стиля и более нового свойства текста-декорации-толщины .

Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте https: // github.com / mdn / interactive-examples и отправьте нам запрос на получение.

Украшения текста прорисовываются через элементы текста потомка. Это означает, что если элемент задает текстовое оформление, то дочерний элемент не может удалить оформление. Например, в разметке

Этот текст содержит выделенные слова . , правило стиля p {text-ornament: underline; } приведет к подчеркиванию всего абзаца. Правило стиля em {text-украшение: нет; } не вызовет никаких изменений; весь абзац все еще будет подчеркнут.Тем не менее, правило em {text-ornament: overline; } заставит второе украшение появиться на «некоторых выделенных словах».

Синтаксис

Свойство text-decor указывается как одно или несколько разделенных пробелами значений, представляющих различные свойства декорирования текста.

Значения

текстовая декоративная линия

Устанавливает тип используемого украшения, например, , подчеркивание или , сквозное .

текст-украшение-цвет

Устанавливает цвет украшения.

текст-стиль украшения

Устанавливает стиль линии, используемой для оформления, например сплошная , волнистая или пунктирная .

текстовое оформление-толщина

Устанавливает толщину линии, используемой для оформления.

Формальный синтаксис

 <'text-украшение-линия'> || <'text-украшение-стиль'> || <'text-украшение-цвет'> || <'text-украшение-толщина'> 

Примеры

под {
текстовое оформление: подчеркнуто красным;
}

.над {
текстовое оформление: волнистая оверлейная липа;
}

.линия {
текстовое оформление: сквозное;
}

.plain {
текстовое оформление: нет;
}

.под более {
оформление текста: пунктирная линия подчеркивания;
}

.thick {
  текстовое оформление: сплошное подчеркивание фиолетового цвета 4px;
}

.blink {
  текстовое оформление: мигание;
}
 

 
 Этот текст имеет строку под ним. 
 Этот текст имеет линию над ним. 
 В этом тексте есть строка, проходящая через него.
 Эта  ссылка не будет подчеркнута ,
    так как ссылки вообще есть по умолчанию. Будьте осторожны при удалении
    оформление текста на якорях, так как пользователи часто зависят от
    подчеркивание для обозначения гиперссылок. 
 Этот текст содержит строки над  и  под ним. 
 Этот текст имеет очень густое фиолетовое подчеркивание в поддерживающих браузерах. 
 Этот текст может мигать для вас,
    в зависимости от браузера, который вы используете.
 

Технические характеристики

Совместимость браузера

Обновление данных о совместимости GitHub

	Настольный ПК						Мобильный
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android WebView	Chrome для Android	Firefox для Android	Opera для Android	Safari на iOS	Интернет Samsung
текстовое оформление	Chrome Полная поддержка 1	Edge Полная поддержка 12	Firefox Полная поддержка 1	IE Полная поддержка 3	Opera Полная поддержка 3.5	Safari Полная поддержка 1	WebView Android Полная поддержка ≤37	Chrome Android Полная поддержка 18	Firefox Android Полная поддержка 4	Opera Android Полная поддержка 10.1	Safari iOS Полная поддержка 1	Samsung Интернет Android Полная поддержка 1,0
мигает	Chrome Нет поддержки №	Край Нет поддержки №	Firefox Нет поддержки 1 — 23	IE Нет поддержки №	Opera Нет поддержки 4 — 15	Safari Нет поддержки №	WebView Android Нет поддержки №	Chrome Android Нет поддержки №	Firefox Android Нет поддержки 4 — 23	Opera Android Нет поддержки 10.1 — 14	Safari iOS Нет поддержки №	Samsung Интернет Android Нет поддержки №
Сокращения	Хром Полная поддержка 57	Край Полная поддержка 79	Firefox Полная поддержка 36 Полная поддержка 36 Частичная поддержка 6	IE Нет поддержки №	Opera Полная поддержка 44	Safari Полная поддержка 8 Полная поддержка 8 с префиксом Реализуется с префиксом поставщика: -webkit-	WebView Android Полная поддержка 57	Chrome Android Полная поддержка 57	Firefox Android Полная поддержка 36 Полная поддержка 36 Частичная поддержка 6	Opera Android Полная поддержка 43	Safari iOS Полная поддержка 8 Полная поддержка 8 с префиксом Реализовано с префиксом поставщика: -webkit-	Samsung Интернет Android Полная поддержка 7.0
текстовое оформление-толщина включено в стенографию	Chrome Нет поддержки №	Край Нет поддержки №	Firefox Полная поддержка 70	IE Нет поддержки №	Opera Нет поддержки №	Safari Нет поддержки №	WebView Android Нет поддержки №	Chrome Android Нет поддержки №	Firefox Android Нет поддержки №	Opera Android Нет поддержки №	Safari iOS Нет поддержки №	Samsung Интернет Android Нет поддержки №

Легенда

Полная поддержка

Полная поддержка

Нет поддержки

Нет поддержки

Экспериментальный.Ожидайте, что поведение изменится в будущем.

Экспериментальный. Ожидайте, что поведение изменится в будущем.

Нестандартный. Ожидайте плохой кросс-браузерной поддержки.

Нестандартный. Ожидайте плохой кросс-браузерной поддержки.

Устаревший. Не для использования на новых сайтах.

Устаревший. Не для использования на новых сайтах.

Требуется префикс поставщика или другое имя для использования.

Требуется префикс поставщика или другое имя для использования.

См. Также

,

CSS-текст подчеркивания подчеркивания цвета — Переполнение стека Переполнение стека

1. Товары
2. Клиенты
3. Случаи использования

1. Переполнение стека Публичные вопросы и ответы
2. Команды Частные вопросы и ответы для вашей команды
3. предприятие Частные вопросы и ответы для вашего предприятия
4. работы Программирование и связанные с ним технические возможности карьерного роста
5. Талант Нанимать технический талант
6. реклама Связаться с разработчиками по всему миру

Загрузка…

2. Авторизоваться зарегистрироваться

3. текущее сообщество

   • Переполнение стека Помогите чат

.

CSS текстовое оформление.

→ HTML → CSS → CSS текстовое оформление

CSS текстовое оформление. . ,

---

CSS текстовое оформление

 
 ...
оформление текста: нет | подчеркивание | зачеркнуто | через строку | наследовать;
... 
 

---

:

• нет —
Подчеркивание
• —
• Overline —
• проходной —
• мигает — ()

 
 текстовое оформление: подчеркивание подчеркивание; 
 

---

стиль оформления текста:

 
 стиль оформления текста: сплошная | двойная | пунктирная | пунктирная | волнистая; 
 

:

• твердое тело —
• двухместный —
• пунктирная —
• пунктирная —
• волнистых —

цвет текста украшения:

 
 стиль оформления текста: цвет; 
 

цвет RGB, (.html)

, текстовое оформление в стиле текстовое оформление-цвет (2016).

---

1.

 
 
<Голова>
<Стиль>
.primer1 {
текстовое оформление: подчеркивание;
}
.primer2 {
текстовое оформление: зачеркнуто;
}
.primer1_2 {
оформление текста: подчеркивание, подчеркивание;
}


<Тело>
, 
 
 

 
 

:

---

---

2.

 
 
<Голова>
<Стиль>
.primer3 {
текстовое оформление: сквозное ;;
}


<Тело>
,  

 
 

:

,

---

3.

 
 
<Голова>
<Стиль>
.primer4 {
текстовое оформление: подчеркивание;
стиль оформления текста: пунктирная;
цвет текста украшения: красный;
}


<Тело>
,  

 
 

:

,

---

-, граница снизу:

 
: нижняя граница: красный цвет с точками 1px; 
 

---

текстовое оформление JavaScript:

 
 объект.style.textDecoration = "VALUE" 
 

---

---

:
• CSS шрифт
• дисплей css
• CSS преобразование
• HTML
• css transform-origin
• CSS граница
• CSS фон
• CSS переход
• текстовый отступ css

← CSS

,

CSS-стиль текста-декорирование

Пример

Набор различных типов стилей оформления текста:

дива {
текстовая отделка: подчеркивание;
стиль оформления текста: цельный;
}

div.b {
текстовая отделка: подчеркивание;
стиль оформления текста: волнистый;
}

div.c {
текстовая отделка: подчеркивание;
стиль оформления текста: двойной;
}

дел.d {
строка текста украшения: подчеркивание подчеркивание;
стиль оформления текста: волнистый;
}

Попробуй сам »

---

Определение и использование

Свойство text-украшение-style устанавливает стиль оформления текста (как сплошной, волнистый, пунктирный, пунктирный, двойной).

Подсказка: Также посмотрите на свойство text-украшение, которое является сокращенным свойством для текста-декорации-строки, текста-декорирования-стиля и текст-отделка цвета.

Значение по умолчанию:	твердый
Наследуется:	нет
Анимационный:	нет. Читайте о анимации
Версия:	CSS3
Синтаксис JavaScript:	объект .style.textDecorationStyle = «волнистый» Попытайся

---

Поддержка браузера

Числа в таблице указывают первую версию браузера, которая полностью поддерживает свойство.

Числа, сопровождаемые -moz-, указывают первую версию, которая работала с префиксом.

Недвижимость
стиль текста-украшения	57.0	Не поддерживается	36,0 6,0 -moz-	12,1	44,0

---

---

Синтаксис CSS

стиль оформления текста: сплошная | двойная | пунктирная | пунктирная | волнистая | начальная | наследовать;

Значения недвижимости

---

Похожие страницы

Учебник по CSS: CSS Text

HTML DOM ссылка: свойство textDecorationStyle

,