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

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

DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidХромовый AndroidFirefox для AndroidОпера АндроидSafari на IOSSamsung Интернет
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 .

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 ExplorerChromeOperaSafariFirefox
636
AndroidFirefox MobileOpera MobileSafari Mobile
636

Браузеры

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

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

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

Текст и шрифт

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.

Значения

нет
Текстовое оформление не добавлено. Если будет применено какое-либо украшение, оно будет удалено.
подчеркивание
Текст подчеркнут. Для многострочного текста каждая строка подчеркнута.
поверх
Текст отмечен строкой над ним. Для многострочного текста каждая строка текста имеет строку над ней.
сквозной
Текст имеет линию, проходящую через его середину.Для многострочного текста каждая строка текста проходит через нее.
мигает
Текст мигает. Это значение допустимо, но не рекомендуется, и браузерам разрешено игнорировать его.

Банкноты

Для сокращения text-decoration проверьте отдельные свойства «text-decoration-line», «text-decoration-color» и «text-decoration-style». В сокращении text-decoration CSS3 указанные выше значения являются допустимыми значениями для свойства text-decoration-line , поэтому запись для этого свойства очень похожа на эту.

Свойство text-decoration каскадно применяется ко всем дочерним элементам элемента, и нет возможности сбросить декорации (удалить их) на дочернем элементе, даже если значение none явно установлено для дочернего элемента элемент. Однако к дочерним элементам можно добавить дополнительные текстовые украшения.

Примеры

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

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

Следующая строка добавит строку под и еще одну строку над всеми элементами 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.
стиль оформления текста
Стиль оформления текста.

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

Кроме того, все свойства CSS также принимают следующие значения ключевых слов всего CSS в качестве единственного компонента своего значения свойства:

начальный
Представляет значение, указанное в качестве начального значения свойства.
наследовать
Представляет вычисленное значение свойства родительского элемента.
снято
Это значение действует как наследует или как начальный , в зависимости от того, унаследовано свойство или нет. Другими словами, он устанавливает для всех свойств их родительское значение, если они наследуются, или их начальное значение, если они не наследуются.

Основная информация об имуществе

Начальное значение
Текущий цвет
Относится к
Все элементы
Унаследовано?
СМИ
Визуальный
Анимационный
Да, но только как цвет (т.е. можно анимировать только свойство text-decoration-color сокращения). (см. пример)

Пример кода

Базовый CSS

Вот пример базовой декларации. Объявление состоит из свойства и его значений для различных полных свойств.

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

Любые пропущенные значения устанавливаются на их начальные значения.Таким образом, справедливо и следующее.

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

Фактически, это единственный синтаксис, распознаваемый CSS1 и CSS2 (поскольку они не поддерживают длинные свойства).

Итак, вы можете использовать следующий код для предоставления функций CSS3, при этом обеспечивая обратную совместимость для браузеров CSS1 и CSS2:

:ссылка {
оранжевый цвет;
текст-оформление: подчеркивание; / * Используется браузерами CSS1 и CSS2 * /
оформление текста: подчеркнутый зеленый пунктир; / * Используется браузерами CSS3 * /
}

В браузерах CSS1 и CSS2 текст ссылки и ее подчеркивание будут оранжевыми.Его подчеркивание будет сплошным (это единственный вариант до CSS3).

В браузерах CSS3 текст ссылки будет оранжевым, а подчеркивание — зеленым. Его подчеркивание также будет пунктирным.

Рабочий пример в HTML-документе


Пример
<стиль>
h2 {
шрифт: 100 3em без засечек;
цвет: золото;
текст-оформление: оверлейный волнистый желто-зеленый;
}

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

Попробуй

Официальные спецификации

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

Следующая таблица предоставлена ​​Caniuse.com показывает уровень поддержки этой функции браузером.

Доступность оформления текста CSS: сквозная; и Accessibility Demo

Доступность оформления текста CSS: сквозная; и Демонстрация специальных возможностей — PaulJAdam.com

<Вернуться к демонстрации | Узнайте больше на PaulJAdam.com>

Проблема: необходимо сообщить слепым пользователям о снижении цены, продажной цене, которая визуально обозначается серым текстом с перечеркнутыми линиями и текстом красного цвета.

Проблема 2: Вспомогательные технологии чтения с экрана НЕ показывают изменения в тексте при использовании стандартного семантического кода HTML4 / CSS. Почему программы чтения с экрана не поддерживают это !?

CSS-оформление текста: сквозное;

12,50 долл. США 3,99 долл. США

Удалить Вставить

12,50 долл. США 3,99 долл. США

Советы по расширению доступа (решения) для устройств чтения с экрана

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

Однако эти решения хорошо звучат с линейной навигацией по экрану.

Текст с визуальной обрезкой

Современный способ скрыть текст от визуальных пользователей, чтобы его могли прочитать только пользователи программы чтения с экрана.

Цена снижена с: 12,50 $ В продаже по: 3,99 $

Содержимое, созданное с помощью CSS + визуально обрезанный текст

С помощью свойства содержимого CSS вы можете значительно упростить разметку и при этом визуально скрыть текст, сгенерированный CSS.

12.50 $ 3,99

Опции для фокусируемых элементов

С помощью фокусируемых элементов вы можете просто изменить доступное имя элемента в API, например. используя aria-label. Элементы DIV с tabindex не будут произносить метки aria, если вы не примените роль API специальных возможностей. VO OS X, тем не менее, читает aria-label div tabindex без роли «группы».

aria-label на фокусируемых элементах

12,50 долл. США 3,99 долл. США

12,50 долл. США 3,99 долл. США

12.50 $ 3,99

12,50 долл. США 3,99 долл. США

aria-label в статических текстовых элементах role = «text» во 2-м примере

12,50 долл. США 3,99 долл. США

12,50 долл. США 3,99 долл. США

aria-label и role = img в статических текстовых элементах

12,50 долл. США 3,99 долл. США

19,99 долл. США

18,99 долл. США

.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *