Text decoration line: text-decoration-line — CSS: Cascading Style Sheets

Содержание

text-decoration-line | CSS | WebReference

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

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

Значение по умолчанию	none
Наследуется	Нет
Применяется	Ко всем элементам
Анимируется	Нет

Синтаксис

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

Обозначения

	Описание	Пример
<тип>	Указывает тип значения.	<размер>
A && B	Значения должны выводиться в указанном порядке.	<размер> && <цвет>
A \| B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal \| small-caps
A \|\| B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width \|\| count
[ ]	Группирует значения.	[ crop \|\| cross ]
*	Повторять ноль или больше раз.	[,<время>]*
+	Повторять один или больше раз.	<число>+
?	Указанный тип, слово или группа не является обязательным.	inset?
{A, B}	Повторять не менее A, но не более B раз.	<радиус>{1,4}
#	Повторять один или больше раз через запятую.	<время>#

Значения

line-through: Создает перечёркнутый текст (пример).
overline: Линия проходит над текстом (пример).
underline: Устанавливает подчёркнутый текст (пример).
none: Отменяет все эффекты, в том числе и подчёркивания у ссылок, которое задано по умолчанию.

Песочница

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

Пример

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

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

Объект.style.textDecorationLine

Примечание

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

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

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

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

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

Браузеры

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

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

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

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

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

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

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

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

Свойство text-decoration-line устанавливает, какой вид линии должен быть использован для текстового оформления.

Свойствоtext-decoration-line может иметь одно или несколько значений.

Кроме нижеприведенных значений, свойство text-decoration-line имело еще значение «blink» (мигание текста). Это значение устарело.

Расширение -webkit- для Safari используется со свойством text-decoration-line.

Значение по умолчанию	none
Применяется	Ко всем элементам, а также к ::first-letter и ::first-line.
Наследуется	Нет
Анимируемое	Нет
Версия	CSS3
DOM синтаксис	object.style.textDecorationLine = «overline underline»;

Синтаксис¶

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

Пример¶

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      p {
      -webkit-text-decoration-line: overline; /* Safari */
      text-decoration-line: overline; 
      }
    </style>
  </head>
  <body>
    <h3>Пример свойства text-decoration-line</h3>
    <p>Lorem Ipsum - это текст-"рыба"...</p>
  </body>
</html>

Попробуйте сами!

Пример со значением «underline»:

Пример¶

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      p {
      -webkit-text-decoration-line: underline; /* Safari */
      text-decoration-line: underline; 
      }
    </style>
  </head>
  <body>
    <h3>Пример свойства text-decoration-line</h3>
    <p>Lorem Ipsum - это текст-"рыба"...</p>
  </body>
</html>

Попробуйте сами!

Пример со значением «line-through»:

Пример¶

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      p{
      -webkit-text-decoration-line: line-through; /* Safari */
      text-decoration-line: line-through; 
      }
    </style>
  </head>
  <body>
    <h3>Пример свойства text-decoration-line</h3>
    <p>Lorem Ipsum - это текст-"рыба"...</p>
  </body>
</html>

Попробуйте сами!

Пример со всеми значениями:

Пример¶

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      div.t1 {
      -webkit-text-decoration-line: none; /* Safari */
      text-decoration-line: none; 
      }
      div.t2 {
      -webkit-text-decoration-line: underline; /* Safari */
      text-decoration-line: underline; 
      }
      div.t3 {
      -webkit-text-decoration-line: line-through; /* Safari */
      text-decoration-line: line-through; 
      }
      div.t4 {
      -webkit-text-decoration-line: overline; /* Safari */
      text-decoration-line: overline; 
      }
    </style>
  </head>
  <body>
    <h3>Пример свойства text-decoration-line</h3>
    <div>Lorem Ipsum - это текст-"рыба"...</div>
    <br>
    <div>Lorem Ipsum - это текст-"рыба"...</div>
    <br>
    <div>Lorem Ipsum - это текст-"рыба",,.</div>
    <br>
    <div>Lorem Ipsum - это текст-"рыба"...</div>
  </body>
</html>

Попробуйте сами!

Значения¶

Значение	Описание
none	Линия не указана.
underline	Линия указана под текстом.
overline	Линия указана над текстом.
line-through	Линия проходит через текст.
initial	Устанавливает свойство в значение по умолчанию.
inherit	Значение элемента наследуется от родительского элемента.

CSS — text-decoration-line — Свойство CSS text-decoration-line устанавливает вид украшения, который используе

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

При одновременной установке нескольких свойств декорирования линий может быть удобнее использовать вместо этого свойство сокращения text-decoration .

Syntax

text-decoration-line: none;
text-decoration-line: underline;
text-decoration-line: overline;
text-decoration-line: line-through;
text-decoration-line: blink;


text-decoration-line: underline overline;               
text-decoration-line: overline underline line-through;  


text-decoration-line: inherit;
text-decoration-line: initial;
text-decoration-line: unset;

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

Values

none: Не производит текстовое оформление.
underline: Под каждой строкой текста есть декоративная линия.
overline: Над каждой строкой текста есть декоративная линия.
line-through: Каждая строка текста имеет декоративную линию,проходящую через его середину.
blink Этот устаревший API больше не следует использовать, но он, вероятно, по-прежнему будет работать.: Текст мигает (чередуется между видимым и невидимым). Соответствующие пользовательские агенты могут не мигать текстом. Это значение не рекомендуется в пользу анимации CSS .

Formal definition

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

none | [ underline || overline || line-through || blink ] | spelling-error | grammar-error

Examples

Основной пример

<p>Here's some text with wavy red underline!</p>
<p>This text has lines both above and below it.</p>

.wavy {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: red;
}

.both {
  text-decoration-line: underline overline;
}

Specifications

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

Desktop Mobile

Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Хромовый Android Firefox для Android Опера Андроид Safari на IOS Samsung Интернет

	Desktop	Mobile
`text-decoration-line`	57	79	36 6-39	No	44	12.1 8	57	57	36 6-39	43	12.2 8	7.0
`blink`	57 `blink` значение не имеет никакого эффекта.	79 `blink` значение не имеет никакого эффекта.	26 `blink` значение не имеет никакого эффекта.	No	44	8	57 `blink` значение не имеет никакого эффекта.	57 `blink` значение не имеет никакого эффекта.	26 `blink` значение не имеет никакого эффекта.	43	8	7.0 `blink` значение не имеет никакого эффекта.

text-decoration-line

6-39

12.1

6-39

12.2

7.0

blink

blink значение не имеет никакого эффекта.

7.0

blink значение не имеет никакого эффекта.

См.также

При одновременной установке нескольких свойств декорирования линий может быть удобнее использовать вместо этого свойство сокращения text-decoration .

CSS — text-decoration-line

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

Значение по умолчанию	none
Наследуется	Нет
Применяется	Ко всем элементам
Анимируется	Нет

Синтаксис ?

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

✖

Обозначения

	Описание	Пример
<тип>	Указывает тип значения.	<размер>
A && B	Значения должны выводиться в указанном порядке.	<размер> && <цвет>
A \| B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal \| small-caps
A \|\| B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width \|\| count
[ ]	Группирует значения.	[ crop \|\| cross ]
*	Повторять ноль или больше раз.	[,<время>]*
+	Повторять один или больше раз.	<число>+
?	Указанный тип, слово или группа не является обязательным.	inset?
{A, B}	Повторять не менее A, но не более B раз.	<радиус>{1,4}
#	Повторять один или больше раз через запятую.	<время>#

Значения

line-through: Создает перечёркнутый текст (пример).
overline: Линия проходит над текстом (пример).
underline: Устанавливает подчёркнутый текст (пример).
none: Отменяет все эффекты, в том числе и подчеркивания у ссылок, которое задано по умолчанию.

Пример

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

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

Объект.style.textDecorationLine

Примечание

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

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

✖

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

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

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

Браузеры: Настольные Мобильные

Internet Explorer	Chrome	Opera	Safari	Firefox
				6	36

Android	Firefox Mobile		Opera Mobile	Safari Mobile
	6	36

✖

Браузеры

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

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

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

Текст и шрифт

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

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


12.0+	3.0+	1.0+	1.0+	3.5+	1.0+

Описание

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> (зачёркнутый текст).

Значение по умолчанию:	none
Применяется:	ко всем элементам, а также к псевдо-элементам ::first-letter и ::first-line
Анимируется:	нет
Наследуется:	нет
Версия:	CSS1
Синтаксис JavaScript:	object.style.textDecoration=»overline»

Синтаксис

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

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

Значение	Описание
none	Оставляет текст без изменений.
underline	Определяет горизонтальную линию под текстом.
overline	Определяет горизонтальную линию над текстом.
line-through	Определяет линию перечеркивающую текст.
inherit	Указывает, что значение наследуется от родительского элемента.

Пример

Измените значение свойства для просмотра результата.

div {

text-decoration: none;

}

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

Пример

Установить разные типы линий оформления текста:

дива
{
текст-украшение-линия: надстрочный;
}

div.b
{
text-decoration-line: подчеркивание;
}

div.c
{
текст-украшение-строка: сквозная строка;
}

див.d
{
text-decoration-line: нижнее подчеркивание;
}

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

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

Свойство text-decoration-line устанавливает тип используемого оформления текста.
(например, подчеркивание, подчеркивание, сквозная линия).

Совет: Также обратите внимание на свойство text-decoration,
который является сокращенным свойством для text-decoration-line, text-decoration-style и
текст-украшение-цвет.

Примечание: Вы также можете комбинировать несколько значений, например подчеркивание и над чертой, чтобы отображать строки как под текстом, так и над ним.

Значение по умолчанию:	нет
Унаследовано:	№
Анимируемое:	нет.Прочитать про animatable
Версия:	CSS3
Синтаксис JavaScript:	объект .style.textDecorationLine = «overline» Попытайся

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

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

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

Объект
текст-украшение-строка	57.0	79,0	36,0 6,0 -моз-	7.1 -webkit-	44,0

Синтаксис CSS

Стоимость недвижимости

Значение	Описание	Играй
нет	Значение по умолчанию. Задает отсутствие строки для оформления текста	Играй »
подчеркивание	Указывает, что строка будет отображаться под текстом	Играй »
черта	Указывает, что линия будет отображаться поверх текста	Играй »
сквозной	Указывает, что строка будет отображаться через текст	Играй »
начальный	Устанавливает для этого свойства значение по умолчанию.Читать про начальный	Играй »
наследовать	Наследует это свойство от своего родительского элемента. Читать про наследство

Связанные страницы

Учебник

CSS: Текст CSS

Ссылка на HTML DOM: свойство textDecorationLine

текст-украшение-строка | CSS-уловки

Свойство text-decoration-line украшает текст подчеркиванием, надчеркиванием, сквозной линией или комбинацией этих строк.

  p {
  текст-украшение-строка: подчеркивание;
}

Значения

нет : строка не добавляется, а все существующие строки удаляются — например, нет удаляет подчеркивание по умолчанию в ссылках.
подчеркивание : добавляет подчеркивание 1 пиксель под текстом.
overline : добавляет 1px поверх текста.
сквозная : добавляет строку в 1 пиксель через текст.
наследовать : наследует украшение родителя.

Значение blink указано в спецификации W3C, но устарело и не будет работать ни в одном текущем браузере. Когда это сработало, он заставил текст «мигать», быстро переключая его непрозрачность между 0% и 100%.

Объединение значений

Вы можете объединить значения подчеркивания , над чертой или сквозных значений в списке, разделенном пробелами, чтобы добавить несколько декоративных линий:

  p {
  text-decoration-line: нижняя линия подчеркивания сквозная линия;
}

Использование

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

стенография

text-decoration-line может использоваться в сочетании с text-decoration-style и text-decoration-color в сокращенном CSS3 свойстве text-decoration (в настоящее время только Firefox полностью поддерживает это):

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

Демо

Эта демонстрация будет работать в Safari, Firefox и Chrome с включенными экспериментальными функциями веб-платформы.Значение мигания не включается.

Дополнительная информация

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

Chrome	Safari	Firefox	Opera	IE	Android	iOS
31 * †	7.1 *	6 ‡	Нет	Нет	Нет	8 *

* с префиксом -webkit
† с включенным флагом экспериментальных функций веб-платформы
‡ 6 — 35 с префиксом -moz , без префикса с 36.

Связанные

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

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

Свойство text-decoration-line указывает тип строки, которая будет использоваться для оформления текста.

Свойство text-decoration-line является одним из свойств CSS3.

Свойство text-decoration-line принимает одно или несколько значений.

Расширение -webkit- для Safari используется со свойством text-decoration-line.

Синтаксис¶

  text-decoration-line: none | подчеркивание | над чертой | линейный | начальная | наследовать;

Пример свойства text-decoration-line: ¶

  

  
     Название документа 
    <стиль>
      п {
        -webkit-текст-украшение-строка: над чертой;
        текст-украшение-строка: над чертой;
      }
    
  
  
     Пример свойства Text-decoration-line 
     Lorem Ipsum - это просто фиктивный текст...

Попробуйте сами »

Результат¶

Пример свойства text-decoration-line со значением« подчеркивание »: ¶

  

  
     Название документа 
    <стиль>
      п {
        -webkit-text-decoration-line: подчеркивание;
        текст-украшение-строка: подчеркивание;
      }
    
  
  
     Пример свойства Text-decoration-line 
     Lorem Ipsum - это просто фиктивный текст...

Попробуйте сами »

Пример свойства text-decoration-line со значением« line-through »: ¶

  

  
     Название документа 
    <стиль>
      п {
        -webkit-text-decoration-line: сквозная строка;
        текст-украшение-строка: сквозная строка;
      }
    
  
  
     Пример свойства Text-decoration-line 
     Lorem Ipsum - это просто фиктивный текст...

Попробуйте сами »

Пример свойства text-decoration-line со всеми значениями: ¶

  

  
     Название документа 
    <стиль>
      div {
        маржа: 20px 0;
      }
      div.t1 {
        -webkit-text-decoration-line: нет;
        текст-украшение-строка: нет;
      }
      div.t2 {
        -webkit-text-decoration-line: подчеркивание;
        текст-украшение-строка: подчеркивание;
      }
      div.t3 {
        -webkit-text-decoration-line: сквозная строка;
        текст-украшение-строка: сквозная строка;
      }
      div.t4 {
        -webkit-текст-украшение-строка: над чертой;
        текст-украшение-строка: над чертой;
      }
    
  
  
     Пример свойства Text-decoration-line 
    
      Lorem Ipsum - это просто фиктивный текст...
    
    
      Lorem Ipsum - это просто фиктивный текст ...
    
    
      Lorem Ipsum - это просто фиктивный текст ,,.
    
    
      Lorem Ipsum - это просто фиктивный текст ...

Попробуйте сами »

Values¶

Помимо вышеупомянутых значений свойство text-decoration-line имело значение« blink », которое заставляло текст мигать.Это значение устарело.

Практикуйте свои знания

Спасибо за отзыв!

Считаете ли вы это полезным? Да Нет

Статьи по теме

Мы используем файлы cookie для улучшения взаимодействия с пользователем и анализа посещаемости веб-сайта. Принимаю

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

В этом руководстве по CSS объясняется, как использовать свойство CSS text-decoration с синтаксисом и примерами.

Описание

Свойство CSS text-decoration определяет форматирование текста элемента, такое как подчеркивание, наложение, сквозная линия и мигание.

Синтаксис

Синтаксис CSS-свойства text-decoration:

  текст-украшение: значение;

Параметры или аргументы

значение

Форматирование текста. Это может быть одно из следующих значений:

Значение	Описание
подчеркивание	Текст имеет подчеркивание div {text-decoration: underline; }
черта	Текст имеет строку над ним div {text-decoration: overline; }
сквозной	Текст имеет линию посередине div {text-decoration: line-through; }
мигает	Мигает текст div {украшение текста: мигает; }
нет	К тексту не применяется текстовое оформление div {text-decoration: none; }
наследовать	Элемент унаследует оформление текста от своего родительского элемента div {украшение текста: наследование; }

Примечание

Некоторые браузеры могут игнорировать мигание text-decoration.

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

Свойство CSS text-decoration имеет базовую поддержку в следующих браузерах:

Хром
Android
Firefox (Gecko)
Firefox Mobile (Gecko)
Internet Explorer (IE)
IE Телефон
Opera
Opera Mobile
Safari (WebKit)
Safari Mobile

Пример

Мы обсудим свойство text-decoration ниже, исследуя примеры использования этого свойства в CSS.

Использование подчеркивания

Давайте посмотрим на пример CSS-оформления текста, в котором мы используем подчеркивание и текстовое оформление .

  a: hover {color: # 4A6593; текст-оформление: подчеркивание; }

В этом примере оформления текста CSS текст будет подчеркиваться при наведении курсора на ссылку.

Использование сквозной линии

Затем давайте рассмотрим пример оформления текста CSS, в котором применяется оформление текста от строки до .

  промежуток {украшение текста: сквозное; }

В этом примере CSS text-decoration мы установили text-decoration равным от строки до в теге .

Без использования

Давайте посмотрим на пример CSS-оформления текста, в котором мы удаляем текстовое оформление.

  a: ссылка, a: активный, a: посещенный {text-decoration: none; }

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

текст-украшение | Codrops

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

В CSS3 свойство text-decoration является сокращением для установки text-decoration-line , text-decoration-color и text-decoration-style в одном объявлении.Отсутствие любого из этих значений в сокращении установит для этого значения его начальное значение (подробности проверьте записи для каждого из этих свойств).

Свойство text-decoration можно объявить без указания значений для свойств text-decoration-color и text-decoration-style . Для этих значений будут установлены значения по умолчанию, поэтому они являются необязательными и не обязательными, что означает, что свойство text-decoration полностью обратно совместимо с уровнями CSS 2 и 1, поэтому даже если браузер не поддерживает CSS3 сокращенно text-decoration , он по-прежнему распознает и применяет стиль как часть старых уровней CSS.

До того, как text-decoration стал сокращением в CSS3, он принимал 5 значений: none, underline, overline, line-through, blink . Последнее значение, мигает , заставляет текст мигать, но оно устарело, и спецификация позволяет браузеру игнорировать это значение, поэтому вам лучше не использовать его, тем более что Рекомендации W3C по доступности рекомендуют , а не , использовать мигающий текст для лучшая доступность.

Пример различных значений оформления текста

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

Общая информация и заметки

Строка с по обычно используется, чтобы «зачеркнуть» строки текста, которые были удалены или изменены. В этом случае авторам рекомендуется использовать элементы HTML, такие как и , чтобы сохранить семантику такого текста, чтобы значение (удаление) сохранялось даже при отключении стилей на странице.

К якорным ссылкам применяется подчеркивание по умолчанию, что хорошо для доступности, поскольку некоторые люди зависят от наличия подчеркивания для обнаружения ссылок на странице.Таким образом, хотя удаление подчеркивания возможно с помощью text-decoration-line: none , по причинам доступности настоятельно рекомендуется сохранить подчеркивание или стилизовать их по-другому, чтобы соответствовать общему стилю страницы, вместо полного удаления их, если не существует другой визуальной индикации, указывающей на то, что фрагмент текста на самом деле является ссылкой.

Официальный синтаксис

Банкноты

Версия CSS3 свойства text-decoration является сокращением для text-decoration-line , text-decoration-color и text-decoration-style со следующим синтаксисом:

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

В этой записи мы будем определять значения для версии свойства CSS2, которая аналогична версии CSS3, за исключением того, что в ней опускаются значения для и .Если вы добавите все три значения, свойство будет рассматриваться как сокращение CSS3.

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

~~Следующая строка добавит строку под и еще одну строку над всеми элементами h2 .~~

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

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

~~Свойство поддерживается во всех браузерах: Chrome, Firefox, Safari, Opera, IE, Android и iOS.~~

~~С другой стороны, сокращенное свойство в настоящее время поддерживается только в Firefox 6+.~~

Банкноты

Свойство blink по-прежнему поддерживается во всех браузерах, но, поскольку оно устарело, оно поддерживается без эффекта.

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

Пример
<стиль>
h2 {
шрифт: 100 11vw без засечек;
цвет: горячий розовый;
текст-оформление: надстрочный;
}

Пример наложения

Свойство text-decoration является сокращенным свойством для установки text-decoration-line , text-decoration-style и text-decoration-color в одном объявлении.

При использовании сокращенного свойства text-decoration пропущенным значениям присваиваются их начальные значения.

Синтаксис

~~текст-украшение: || ||~~

Возможные значения

~~текст-украшение-строка~~

Указывает, какие линейные украшения, если они есть, добавляются к элементу.Допустимы следующие значения:
нет
Не производит и не запрещает оформление текста.
подчеркнутый
Каждая строка текста подчеркнута.
черта
Каждая строка текста имеет над ней черту.
сквозной
Каждая строка текста проходит через линию посередине.
мигает
Текст мигает (чередуется между видимым и невидимым). Обратите внимание, что это значение устарело в пользу анимации CSS.

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

Стиль оформления текста.
цельный
Сплошная линия.
волнистый
Волнистая линия.
с точками
Пунктирная линия.
штриховая
Строка, состоящая из тире.
двойной
Двойная сплошная линия.

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