Css underline text: text-decoration-style — CSS: Cascading Style Sheets
11.04.2023
Разное
Свойство 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-decoration | 1.0 | 1.0 | 3.5 | 1.0 | 3.0 | 12.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; /* устанавливаем цвет шрифта */ } .Пример декорирования текста в CSS (свойство text-decoration).CSS свойства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-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 Синоним
auto
, который следует использовать вместо.-
above
Non-standard Заставляет строку быть над текстом. При использовании с восточноазиатским текстом использование ключевого слова
auto
приведет к аналогичному эффекту.-
below
Non-standard Заставляет строку быть ниже текста. При использовании с алфавитным текстом использование ключевого слова
auto
приведет к аналогичному эффекту.
Formal definition
Initial value | auto |
---|---|
Applies to | all elements |
Inherited | yes |
Computed value | as specified |
Animation type | discrete |
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
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox для Android | Opera Android | Safari на IOS | Samsung Internet | |
text-underline-position | 33 | 12 | 74 | 6 | 20 | 12. 9 | 4.4.3 | 33 | No | 20 | No | 2.0 |
above_below | No | 12-79 | 74 | 6 | 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. |
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
Под этим текстом красная волнистая линия.
Результаты
Спецификация |
---|
CSS-модуль модуля текста 3 # Текст-декорация в стиле Property | 9079
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.![]() 7.1 -вебкит- | 44,0 |
Синтаксис CSS
text-decoration-color: color |initial|inherit;
Значения свойств
Значение | Описание | Играй |
---|---|---|
цвет | Задает цвет оформления текста | Демонстрация ❯ |
начальный | Устанавливает для этого свойства значение по умолчанию. Читать о начальный | |
унаследовать | Наследует это свойство от родительского элемента. Читать о унаследовать |
Связанные страницы
Учебник CSS: Оформление текста CSS
Ссылка HTML DOM: свойство textDecorationColor
❮ Предыдущая Полное руководство по CSS Следующий ❯
ВЫБОР ЦВЕТА
Лучшие учебники
Учебное пособие по HTMLУчебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3.

Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебное пособие по Java
Учебник по C++
Учебник по jQuery
Основные ссылки
HTML ReferenceCSS 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 оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения.
Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.
Leave a Comment