Статьи

Введение в CSS-свойство text-украшение

Описание

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

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

Кроме того, текстовые декорации на встроенных блоках отображаются вдоль всего блока, даже если он содержит блоки-потомки. Это тоже может показаться похожим на наследование. Любая настройка оформления текста в поле-потомке никогда не может «отменить» декорации текста в окне-предке.

пример

При соблюдении следующих правил, непосещенные ссылки привязываются жирным шрифтом, но не имеют подчеркивания, посещенные ссылки имеют линию через них, а ссылки в состоянии наведения или фокуса имеют строку над и под ними:

a:link {
  font-weight: bold;
  text-decoration: none;
}
a:visited {
  font-weight: bold;
  text-decoration: line-through;
}
a:hover, a:focus {
  text-decoration: underline overline;
}

Значение

  • line-through — это значение рисует горизонтальную линию через текст.
  • none — это значение не создает текстовое оформление (хотя оно не отменяет оформление, установленное для элемента-предка).
  • overline — это значение рисует горизонтальную линию над текстом.
  • подчеркивание — это значение рисует горизонтальную линию под текстом.