text-decoration | CSS | WebReference
Добавляет оформление текста в виде его подчёркивания, перечёркивания или линии над текстом. Одновременно можно применить более одного стиля, перечисляя значения через пробел.
Краткая информация
Значение по умолчанию | none |
---|---|
Наследуется | Нет |
Применяется | Ко всем элементам |
Анимируется | text-decoration-line: Нет text-decoration-style: Нет text-decoration-color: Да |
Обозначения
Описание | Пример | |
---|---|---|
<тип> | Указывает тип значения. | <размер> |
A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
[ ] | Группирует значения. | [ crop || cross ] |
* | Повторять ноль или больше раз. | [,<время>]* |
+ | Повторять один или больше раз. | <число>+ |
? | Указанный тип, слово или группа не является обязательным. | inset? |
{A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
# | Повторять один или больше раз через запятую. | <время># |
Значения
- blink
- Устанавливает мигающий текст. Такой текст периодически, примерно раз в секунду исчезает, потом вновь появляется на прежнем месте. Это значение в настоящее время не поддерживается браузерами и осуждается в CSS3, взамен рекомендуется использовать анимацию.
- line-through
- Создает перечёркнутый текст (пример).
- overline
- Линия проходит над текстом (пример).
- underline
- Устанавливает подчёркнутый текст (пример).
- none
- Отменяет все эффекты, в том числе и подчёркивание у ссылок, которое задано по умолчанию.
Песочница
Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.
Пример
<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>text-decoration</title> <style> a { text-decoration: none; /* Убираем подчеркивание у ссылок */ } a:hover { text-decoration: underline; /* Добавляем подчёркивание при наведении курсора мыши на ссылку */ } </style> </head> <body> <p><a href=»page/1.html»>Стратегическое нападение</a></p> </body> </html>
Объектная модель
Объект.style.textDecoration
Примечание
Линия, полученная с помощью значения line-through, в IE7 располагается выше чем в других браузерах; в IE8 эта ошибка исправлена.
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
В таблице браузеров применяются следующие обозначения.
- — свойство полностью поддерживается браузером со всеми допустимыми значениями;
- — свойство браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 02.03.2020
Редакторы: Влад Мержевич
text-decoration-line | CSS | WebReference
Определяет, как должна добавляться декоративная линия к тексту — подчёркивание, перечёркивание, над текстом. Одновременно можно добавлять несколько линий, перечисляя значения через пробел.
Краткая информация
Значение по умолчанию | none |
---|---|
Наследуется | Нет |
Применяется | Ко всем элементам |
Анимируется | Нет |
Синтаксис
text-decoration-line: [ line-through || overline || underline ] | none
Обозначения
Описание | Пример | |
---|---|---|
<тип> | Указывает тип значения. | <размер> |
A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
[ ] | Группирует значения. | [ crop || cross ] |
* | Повторять ноль или больше раз. | [,<время>]* |
+ | Повторять один или больше раз. | <число>+ |
? | Указанный тип, слово или группа не является обязательным. | inset? |
{A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
# | Повторять один или больше раз через запятую. | <время># |
Значения
- line-through
- Создает перечёркнутый текст (пример).
- overline
- Линия проходит над текстом (пример).
- underline
- Устанавливает подчёркнутый текст (пример).
- none
- Отменяет все эффекты, в том числе и подчёркивания у ссылок, которое задано по умолчанию.
Песочница
Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.
Пример
<!DOCTYPE HTML> <html> <head> <meta charset=»utf-8″> <title>text-decoration-line</title> <style> a { text-decoration-line: underline; text-decoration-style: wavy; text-decoration-color: red; } </style> </head> <body> <a href=»page/1.html»>Ссылка с подчёркиванием</a> </body> </html>
Объектная модель
Объект.style.textDecorationLine
Примечание
Firefox до версии 36 поддерживает свойство -moz-text-decoration-line.
Safari поддерживает свойство -webkit-text-decoration-line.
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
В таблице браузеров применяются следующие обозначения.
- — свойство полностью поддерживается браузером со всеми допустимыми значениями;
- — свойство браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 24.04.2020
Редакторы: Влад Мержевич
text-decoration — подчёркнутый и зачёркнутый текст
Поддержка браузерами
12.0+ | 3.0+ | 1.0+ | 1.0+ | 3.5+ | 1.0+ |
Описание
CSS свойство text-decoration
позволяет добавить к тексту такие элементы декора как подчёркивание, надчёркивание и перечёркивание (то есть сделать зачёркнутый текст).
Свойство text-decoration
может принимать одно значение или больше. Чтобы задать сразу несколько значений, их следует разделить пробелами.
Самый часто используемый декор для текста — это подчёркивание. Подчёркнутый текст задаётся значением underline
:
/*делаем подчёркнутый текст*/ span {text-decoration: underline;}
Если вам, наоборот, нужно убрать подчёркивание, например убрать подчеркивание ссылки, заданное по умолчанию, то нужно воспользоваться значением none
:
/*убираем подчёркивание ссылок*/ a {text-decoration: none;}
Часто требуется не просто убрать подчёркивание ссылки в обычном состоянии, а сделать так, чтобы ссылки были подчёркнуты при наведении на них курсора мыши. Чтобы сделать подчёркивание ссылки при наведении, надо воспользоваться псевдо-классом :hover:
/*убираем подчёркивание ссылок*/ a {text-decoration: none;} /*задаём подчёркивание ссылок при наведении*/ a:hover {text-decoration: underline;}
К сожалению цвет линий подчёркивания, надчёркивания и перечёркивания, установленных свойством text-decoration
, будет совпадать с цветом текста, для которого эти линии используются. Чтобы иметь возможность изменять цвет, толщину и стиль подчёркивания или надчёркивания надо воспользоваться CSS свойствами border-top (создаёт линии над элементом) и border-bottom (создаёт линию под элементом).
Примечание: чтобы добавить к тексту подчёркивание или перечёркивание не обязательно использовать CSS, этих же эффектов можно добиться с помощью HTML тегов: <u> (подчёркнутый текст) и <del> (зачёркнутый текст).
Значение по умолчанию: | none |
---|---|
Применяется: | ко всем элементам, а также к псевдо-элементам ::first-letter и ::first-line |
Анимируется: | нет |
Наследуется: | нет |
Версия: | CSS1 |
Синтаксис JavaScript: | object.style.textDecoration=»overline» |
Синтаксис
text-decoration: none|underline|overline|line-through|inherit;
Значения свойства
Значение | Описание |
---|---|
none | Оставляет текст без изменений. |
underline | Определяет горизонтальную линию под текстом. |
overline | Определяет горизонтальную линию над текстом. |
line-through | Определяет линию перечеркивающую текст. |
inherit | Указывает, что значение наследуется от родительского элемента. |
Пример
div {
text-decoration: none;
}
Подчёркнутый текст (свойство text-decoration) | CSS примеры
Отменить подчёркивание у ссылки
Стиль ссылки CSS<style> .raz { text-decoration: none; border: none; } </style> <a href="http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html#stil">Стиль ссылки CSS</a>
Часто применяется при создании ссылок в виде кнопок или в виде пунктов меню, поскольку текстовые ссылки в браузерах подчёркиваются по умолчанию (выделение только цветом создаёт неудобство дальтоникам).
Ссылка подчёркивается при наведении
Стиль ссылки CSS<style> .raz:not(:hover) { text-decoration: none; } </style> <a href="http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html#stil">Стиль ссылки CSS</a>
Пунктирное подчёркивание
Стиль текста CSS<style> .raz { text-decoration: underline; text-decoration-style: dashed; cursor: pointer; } </style> <span>Стиль текста CSS</span>
Сделать линию над и под текстом
Стиль текста CSS<style> .raz { text-decoration-line: underline overline; } </style> <span>Стиль текста CSS</span>
text-decoration-color
-
currentcolor
- цвет черты что у текста
-
transparent
- черта полностью прозрачная (невидимая)
-
red
- цвет черты ключевым словом
-
#ff0000 или #ff0000ff
- цвет черты в формате HEX
-
rgb(255,0,0) или rgba(255,0,0,1)
- цвет черты в формате RGB или RGBA
-
hsl(0,100%,50%) или hsla(0,100%,50%,1)
- цвет черты в формате HSL() или HSLA()
-
initial
currentcolor
-
inherit
- наследует значение родителя
-
unset
currentcolor
Свойство text-decoration-color
не наследуется, применяется ко всем элементам
<style> div { text-decoration: underline; text-decoration-color: currentcolor; } </style> <div>Свойство <code>text-decoration-color</code> не наследуется, применяется ко всем элементам</div>
ВНИМАНИЕ! Нижестоящие свойства имеют плохую поддержку браузерами. Свойства text-underline-offset
text-decoration-width
не реализованы вовсе и потому пока не рассмотрены в статье.
Пропуск выносных частей символов в подчеркиваемом тексте в Google Chrome
Пример подчёркнутого текста<style> .raz { text-decoration: underline; text-decoration-skip: ink; } </style> <span>Пример подчёркнутого текста</span>
Подчёркивание без пропусков выносных частей символов в Safari
Пример подчёркнутого текста<style> .raz { text-decoration: underline; -webkit-text-decoration-skip: none; } </style> <span>Пример подчёркнутого текста</span>
Разница text-decoration
и border
Нижнее подчёркивание, сделанное text-decoration: underline;
| Нижнее подчёркивание, сделанное border-bottom: 1px solid;
|
<table> <tr> <tdvydelit">text-decoration: underline;">Нижнее подчёркивание, сделанное <code>text-decoration: underline;</code> <td><spanvydelit">border-bottom: 1px solid;">Нижнее подчёркивание, сделанное <code>border-bottom: 1px solid;</code></span> </table>
Свойство text-decoration
подходит лучше для подчёркивания многострочного текста (при уменьшении экрана длинное слово также переходит на следующую строку при отзывчивой вёрстке). Свойство border
активно использовали, когда не поддерживались свойства text-decoration-line
, text-decoration-style
и text-decoration-color
.
text-decoration-line | htmlbook.ru
Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
6.0+ |
Краткая информация
Версии CSS
CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
---|---|---|---|
Описание
Определяет, как должна добавляться декоративная линия к тексту — подчеркивание, перечеркивание, над текстом. Одновременно можно добавлять несколько линий, перечисляя значения через пробел.
Синтаксис
text-decoration-line: [ line-through || overline || underline ] | none
Значения
- line-through
- Создает перечеркнутый текст (пример).
- overline
- Линия проходит над текстом (пример).
- underline
- Устанавливает подчеркнутый текст (пример).
- none
- Отменяет все эффекты, в том числе и подчеркивания у ссылок, которое задано по умолчанию.
Пример
HTML5CSS3IECrOpSaFx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>text-decoration-line</title>
<style>
a {
-moz-text-decoration-line: underline;
-moz-text-decoration-style: wavy;
-moz-text-decoration-color: red;
}
</style>
</head>
<body>
<a href="link1.html">Ссылка с подчёркиванием</a>
</body>
</html>
Браузеры
Firefox поддерживает свойство -moz-text-decoration-line.
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
text-decoration-style | CSS | WebReference
Устанавливает стиль декоративной линии, которая добавляется к тексту через свойство text-decoration или text-decoration-line.
Краткая информация
Значение по умолчанию | solid |
---|---|
Наследуется | Нет |
Применяется | Ко всем элементам |
Анимируется | Нет |
Синтаксис
text-decoration-style: solid | double | dotted | dashed | wavy
Обозначения
Описание | Пример | |
---|---|---|
<тип> | Указывает тип значения. | <размер> |
A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
[ ] | Группирует значения. | [ crop || cross ] |
* | Повторять ноль или больше раз. | [,<время>]* |
+ | Повторять один или больше раз. | <число>+ |
? | Указанный тип, слово или группа не является обязательным. | inset? |
{A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
# | Повторять один или больше раз через запятую. | <время># |
Значения
- solid
- Одинарная линия.
- double
- Двойная линия.
- dotted
- Точечная линия.
- dashed
- Пунктирная линия.
- wavy
- Волнистая линия.
Песочница
Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.
Пример
<!DOCTYPE HTML> <html> <head> <meta charset=»utf-8″> <title>text-decoration-style</title> <style> a { text-decoration: underline; text-decoration-style: wavy; text-decoration-color: red; } </style> </head> <body> <a href=»page/1.html»>Ссылка с подчёркиванием</a> </body> </html>
Объектная модель
Объект.style.textDecorationStyle
Примечание
Firefox до версии 36 поддерживает свойство -moz-text-decoration-style.
Safari поддерживает свойство -webkit-text-decoration-style.
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
В таблице браузеров применяются следующие обозначения.
- — свойство полностью поддерживается браузером со всеми допустимыми значениями;
- — свойство браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 24.04.2020
Редакторы: Влад Мержевич
text-украшение — веб-технология для разработчиков
CSS-свойство text-художественное оформление
задает внешний вид декоративных линий в тексте. Это сокращение для текста-декорации-строки
, текста-декорации-цвета
, текста-декорации-стиля
и более нового свойства текста-декорации-толщины
.
Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте https: // github.com / mdn / interactive-examples и отправьте нам запрос на получение.
Украшения текста прорисовываются через элементы текста потомка. Это означает, что если элемент задает текстовое оформление, то дочерний элемент не может удалить оформление. Например, в разметке Этот текст содержит выделенные слова .
, правило стиля p {text-ornament: underline; }
приведет к подчеркиванию всего абзаца. Правило стиля em {text-украшение: нет; }
не вызовет никаких изменений; весь абзац все еще будет подчеркнут.Тем не менее, правило em {text-ornament: overline; }
заставит второе украшение появиться на «некоторых выделенных словах».
Синтаксис
Свойство text-decor указывается как одно или несколько разделенных пробелами значений, представляющих различные свойства декорирования текста.
Значения
-
текстовая декоративная линия
- Устанавливает тип используемого украшения, например,
, подчеркивание
или, сквозное
. -
текст-украшение-цвет
- Устанавливает цвет украшения.
-
текст-стиль украшения
- Устанавливает стиль линии, используемой для оформления, например
сплошная
,волнистая
илипунктирная
. -
текстовое оформление-толщина
- Устанавливает толщину линии, используемой для оформления.
Формальный синтаксис
<'text-украшение-линия'> || <'text-украшение-стиль'> || <'text-украшение-цвет'> || <'text-украшение-толщина'>
Примеры
под { текстовое оформление: подчеркнуто красным; } .над { текстовое оформление: волнистая оверлейная липа; } .линия { текстовое оформление: сквозное; } .plain { текстовое оформление: нет; } .под более { оформление текста: пунктирная линия подчеркивания; } .thick { текстовое оформление: сплошное подчеркивание фиолетового цвета 4px; } .blink { текстовое оформление: мигание; }
Этот текст имеет строку под ним.
Этот текст имеет линию над ним.
В этом тексте есть строка, проходящая через него.
Эта ссылка не будет подчеркнута , так как ссылки вообще есть по умолчанию. Будьте осторожны при удалении оформление текста на якорях, так как пользователи часто зависят от подчеркивание для обозначения гиперссылок.
Этот текст содержит строки над и под ним.
Этот текст имеет очень густое фиолетовое подчеркивание в поддерживающих браузерах.
Этот текст может мигать для вас, в зависимости от браузера, который вы используете.
Технические характеристики
Совместимость браузера
Обновление данных о совместимости GitHubНастольный ПК | Мобильный | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | Android WebView | Chrome для Android | Firefox для Android | Opera для Android | Safari на iOS | Интернет Samsung | |
текстовое оформление | Chrome Полная поддержка 1 | Edge Полная поддержка 12 | Firefox Полная поддержка 1 | IE Полная поддержка 3 | Opera Полная поддержка 3.5 | Safari Полная поддержка 1 | WebView Android Полная поддержка ≤37 | Chrome Android Полная поддержка 18 | Firefox Android Полная поддержка 4 | Opera Android Полная поддержка 10.1 | Safari iOS Полная поддержка 1 | Samsung Интернет Android Полная поддержка 1,0 |
мигает | Chrome Нет поддержки № | Край Нет поддержки № | Firefox Нет поддержки 1 — 23 | IE Нет поддержки № | Opera Нет поддержки 4 — 15 | Safari Нет поддержки № | WebView Android Нет поддержки № | Chrome Android Нет поддержки № | Firefox Android Нет поддержки 4 — 23 | Opera Android Нет поддержки 10.1 — 14 | Safari iOS Нет поддержки № | Samsung Интернет Android Нет поддержки № |
Сокращения | Хром Полная поддержка 57 | Край Полная поддержка 79 | Firefox Полная поддержка 36
| IE Нет поддержки № | Opera Полная поддержка 44 | Safari Полная поддержка 8
| WebView Android Полная поддержка 57 | Chrome Android Полная поддержка 57 | Firefox Android Полная поддержка 36
| Opera Android Полная поддержка 43 | Safari iOS Полная поддержка 8
| Samsung Интернет Android Полная поддержка 7.0 |
текстовое оформление-толщина включено в стенографию | Chrome Нет поддержки № | Край Нет поддержки № | Firefox Полная поддержка 70 | IE Нет поддержки № | Opera Нет поддержки № | Safari Нет поддержки № | WebView Android Нет поддержки № | Chrome Android Нет поддержки № | Firefox Android Нет поддержки № | Opera Android Нет поддержки № | Safari iOS Нет поддержки № | Samsung Интернет Android Нет поддержки № |
Легенда
- Полная поддержка
- Полная поддержка
- Нет поддержки
- Нет поддержки
- Экспериментальный.Ожидайте, что поведение изменится в будущем.
- Экспериментальный. Ожидайте, что поведение изменится в будущем.
- Нестандартный. Ожидайте плохой кросс-браузерной поддержки.
- Нестандартный. Ожидайте плохой кросс-браузерной поддержки.
- Устаревший. Не для использования на новых сайтах.
- Устаревший. Не для использования на новых сайтах.
- Требуется префикс поставщика или другое имя для использования.
- Требуется префикс поставщика или другое имя для использования.
См. Также
,- Товары
- Клиенты
- Случаи использования
- Переполнение стека Публичные вопросы и ответы
- Команды Частные вопросы и ответы для вашей команды
- предприятие Частные вопросы и ответы для вашего предприятия
- работы Программирование и связанные с ним технические возможности карьерного роста
- Талант Нанимать технический талант
- реклама Связаться с разработчиками по всему миру
Загрузка…
- Авторизоваться зарегистрироваться
текущее сообщество
- Переполнение стека Помогите чат
CSS текстовое оформление.
→ HTML → CSS → CSS текстовое оформлениеCSS текстовое оформление. . ,
CSS текстовое оформление
... оформление текста: нет | подчеркивание | зачеркнуто | через строку | наследовать; ...
:
- нет — Подчеркивание
- —
- Overline —
- проходной —
- мигает — ()
текстовое оформление: подчеркивание подчеркивание;
стиль оформления текста:
стиль оформления текста: сплошная | двойная | пунктирная | пунктирная | волнистая;
:
- твердое тело —
- двухместный —
- пунктирная —
- пунктирная —
- волнистых —
цвет текста украшения:
стиль оформления текста: цвет;
цвет RGB, (.html)
, текстовое оформление в стиле текстовое оформление-цвет (2016).
1.
<Голова> <Стиль> .primer1 { текстовое оформление: подчеркивание; } .primer2 { текстовое оформление: зачеркнуто; } .primer1_2 { оформление текста: подчеркивание, подчеркивание; } <Тело> ,
:
2.
<Голова> <Стиль> .primer3 { текстовое оформление: сквозное ;; } <Тело> ,
:
,
3.
<Голова> <Стиль> .primer4 { текстовое оформление: подчеркивание; стиль оформления текста: пунктирная; цвет текста украшения: красный; } <Тело> ,
:
,
-, граница снизу:
: нижняя граница: красный цвет с точками 1px;
текстовое оформление JavaScript:
объект.style.textDecoration = "VALUE"
:
• CSS шрифт
• дисплей css
• CSS преобразование
• HTML
• css transform-origin
• CSS граница
• CSS фон
• CSS переход
• текстовый отступ css
← CSS
,CSS-стиль текста-декорирование
Пример
Набор различных типов стилей оформления текста:
дива {текстовая отделка: подчеркивание;
стиль оформления текста: цельный;
}
div.b
{
текстовая отделка: подчеркивание;
стиль оформления текста: волнистый;
}
div.c
{
текстовая отделка: подчеркивание;
стиль оформления текста: двойной;
}
дел.d
{
строка текста украшения: подчеркивание подчеркивание;
стиль оформления текста: волнистый;
}
Определение и использование
Свойство text-украшение-style
устанавливает стиль оформления текста
(как сплошной, волнистый, пунктирный, пунктирный, двойной).
Подсказка: Также посмотрите на свойство text-украшение, которое является сокращенным свойством для текста-декорации-строки, текста-декорирования-стиля и текст-отделка цвета.
Значение по умолчанию: | твердый |
---|---|
Наследуется: | нет |
Анимационный: | нет. Читайте о анимации |
Версия: | CSS3 |
Синтаксис JavaScript: | объект .style.textDecorationStyle = «волнистый» Попытайся |
Поддержка браузера
Числа в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
Числа, сопровождаемые -moz-, указывают первую версию, которая работала с префиксом.
Недвижимость | |||||
---|---|---|---|---|---|
стиль текста-украшения | 57.0 | Не поддерживается | 36,0 6,0 -moz- | 12,1 | 44,0 |
Синтаксис CSS
стиль оформления текста: сплошная | двойная | пунктирная | пунктирная | волнистая | начальная | наследовать;
Значения недвижимости
Похожие страницы
Учебник по CSS: CSS Text
HTML DOM ссылка: свойство textDecorationStyle
,