Css underline text: text-decoration-style — CSS: Cascading Style Sheets

11.04.2023 Facebook Twitter LinkedIn Google+ Разное

Свойство text-decoration | CSS справочник

CSS свойства

Определение и применение

CSS свойство text-decoration добавляет декорирование текста (подчеркивание, перечеркивание, линия над текстом).

Кроме того в CSS3 свойство text-decoration является короткой записью(сокращенным свойством) для следующих свойств, добавленных в CSS3:

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

Обращаю Ваше внимание, что в настоящее время вышеуказанные свойства (добавленные в CSS3) имеют очень ограниченную поддержку и не рекомендованы к использованию.

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

Свойство
Chrome
Firefox
Opera
Safari
IExplorer
Edge
text-decoration1.01.03.51.03.012.0

CSS синтаксис:

text-decoration:"none | underline | overline | line-through | initial | inherit";
Допускается использование нескольких значений в одном объявлении:
text-decoration:"underline line-through overline";
В качестве короткой записи в CSS3:
text-decoration:"text-decoration-line text-decoration-style text-decoration-color  | initial | inherit";

JavaScript синтаксис:

object. style.textDecoration ="line-through"

Значения свойства

ЗначениеОписание
noneОпределяет нормальный текст (без декорирования). Это значение по умолчанию
underlineОпределяет линию под текстом.
overlineОпределяет линию над текстом.
line-throughОпределяет линию, проходящую через текст (перечеркивание).
initialУстанавливает свойство в значение по умолчанию.
inheritУказывает, что значение наследуется от родительского элемента.

Версия CSS

CSS1

Наследуется

Нет.

Анимируемое

Нет.

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

  <!DOCTYPE html>
<html>
<head>
<title>Пример использования свойства text-decoration.</title>
<style> 
.test {
text-decoration : underline; /* добавляем декорирование текста (линия снизу) */
color : red; /* устанавливаем цвет шрифта */
}
. test2 {
text-decoration : overline; /* добавляем декорирование текста (линия сверху) */
color : green; /* устанавливаем цвет шрифта */
}
.test3 {
text-decoration : line-through; /* добавляем декорирование текста (перечеркивание) */
color : blue; /* устанавливаем цвет шрифта */
}
</style>
</head>
	<body>
		<p class = "test">text-decoration: underline;</p>
		<p class = "test2">text-decoration: overline;</p>
		<p class = "test3">text-decoration: line-through;</p>
	</body>
</html>
Пример декорирования текста в CSS (свойство text-decoration).CSS свойства

CSS-свойство text-underline-position определяет,какое из них задается с помощью значения text-decoration.

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

Try it

Syntax

 
/ * Одно ключевое слово * /
text-underline-position: auto;
text-underline-position: under;
text-underline-position: left;
text-underline-position: right;
/ * Несколько ключевых слов * /
text-underline-position: under left;
text-underline-position: right under;
/ * Глобальные значения * /
text-underline-position: inherit;
text-underline-position: initial;
text-underline-position: revert;
text-underline-position: revert-layer;
text-underline-position: unset;

Values

auto

Агент пользователя использует свой собственный алгоритм , чтобы поместить строку в или под алфавитной базовой линией.

from-font

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

auto режим, при этом браузер выбирает подходящую позицию.

under

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

left

В вертикальных режимах письма это ключевое слово заставляет строку располагаться с левой стороны текста. В горизонтальных режимах письма это синоним under .

right

В вертикальных режимах письма это ключевое слово заставляет строку располагаться с правой стороны текста. В горизонтальных режимах письма это синоним under .

auto-pos Non-standard
Experimental

Синоним auto , который следует использовать вместо.

above Non-standard

Заставляет строку быть над текстом. При использовании с восточноазиатским текстом использование ключевого слова auto приведет к аналогичному эффекту.

below Non-standard

Заставляет строку быть ниже текста. При использовании с алфавитным текстом использование ключевого слова auto приведет к аналогичному эффекту.

Formal definition

Initial valueauto
Applies toall elements
Inheritedyes
Computed valueas specified
Animation typediscrete

Formal syntax

text-underline-position =   auto                           |  [ under || [ left | right ] ]

Examples

простой пример

Давайте рассмотрим несколько простых примеров абзацев:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Nullam consectetur ac turpis vel laoreet. Nullam volutpat pharetra lorem, sit
amet feugiat tortor volutpat quis. Nam eget sodales quam. Aliquam accumsan
tellus ac erat posuere.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nullam consectetur ac turpis vel laoreet. Nullam volutpat pharetra lorem, sit
amet feugiat tortor volutpat quis. Nam eget sodales quam. Aliquam accumsan
tellus ac erat posuere.</p>

Наш CSS выглядит следующим образом:

p {
  font-size: 1.5rem;
  text-transform: capitalize;
  text-decoration: underline;
  text-decoration-thickness: 2px;
}
.horizontal {
  text-underline-position: under;
}
.vertical {
  writing-mode: vertical-rl;
  text-underline-position: left;
}

В этом примере мы устанавливаем оба абзаца с толстым подчеркиванием. В горизонтальном тексте мы используем text-underline-position: under; чтобы поставить подчеркивание под всеми нижними нижними элементами.

В тексте с установленным вертикальным writing-mode мы можем затем использовать значения left или right , чтобы подчеркивание появлялось слева или справа от текста по мере необходимости.

Живой пример выглядит следующим образом:

Глобальная установка позиции text-underline-position

Поскольку свойство text-underline-position наследует, а не сбрасывает свойство сокращения text-decoration , может быть целесообразно установить его значение на глобальном уровне. Например, under значение может быть подходящим для документа с большим количеством химических и математических формул, в которых широко используются индексы.

:root {
  text-underline-position: under;
}

Specifications

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

Browser compatibility

DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox для AndroidOpera AndroidSafari на IOSSamsung Internet
text-underline-position

33

12

74

6

20

12. 1

9

4.4.3

33

No

20

No

2.0

above_below

No

12-79

74

6

No

No

No

No

No

No

No

No

auto-pos

No

12-79

No

6

No

No

No

No

No

No

No

No

from-font

87

87

74

No

No

No

87

87

No

No

No

14.0

left_right

71

79

74

No

58

No

71

71

No

50

No

10.

0

under

33

79

74

No

20

12.1

4.4.3

33

No

20

No

2.0

See also

  • Свойство text-decoration является сокращением для установки большинства свойств текстового оформления, в том числе text-decoration-line , text-decoration-color и text-decoration-style . Тем не менее, он не устанавливает text-underline-position .

CSS

  • Пример использования «полной ширины» (японская катакана половинной ширины)

    Японская катакана половинной ширины использовалась для представления 8-битных кодов символов.

  • text-underline-offset

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

  • <time>

    Тип данных CSS <time> представляет значение, выраженное в секундах или миллисекундах.

  • <time-percentage>

    Тип данных CSS <time-percentage> представляет собой значение, которое может быть или или Обратитесь к документации за подробностями <time> и <percentage> отдельных

  • 1
  • …
  • 797
  • 798
  • 799
  • 800
  • 801
  • …
  • 857
  • Next

text-decoration-style — CSS: Каскадные таблицы стилей

Свойство CSS text-decoration-style задает стиль строк, указанный параметром text-decoration-line . Стиль применяется ко всем строкам, заданным с помощью text-decoration-line .

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

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

 /* Значения ключевых слов */
стиль оформления текста: сплошной;
стиль оформления текста: двойной;
стиль оформления текста: пунктирный;
стиль оформления текста: пунктир;
стиль оформления текста: волнистый;
/* Глобальные значения */
стиль оформления текста: наследовать;
стиль оформления текста: начальный;
стиль оформления текста: вернуться;
стиль оформления текста: вернуть слой;
стиль оформления текста: не установлен;

Значения

сплошные

Рисует одну линию.

двойной

Рисует двойную линию.

с точкой

Рисует пунктирную линию.

пунктир

Рисует пунктирную линию.

волнистый

Рисует волнистую линию.

-moz-нет Нестандартный

Не рисует линию. Вместо этого используйте text-decoration-line : none .

Исходное значение сплошной
Применяется ко всем элементам. Это также относится к ::first-letter и ::first-line .
Унаследовано нет
Расчетное значение как указано
Тип анимации дискретный
 text-decoration-style = 
 сплошной | 
 двойной | 
 пунктирная | 
 пунктир | 
 волнистый

Установка волнистой линии подчеркивания

Красная волнистая линия создается следующим образом:

CSS 
 . wavy {
  строка оформления текста: подчеркивание;
  стиль оформления текста: волнистый;
  цвет оформления текста: красный;
}
HTML 
 
Под этим текстом красная волнистая линия.
Результаты
9079
Спецификация
CSS-модуль модуля текста 3
# Текст-декорация в стиле Property

BCDAL TABLES IN TABLESAL TABLESAL IN. Включите JavaScript для просмотра данных.

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

Обнаружили проблему с содержанием этой страницы?

  • Отредактируйте страницу на GitHub.
  • Сообщить о проблеме с содержимым.
  • Просмотрите исходный код на GitHub.

Хотите принять более активное участие?

Узнайте, как внести свой вклад.

Последнее изменение этой страницы: участников MDN.

Свойство CSS text-decoration-color

❮ Предыдущий Полное руководство по CSS Далее ❯


Пример

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

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

Попробуйте сами »

Определение и использование

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

Совет: Также обратите внимание на свойство text-decoration, которое является сокращенным свойством для text-decoration-line, text-decoration-style, text-decoration-color и text-decoration-толщина.

Показать демо ❯

Значение по умолчанию: текущий цвет
Унаследовано: нет
Анимация: да. Читать о анимированном Попробуй
Версия: CSS3
Синтаксис JavaScript: объект .style.textDecorationColor=»красный» Попробуй

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

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

Числа, за которыми следует -moz- или -webkit-, указывают первую версию, которая работала с префиксом.

Недвижимость
цвет текста-декорации 57,0 79,0 36,0
6,0 -мунц-		 12. 1
7.1 -вебкит-		 44,0

Синтаксис CSS

text-decoration-color: color |initial|inherit;

Значения свойств

Значение Описание Играй
цвет Задает цвет оформления текста Демонстрация ❯
начальный Устанавливает для этого свойства значение по умолчанию. Читать о начальный
унаследовать Наследует это свойство от родительского элемента. Читать о унаследовать

Связанные страницы

Учебник CSS: Оформление текста CSS

Ссылка HTML DOM: свойство textDecorationColor

❮ Предыдущая Полное руководство по CSS Следующий ❯


ВЫБОР ЦВЕТА

Лучшие учебники
Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3. CSS
Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебное пособие по Java
Учебник по C++
Учебник по jQuery

Основные ссылки
HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

Top2 Examples Примеры HTML

Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.

Comments
Leave Comment