Текстовое оформление - CSS-хитрости

Anonim

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

h3 ( text-decoration: underline; )

Значения

  • none: линия не рисуется, и все существующие украшения удаляются.
  • underline: рисует линию в 1 пиксель поперек текста у его базовой линии.
  • line-through: рисует линию в 1 пиксель поперек текста в его «средней» точке.
  • overline: рисует линию в 1 пиксель по тексту непосредственно над его «верхней» точкой.
  • inherit: наследует украшение родителя.

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

Демо

См. CSS-приемы пера: оформление текста с помощью CSS-приемов (@ css-tricks) на CodePen.

Примечания по использованию

Вы можете комбинировать underline, overlineили line-throughзначения , разделенных пробелами список , чтобы добавить несколько строк украшения:

p ( text-decoration: overline underline line-through; )

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

text-decoration как сокращенное свойство

text-decorationможет использоваться в сочетании со свойством text-decoration-styleи text-decoration-colorкак сокращенное свойство:

.fancy-underline ( text-decoration-line: underline; text-decoration-style: wavy; text-decoration-color: red; /* can be shortened to */ text-decoration: underline wavy red; )

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

Связанный

  • text-decoration-color
  • text-decoration-line
  • text-decoration-style
  • text-decoration-skip

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

  • text-decoration как сокращенное свойство в спецификации W3C CSS Text Decoration Module Level 3 CR
  • оформление текста в MDN

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

Все браузеры поддерживают свойство «от руки» CSS2.1 text-decoration. Сокращенное свойство и вложенные свойства text-decoration-color, text-decoration-lineи text-decoration-styleподдерживаются без префикса в Firefox и с -webkitпрефиксом в Safari. Chrome также распознает эти значения с -webkitвключенным префиксом и флагом экспериментальных веб-платформ.

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

Рабочий стол

Хром Fire Fox IE Край Сафари
91 87 Нет 88 TP

Мобильный / планшет

Android Chrome Android Firefox Android iOS Safari
88 85 81 год 14,0–14,4 *

* text-decorationполностью поддерживается, подсвойства поддерживаются с -webkitпрефиксом.
† Подсвойства дополнительно требуют включения флажка экспериментальных функций веб-платформы.
‡ Только CSS2.1 text-decoration; подсвойства не поддерживаются.