Text decoration css: CSS text-decoration property

Leave a Comment / Css / By /

Содержание

text-decoration-style | htmlbook.ru


Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
6.0+

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

Версии CSS

CSS 1CSS 2CSS 2.1CSS 3

Описание

Устанавливает стиль декоративной линии, которая добавляется к тексту через свойство text-decoration или text-decoration-line.

Синтаксис

text-decoration-style: solid | double | dotted | dashed | wavy

Значения

solid
Одинарная линия (пример).
double
Двойная линия (пример).
dotted
Точечная линия (пример).
dashed
Пунктирная линия (пример).
wavy
Волнистая линия.

Пример

HTML5CSS3IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>text-decoration-style</title>
  <style>
   a {
    text-decoration: 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-style.

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

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

CSS свойства

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

CSS свойство text-decoration-style устанавливает стиль декоративной линии, которая добавляется через свойство text-decoration.

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

CSS синтаксис:

text-decoration-style:"solid | double | dotted | dashed | wavy | initial | inherit";

JavaScript синтаксис:

object.style.textDecorationStyle = "double"

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

ЗначениеОписание
solidСплошная декоративная линия. Это значение по умолчанию.
doubleДвойная декоративная линия.
dottedТочечная декоративная линия.
dashedПунктирная декоративная линия.
wavyВолнистая декоративная линия.
initialУстанавливает свойство в значение по умолчанию.
inheritУказывает, что значение наследуется от родительского элемента.

Версия CSS

CSS3

Наследуется

Нет.

Анимируемое

Нет.

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

Обращаю Ваше внимание, что свойство имеет ограниченную поддержку браузерами.

<!DOCTYPE html>
<html>
<head>
<title>Пример использования свойства text-decoration-style</title>
<style> 
p {
text-decoration : underline; /* добавляем декорирование текста для абзацев (линия снизу) */
font-size : 24px; /* устанавливаем размер шрифта для абзацев */
}
.test {
-webkit-text-decoration-style : solid; /* добавляем стиль декоративной линии (с префиксом производителя)*/
-moz-text-decoration-style : solid; /* добавляем стиль декоративной линии (с префиксом производителя) */
text-decoration-style : solid; /* добавляем стиль декоративной линии - сплошная */
}
.test2 {
-webkit-text-decoration-style : double; /* добавляем стиль декоративной линии (с префиксом производителя)*/
-moz-text-decoration-style : double; /* добавляем стиль декоративной линии (с префиксом производителя) */
text-decoration-style : double; /* добавляем стиль декоративной линии - двойная */
}

 .test3 {
-webkit-text-decoration-style : dotted; /* добавляем стиль декоративной линии (с префиксом производителя)*/
-moz-text-decoration-style : dotted; /* добавляем стиль декоративной линии (с префиксом производителя) */
text-decoration-style : dotted; /* добавляем стиль декоративной линии - точечная */
}
.test4 {
-webkit-text-decoration-style : dashed; /* добавляем стиль декоративной линии (с префиксом производителя)*/
-moz-text-decoration-style : dashed; /* добавляем стиль декоративной линии (с префиксом производителя) */
text-decoration-style : dashed; /* добавляем стиль декоративной линии - пунктирная */
}
.test5 {
-webkit-text-decoration-style : wavy; /* добавляем стиль декоративной линии (с префиксом производителя)*/
-moz-text-decoration-style : wavy; /* добавляем стиль декоративной линии (с префиксом производителя) */
text-decoration-style : wavy; /* добавляем стиль декоративной линии - волнистая */
}
</style>
</head>
	<body>
		<p class = "test">text-decoration-style: solid ;</p>
		<p class = "test2">text-decoration-style: double ;</p>
		<p class = "test3">text-decoration-style: dotted ;</p>
		<p class = "test4">text-decoration-style: dashed ;</p>
		<p class = "test5">text-decoration-style: wavy ;</p>
	</body>
</html>

Результат нашего примера:

Пример использования свойства text-decoration-style(устанавливает стиль декоративной линии). CSS свойства

СSS Свойство text-decoration


Пример

Установить различные текстовые оформления для элементы <h2>, <h3>, и <h4>:

h2 {
    text-decoration: overline;
}

h3 {
    text-decoration: line-through;
}

h4 {
    text-decoration: underline;
}

h4 {
    text-decoration: underline overline;
}

Редактор кода »

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

Свойство text-decoration

указывает оформление, добавленное к тексту, и является сокращенным свойством для:

  • text-decoration-line (required)
  • text-decoration-color
  • text-decoration-style
Значение по умолчанию:none currentcolor solid
Унаследованный:нет
Анимируемый:нет, см. раздел отдельные свойства. Прочитать о animatable
Версия:CSS1, renewed in CSS3
JavaScript синтаксис:object.style.textDecoration=»underline» Попробовать

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

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

Свойство
text-decoration1.03.01.01.03.5

CSS Синтаксис

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

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

ЗначениеОписание
text-decoration-lineЗадает тип оформления текста для использования (например, как подчеркивание, надчеркивание, зачеркивание)
text-decoration-colorЗадает цвет оформления текста
text-decoration-styleЗадает стиль оформления текста (сплошной, волнистый, пунктирный, пунктирный-мелкий, двойной)
initialУстанавливает это свойство в значение индекса. Прочитать о initial
inheritНаследует это свойство от родительского элемента. Прочитать о inherit

Примеры

Пример

Добавить больше оформления текста:

h2 {
    text-decoration: underline overline dotted red;
}

h3 {
    text-decoration: underline overline wavy blue;
}

Редактор кода »

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

CSS Учебник: CSS Текс

HTML DOM Справочник: Свойство textDecoration


text-decoration-skip — Веб-технологии для разработчиков

Этот перевод не завершён. Пожалуйста, помогите перевести эту статью с английского

The text-decoration-skip CSS property specifies what parts of the element’s content any text decoration affecting the element must skip over. It controls all text decoration lines drawn by the element and also any text decoration lines drawn by its ancestors.

/* Single keyword */
text-decoration-skip: none;
text-decoration-skip: objects;
text-decoration-skip: spaces;
text-decoration-skip: ink;
text-decoration-skip: edges;
text-decoration-skip: box-decoration;

/* Multiple keywords */
text-decoration-skip: objects spaces;
text-decoration-skip: ink edges box-decoration;

/* Global keywords */
text-decoration-skip: inherit;
text-decoration-skip: initial;
text-decoration-skip: unset;

Синтаксис

Значения

none
Nothing is skipped, i.e. text decoration is drawn for all text content and across atomic inline-level boxes.
objects
The entire margin box of the element is skipped if it is an atomic inline such as an image or inline-block.
spaces
All spacing is skipped, i.e. all Unicode white space characters and all word separators, plus any adjacent letter-spacing or word-spacing.
ink
The text decoration is only drawn where it does not touch or closely approach a glyph. I.e. it is interrupted where it would otherwise cross over a glyph.
edges
The start and end of the text decoration is placed slightly inward (e.g. by half of the line thickness) from the content edge of the decorating box. E.g. two underlined elements side-by-side do not appear to have a single underline. (This is important in Chinese, where underlining is a form of punctuation.)
box-decoration
The text decoration is skipped over the box’s margin, border and padding areas. This only has an effect on decorations imposed by an ancestor; a decorating box never draws over its own box decoration.

Формальный синтаксис

none | [ objects || [ spaces | [ leading-spaces || trailing-spaces ] ] || edges || box-decoration ]

Примеры

HTML content

<p>Hey, grab a cup of coffee!</p>

CSS content

p {
  margin: 0;
  font-size: 3em;
  text-decoration: underline;
  text-decoration-skip: ink;
}

Результат

Спецификации

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

FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support57Нет[2]Нет[1]Нет44Нет[3]
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support5757Нет[1]Нет44Нет[3]

[1] This feature is not implemented yet. See баг 812990.

[2] This feature is not implemented yet. See the related request.

[3] Safari implements a -webkit prefixed version of this property since version 8, though only supports the value none and the non-standard value skip. All other values behave like those two values.

CSS текстовое оформление свойство


Пример

Установить различные декорации текста для элементов

,

и

:

h2 {
text-decor: overline;
}

h3 {
текстовое оформление: сквозное;
}

h4 {
текстовое оформление: подчеркивание;
}

h5 {
текстовое оформление: подчеркивание Overline;
}

Попробуй сам »

Ниже приведены примеры «Попробуйте сами».

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

Свойство text-украшение определяет украшение, добавляемое к тексту, и это стенография Недвижимость для:

  • строка для оформления текста (обязательно)
  • цвет текста украшения
  • стиль текстовой отделки
Значение по умолчанию: нет currentcolor solid
Наследуется: нет
Анимационный: нет, см. Отдельные свойства .Читайте о анимации
Версия: CSS1, обновлено в CSS3
Синтаксис JavaScript: объект .style.textDecoration = «подчеркивание» Попытайся

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

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

Недвижимость
текстовое оформление 1.0 3,0 1,0 1,0 3,5

Синтаксис CSS

текстовое оформление: текстовое оформление-линия текстовое оформление-цвет стиль оформления текста | начальный | наследовать;

Значения недвижимости

Дополнительные примеры

Пример

Добавить текст оформления:

h2 {
текстовое оформление: подчеркивание, подчеркивание, пунктир, красный;
}

h3 {
текстовое оформление: подчеркнутое волнистое подчеркивание синий;
}

Попробуй сам »

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

Учебник по CSS: CSS Text

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


,
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-стиль текста-декорирование


Пример

Набор различных типов стилей оформления текста:

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

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


,

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


Пример

Набор различных типов текстовых декораций:

дива {
строка текста-декорации: наложение;
}

div.b {
строка текста-декорации: подчеркивание;
}

div.c {
текст-оформление-строка: сквозной;
}

div.d {
text-украшение-строка: подчеркивание подчеркивание;
}

Попробуй сам »

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

Свойство text-украшения-line устанавливает тип текстового оформления для использования (например, подчеркивание, подчеркивание, сквозная линия).

Подсказка: Также посмотрите на свойство text-украшение, которое является сокращенным свойством для текста-украшения-строки, текста-украшения-стиля и текст-отделка цвета.

Примечание: Вы также можете объединить несколько значений, например подчеркивание и , для отображения строк как под, так и над текстом.

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

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

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

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

Недвижимость
линия для оформления текста 57,0 Не поддерживается 36,0
6,0 -moz-		 7.1 -webkit- 44,0

Синтаксис CSS

text-художественное оформление-строка: нет | подчеркивание | зачеркнуто | сквозное | начальное | наследовать;

Значения недвижимости

Значение Описание Сыграйте
нет Значение по умолчанию.Определяет отсутствие строки для текста украшения Играть »
подчеркивание Указывает, что строка будет отображаться под текстом Играть »
Overline Указывает, что строка будет отображаться над текстом Играть »
— через Указывает, что строка будет отображаться через текст Играть »
начальный Устанавливает для этого свойства значение по умолчанию.Читать о начальных Играть »
наследуют Унаследует это свойство от родительского элемента. Читать о наследовать

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

Учебник по CSS: CSS Text

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


,

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

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