Text color decoration: text-decoration-color | htmlbook.ru

Разное 

text-decoration-color | CSS | WebReference

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

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

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

Синтаксис

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

Значения

См. цвет.

Песочница

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

div {
  padding: 10px;
  text-decoration: underline;
  text-decoration-color: {{ playgroundValue }};
}

Пример

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

В данном примере ссылки подчёркиваются красной линией.

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

Объект.style.textDecorationColor

Примечание

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

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

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

СпецификацияСтатус
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-line
  • text-decoration-style

Рецепты

  • Как сделать волнистое подчёркивание текста?
  • Как сделать подчёркивание заголовка?

text-decoration-color — CSS — Дока

  1. Кратко
  2. Пример
  3. Как пишется

Кратко

Скопировано

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

Кстати, декоративные линии можно интересно стилизовать при помощи text-decoration-style 😎

Пример

Скопировано

Зададим для слов, обозначающих цвет в тексте, двойное нижнее подчёркивание, и разукрасим линии в нужные цвета:

span {  text-decoration-line: underline;  text-decoration-style: double;}.red {  text-decoration-color: red;}.yellow {  text-decoration-color: yellow;}.white {  text-decoration-color: white;}
          span {
  text-decoration-line: underline;
  text-decoration-style: double;
}
.red {
  text-decoration-color: red;
}
.yellow {
  text-decoration-color: yellow;
}
.white {
  text-decoration-color: white;
}
Открыть демо в новой вкладке

Как пишется

Скопировано

Значение text-decoration-color

по умолчанию — currentColor, то есть цвет такой же, что и у текста.

body {  color: #735184;}span {  text-decoration-line: underline;  text-decoration-style: double;}
          body {
  color: #735184;
}
span {
  text-decoration-line: underline;
  text-decoration-style: double;
}
Открыть демо в новой вкладке

В примере выше цвет двойного подчёркивания серобуромалиновый, поскольку для самого текста задан этот цвет, а значит и current

Color для text-decoration-color будет значиться серобуромалиновым.

Это можно легко поменять: text-decoration-color принимает цвет в любом доступном формате, например, жёлтый yellow или фиолетовый #8b00ff.

Раскрасить можно не только text-decoration-line, но и линии, обозначенные в HTML-разметке тегами, например <u> или <del>. У text-decoration-color краски хватит на всех!

del {  text-decoration-color: orange;}
          
 
del {
  text-decoration-color: orange;
}
Открыть демо в новой вкладке

Если вы нашли ошибку, отправьте нам пул-реквест!

Во время отправки формы что-то пошло не так. Попробуйте ещё раз?

←

text-decoration

ctrl + alt + ←

→

text-decoration-line

ctrl +

alt + →

цвет оформления текста | CSS-трюки — CSS-трюки

DigitalOcean предоставляет облачные продукты для каждого этапа вашего путешествия. Начните с бесплатного кредита в размере 200 долларов США!

Свойство text-decoration-color задает цвет подчеркивания, надчеркивания или сквозной линии текста с примененным свойством text-decoration . Он также может установить цвет подчеркивания для ссылок.

 а {
  цвет оформления текста: #E18728;
}

Значения

text-decoration-color может наследовать или принимать любое значение цвета CSS, включая именованные цвета, цвета HEX, RGBa и HSLa.

Сокращение

В браузерах, поддерживающих text-decoration-style и text-decoration-color , вы можете добавить цвет к сокращенному свойству text-decoration :

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

В настоящее время только Firefox поддерживает это без префикса. Safari поддерживает его с помощью -webkit 9.префикс 0006. Chrome также требуется префикс -webkit и экспериментальные функции веб-платформы, включенные в флагах Chrome.

Demo

text-decoration-color в этой демонстрации работает в текущих версиях Firefox и Safari. Он также будет работать в Chrome с включенным флагом «экспериментальные функции веб-платформы».

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

Chrome Safari Firefox Opera IE Android iOS
31† 7. 1* 6.0‡ None None None 8*

† with the “experimental Web Platform features” turned в chrome://flags. Для Chrome 31 требуется префикс -webkit-. Мы протестировали Chrome 50, и он работал только без префикса.
‡ 6+ с префиксом -moz, без префикса с 36.

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

  • text-decoration-color в модуле оформления текста CSS уровня 3 CR
  • text-decoration-color в MDN

украшение текста

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

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

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

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

.element { text-decoration-skip: ink; }

текст-украшение-пропустить-чернила

.element {text-decoration-skip-ink: none; }

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

.

No related posts.

Автор записи

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

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