Text decoration underline color: text-decoration-color | htmlbook.ru — Независимое театральное объединение "Зрительские симпатии"

Содержание

CSS-свойство text-underline-offset устанавливает дистанционное оформление (применяемое с помощью text-decoration)от его исходного положения.

Рекомендуется использовать единицы em, чтобы смещение масштабировалось вместе с размером шрифта. Определяет смещение подчеркивания как <процент> от 1 em в шрифте элемента. Процент наследуется как относительное значение и, следовательно, масштабируется при изменении шрифта.

Свойство text-underline-offset в CSS задает расстояние текстовых подчеркиваний от их начального положения.После того как вы нанесли подчеркивание для элемента с помощью text-decoration со значением underline,вы можете указать,на каком расстоянии от текста должна находиться эта линия,используя свойство text-underline-offset.

Свойство text-decoration-line используется для подчеркивания текста.Это свойство имеет три значения:overline,underline или line-through. Так,значение underline используется для подчеркивания текста в CSS.

Свойство CSS text-underline-offset

устанавливает расстояние смещения линии оформления подчеркнутого текста (примененной с помощью text-decoration ) от ее исходного положения.

Try it

text-underline-offset не является частью сокращения text-decoration . В то время как элемент может иметь несколько строк text-decoration text-underline-offset подчеркивания текста влияет только на подчеркивание, но не на другие возможные варианты оформления строки, такие как overline или line-through .

Syntax

/ * Одно ключевое слово * /
text-underline-offset: auto;
/* длина */
text-underline-offset: 0.1em;
text-underline-offset: 3px;
/ * процент * /
text-underline-offset: 20%;
/ * Глобальные значения * /
text-underline-offset: inherit;
text-underline-offset: initial;
text-underline-offset: revert;
text-underline-offset: revert-layer;
text-underline-offset: unset;

Свойство text-underline-offset указывается как одно значение из списка ниже.

Values

auto

Браузер выбирает соответствующее смещение для подчеркиваний.

<length>

Задает смещение подчеркивания как

<length> , отменяя предложенный файл шрифта и значение по умолчанию в браузере. Рекомендуется использовать единицы измерения em , чтобы смещение масштабировалось вместе с размером шрифта.

<percentage>

Определяет смещение подчеркивания как <percentage> от 1 эм в шрифте элемента. Процент наследуется как относительное значение и, следовательно, масштабируется с изменением шрифта. Для данного применения этого свойства смещение является постоянным по всему блоку, к которому применяется подчеркивание, даже если есть дочерние элементы с разными размерами шрифта или вертикальным выравниванием.

Formal definition

Initial value	`auto`
Applies to	все элементы. Это также относится к `::first-letter` и `::first-line` .
Inherited	yes
Percentages	указать размер шрифта самого элемента
Computed value	as specified
Animation type	по типу вычисленной стоимости

Formal syntax

text-underline-offset =   auto          |  <length>      |  <percentage>

Examples

Демонстрация функции text-underline-offset

<p>Hereтекст со смещенной волнистой красной линией подчеркивания! </p>
<br>
<p>This text has lines both above and below it. Only the bottom one is offset.</p>

p {
  text-decoration: underline wavy red;
  text-underline-offset: 1em;
}
.twolines {
  text-decoration-color: purple;
  text-decoration-line: underline overline;
}

Specifications

Specification
Модуль оформления текста CSS, уровень 4 # underline-offset

Browser compatibility

	Desktop	Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	WebView Android	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet
`text-underline-offset`	87	87	70	No	73	12. 1	87	87	No	No	12.2	14.0
`percentage`	No	No	74	No	No	No	No	No	No	No	No	No

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

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

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

Синтаксис

text-decoration-color: <цвет>

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

<цвет>: Цвет оформления текста (подчёркивания и сквозные линии), заданного для элемента с помощью text-decoration-line или text-decoration .

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

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

Основная информация о свойствах

Исходное значение: Текущий цвет
Применимо к: Все элементы
Унаследовано?: №
СМИ: Визуальный
Анимируемый: Да (см. пример)

Пример кода

Базовый CSS

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

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

Таким образом, его можно использовать так:

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

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

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

Хамелеон

Попробуй

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

Свойство text-decoration-color определено в модуле оформления текста CSS уровня 3 (кандидатская рекомендация W3C от 1 августа 2013 г. ).

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

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

Префиксы поставщиков

Для максимальной совместимости с браузерами многие веб-разработчики добавляют свойства, специфичные для браузера, с помощью таких расширений, как 9.0003 -webkit- для Safari, Google Chrome и Opera (более новые версии), -ms- для Internet Explorer, -moz- для Firefox, -o- для более старых версий Opera и т.д. CSS свойство, если браузер не поддерживает проприетарное расширение, он просто проигнорирует его.

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

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

Многие разработчики используют Autoprefixer, постпроцессор для CSS. Autoprefixer автоматически добавляет префиксы поставщиков в ваш CSS, поэтому вам это не нужно. Он также удаляет старые ненужные префиксы из вашего CSS.

Вы также можете использовать Autoprefixer с такими препроцессорами, как Less и Sass.

css — Использование «text-decoration-color» не работает

спросил 5 лет, 8 месяцев назад

Изменено 4 года, 1 месяц назад

Просмотрено 14 тысяч раз

Я хочу раскрасить текстовое оформление. Я получил учебник от w3schools

И попробовал это

 text-decoration: underline;
цвет оформления текста: #dddddd;

Но это не работает. Это недействительно? Есть ли другой способ раскрасить подчеркивание?

text-decoration-color имеет минимальную поддержку браузера

Вместо этого вы можете использовать что-то вроде диапазона, чтобы перекрасить текст:

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

охватывать {
  черный цвет; /* исходный цвет p */
}

красное подчеркивание, черный текст

Ваш код может повлиять на другой класс

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

тест

1 Обновление

: работает в Safari и Safari iOS с -webkit- 9Префикс 0004!

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

 тест

0

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

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