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

Leave a Comment / Разное / By /

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
Отменяет все эффекты, в том числе и подчёркивания у ссылок, которое задано по умолчанию.

Песочница

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

none line-through overline underline

div {
  text-decoration-color: #f26122;
  text-decoration-line: {{ playgroundValue }};
}

Пример

<!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.

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

СпецификацияСтатус
CSS Text Decoration Module Level 3Возможная рекомендация
Спецификация

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

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

Браузеры

7957448636
80636468
Браузеры

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

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

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

Текст и шрифт

См. также

  • text-decoration
  • text-decoration-color
  • text-decoration-style

css властивість text-decoration-line

  • Головна
  • css
  • властивості
  • text-decoration-line

CSS властивість text-decoration-line визначає розміщення декоративної лінії — під текстом, посередині, над текстом.

Одночасно дозволено застосовувати більш декілька стилів, перераховуючи значення через пропуск.

Нотатка:

При одночасному налаштуванні декількох властивостей оздоблення рядка, можливо, буде зручніше скористатися властивістю

text-decoration.

Запропонувати свою пораду чи нотатку

ПорадаНотатка

Синтакс

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

Властивість text-decoration-line може отримувати 6 значень:

none

Текст без декоративної лінії. Без задання. Примітка: Підкреслення у посилань, теж, зникне.

underline

Підкреслений текст.

overline

Декоративна лінія над текстом.

line-through

Перекреслений текст.

initial

Встановлює властивість у значення без задання

inherit

Вказує на спадковість властивості від свого батьківського елемента.

Значення без задання:none
Наслідує:Ні
Анімується:Ні
JavaScript синтаксис:object.style.textDecorationLine=»overline»

Переглядачі

  • Стаціонарні переглядачі
  • Мобільні переглядачі
Переглядач
text-decoration-line

57. 0

Не підтримується

36.0
6.0 -moz-

7.1 -webkit-

44.0

Не підтримується

Переглядач
text-decoration-line

Не підтримується

36.0
6.0 -moz-

8.0 -webkit-

Приклади

  • Приклад 1
  • Приклад 2

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

Відображає елемент з лінією над рядками
p { 


  -moz-text-decoration-line: overline; /* Code for Firefox */ 


  text-decoration-line: overline; 


} 
Додаткові посилання
text-decoration-color
text-decoration
text-shadow
text-decoration-style
box-decoration-break
 CSS: свойство text-decoration 
 В этом руководстве по CSS объясняется, как использовать свойство CSS под названием  text-decoration  с синтаксисом и примерами.
 Описание 
 Свойство CSS text-decoration определяет форматирование текста элемента, такое как подчеркивание, надчеркивание, сквозная линия и мерцание.
 Синтаксис 
 Синтаксис свойства CSS text-decoration:
 text-decoration: value; 
 Параметры или аргументы 
 значение
 Форматирование текста. Это может быть одно из следующих значений:
.
 Значение Описание
 подчеркивание Текст имеет подчеркивание 
 div { text-decoration: underline; }
 над чертой Над текстом отображается строка 
 div { text-decoration: overline; }
 проходной В середине текста есть линия 
 div { text-decoration: line-through; }
 мигает
  Текст мигает 
 div { text-decoration: blink; }
 нет Текстовое оформление не применяется к тексту 
 div { text-decoration: none; }
 унаследовать Элемент унаследует оформление текста от своего родительского элемента 
 div { text-decoration: inherit; }
 Примечание 
  •  Некоторые браузеры могут игнорировать оформление текста  blink  .
 Совместимость с браузерами 
 Свойство CSS text-decoration имеет базовую поддержку в следующих браузерах:
  •  Chrome
  •  Андроид
  •  Firefox (Геккон)
  •  Firefox Mobile (Геккон)
  •  Internet Explorer (IE)
  •  Интернет-телефон
  •  Опера
  •  Опера Мобайл
  •  Сафари (веб-кит)
  •  Сафари Мобильный
    •  
 Пример 
 Мы обсудим свойство text-decoration ниже, исследуя примеры использования этого свойства в CSS.
 Использование подчеркивания 
 Давайте рассмотрим пример оформления текста CSS, где мы используем подчеркивание   оформления текста.
 a: hover { color: #4A6593; оформление текста: подчеркивание; } 
 В этом примере оформления текста CSS текст будет подчеркиваться при наведении указателя мыши на ссылку.
 Использование Line-Through 
 Далее, давайте посмотрим на пример оформления текста CSS, где применено оформление текста  line-through  text-decoration.
 span { text-decoration: line-through; } 
 В этом примере оформления текста CSS мы установили для оформления текста значение  от строки до  в теге .
 Использование None 
 Давайте посмотрим на пример оформления текста CSS, в котором мы удаляем оформление текста.
 а: ссылка, а: активна, а: посещена {украшение текста: нет; } 
 Традиционно большинство сайтов подчеркивают все ссылки. Однако некоторые сайты предпочитают отображать подчеркивание только тогда, когда пользователь наводит курсор на ссылку. В этом примере CSS text-decoration мы удалили text-decoration из тега  для ссылок, активных и посещенных (но не наведенных).
 Поделись:
 Реклама
 стиль оформления текста | Могу ли я использовать… Таблицы поддержки для HTML5, CSS3 и т. д. 
 Могу ли я использовать
 Поиск
 ?
 стиль оформления текста 
 — CR
  •  global»>
     Глобальное использование 
     0%
+
96,92%
«=»
96,92%
 Метод определения типа, стиля и цвета линий в свойстве text-decoration. Они могут быть определены как сокращенные (например,  text-decoration: line-through dashed blue  ) или как отдельные свойства (например,  text-decoration-color: blue  )
 Chrome 
  1.  4–25: не поддерживается
  2.  26–56: отключено по умолчанию
  3.  57–112: частичная поддержка
  4.  113: частичная поддержка
  5.  114 — 116: Частичная опора
 Край 
  1.  12–18: не поддерживается
  2.  79–112: частичная поддержка
  3.  00% — Partial support»> 113: частичная поддержка
 Safari 
  1.  3.1–7: не поддерживается
    2.  90 206 7.1: Частичная поддержка
  2.  8 — 12: Частичная поддержка
  3.  12.1–16.3: частичная поддержка
  4.  16.4: частичная поддержка
  5.  16.5 — TP: частичная поддержка
 Firefox 
  1.  2–5: не поддерживается
  2.  6–35: Частичная поддержка
  3.  36–111: Частичная поддержка
  4.  112: частичная поддержка
  5.  01% — Partial support»> 113–114: частичная поддержка
 Opera 
  1.  9–34: не поддерживается
  2.  35–43: отключено по умолчанию 9008 8
  3.  44 — 97: Частичная поддержка
  4.  98: Частичная поддержка
 IE 
  1.  5.5–10: не поддерживается
  2.  11: не поддерживается
 Chrome для Android 
  1.  112: частичная поддержка
    2.  90 190
     Safari на iOS 
    1.  3.2–7.1: не поддерживается
    2.  8 — 16.3: Частичная поддержка
    3.  42% — Partial support, requires this prefix to work: -webkit-«> 16.4: Частичная поддержка
    4.  16.5: Частичная поддержка
     Samsung Internet 
    1.  4 — 6.4: Не поддерживается
    2.  7.2 — 19.0 : Частичная поддержка
    3.  20: Частичная поддержка
     Opera Mini 
    1.  все: не поддерживается
     Opera Mobile 
    1.  10–12.1: не поддерживается
    2.  73: частичная поддержка
     UC Browser для Android 
    1.  13.4: Частичная поддержка
     Android Браузер

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

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