Css text decoration underline: text-decoration | CSS | WebReference

Содержание

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 ExplorerChromeOperaSafariFirefoxAndroid
iOS
6.0+

Краткая информация

Версии CSS

CSS 1CSS 2CSS 2.1CSS 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
Полная поддержка 36
Частичная поддержка 6
IE Нет поддержки Opera Полная поддержка 44 Safari Полная поддержка 8
Полная поддержка 8
с префиксом Реализуется с префиксом поставщика: -webkit-
WebView Android Полная поддержка 57 Chrome Android Полная поддержка 57 Firefox Android Полная поддержка 36
Полная поддержка 36
Частичная поддержка 6
Opera Android Полная поддержка 43 Safari iOS Полная поддержка 8
Полная поддержка 8
с префиксом Реализовано с префиксом поставщика: -webkit-
Samsung Интернет Android Полная поддержка 7.0
текстовое оформление-толщина включено в стенографию Chrome Нет поддержки Край Нет поддержки Firefox Полная поддержка 70 IE Нет поддержки Opera Нет поддержки Safari Нет поддержки WebView Android Нет поддержки Chrome Android Нет поддержки Firefox Android Нет поддержки Opera Android Нет поддержки Safari iOS Нет поддержки Samsung Интернет Android Нет поддержки

Легенда

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

См. Также

,
CSS-текст подчеркивания подчеркивания цвета — Переполнение стека Переполнение стека
  1. Товары
  2. Клиенты
  3. Случаи использования
  1. Переполнение стека Публичные вопросы и ответы
  2. Команды Частные вопросы и ответы для вашей команды
  3. предприятие Частные вопросы и ответы для вашего предприятия
  4. работы Программирование и связанные с ним технические возможности карьерного роста
  5. Талант Нанимать технический талант
  6. реклама Связаться с разработчиками по всему миру

Загрузка…

  1. Авторизоваться зарегистрироваться
  2. текущее сообщество

    • Переполнение стека Помогите чат
.

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


,
Оставить комментарий

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *