Штирлиц — Сеть печатных салонов в Перми

Весь комплекс печатных услуг в Перми. Общирная сеть печатных салонов в Перми. Цифровая печать, цветное и черно-белое копирование документов, сканирование документов, ризография в Перми

Text decoration style css: text-decoration-style | htmlbook.ru

Содержание

CSS text decoration style



Пример

Задайте различные типы стилей оформления текста:

div.a {
    text-decoration-line: underline;
    text-decoration-style: solid;
}

div.b {
    text-decoration-line: underline;
    text-decoration-style: wavy;
}

div.c {
    text-decoration-line: underline;
    text-decoration-style: double;
}

div.d {
    text-decoration-line: overline underline;
    text-decoration-style: wavy;
}

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

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

Совет: Кроме того, посмотрите на свойство Text-decoration ие, которое представляет собой свойство с короткими руками для текста, декорирования строк, текста и декора, а также текст-украшение-цвет.

Значение по умолчанию:solid
Inherited:no
Animatable:no. Читайте о animatable
Version:CSS3
Синтаксис JavaScript: object.style.textDecorationStyle=»wavy»

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

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

Номера следуют -МОЗ- укажет первую версию, которая работала с префиксом.

Свойство
text-decoration-style57.0Не поддерживается36.0
6.0 -moz-		Не поддерживается44.0

Синтаксис CSS

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

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

ЗначениеОписание
solidЗначение по умолчанию. Линия будет отображаться в виде одной строки
doubleЛиния будет отображаться как двойная линия
dottedЛиния будет отображаться как пунктирная линия
dashedЛиния будет отображаться как пунктирная линия
wavyЛиния будет отображаться как волнистая линия
initialПрисваивает этому свойству значение по умолчанию. (Читайте о initial)
inheritНаследует это свойство из родительского элемента. (Читайте о inherit)

Похожие страницы

CSS Справочник: CSS Text

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


Свойство 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 свойства

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

Свойство text-decoration устанавливает оформление текста.

В CSS3 оно является сокращенной формой записи для следующих свойств:

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

Если значение одного из них не указано, будет автоматически установлено значение по умолчанию. Text-decoration-line является обязательным.

В спецификации CSS1 text-decoration не считалось сокращенным свойством и имело следующие значения :

  • none
  • underline
  • overline
  • line-through
  • blink
Значение по умолчаниюnone currentColor solid
ПрименяетсяКо всем элементам, а также к ::first-letter и ::first-line
НаследуетсяНет
АнимируемоеНет
ВерсияCSS1, CSS3
DOM синтаксисobject.style.textDecoration = «dashed»;

Синтаксис¶

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

Пример¶

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .a {
      text-decoration: overline;
      }
      .b {
      text-decoration: line-through;
      }
      .c {
      text-decoration: underline;
      }
      .d {
      text-decoration: underline overline;
      }
    </style>
  </head>
  <body>
    <h3>Пример свойства text-decoration</h3>
    <p>Lorem Ipsum - это текст-"рыба"...</p>
    <p>Lorem Ipsum - это текст-"рыба"...</p>
    <p>Lorem Ipsum - это текст-"рыба"...</p>
    <p>Lorem Ipsum - это текст-"рыба"...</p>
  </body>
</html>
Попробуйте сами!

Пример, где указан цвет текста:

Пример¶

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      p {
      text-decoration: underline;
      -webkit-text-decoration-color: #1c87c9; /* Safari */  
      text-decoration-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h3>Пример свойства text-decoration</h3>
    <p>Lorem Ipsum - это текст-"рыба"...</p>
  </body>
</html>
Попробуйте сами!

В данном примере использовано расширение -webkit- для Safari.

Пример, где указан стиль текста:

Пример¶

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      div {
      text-decoration-line: underline;
      }
      div.t1 {
      text-decoration-style: dotted;
      }
      div.t2 {
      text-decoration-style: wavy;
      }
      div.t3 {
      text-decoration-style: solid;
      }
      div.t4 {
      text-decoration-line: overline underline;
      text-decoration-style: double;
      }
    </style>
  </head>
  <body>
    <h3>Пример свойства text-decoration</h3>
    <div>Lorem Ipsum - это текст-"рыба"...</div>
    <br>
    <div>Lorem Ipsum - это текст-"рыба"...</div>
    <br>
    <div>Lorem Ipsum - это текст-"рыба"...</div>
    <br>
    <div>Lorem Ipsum - это текст-"рыба"...</div>
  </body>
</html>
Попробуйте сами!

Значения¶

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

Свойство text-decoration-style — тип линии у текста

Свойство text-decoration-style меняет тип линии над текстом: одиночная линия, двойная, в виде точек, в виде тире, волнистая линия.

Свойство следует использовать совместно со свойствами text-decoration-line и text-decoration-color. Эти свойства расширяют действие свойства text-decoration, являясь более продвинутыми аналогами.

Синтаксис

селектор { text-decoration-line: solid | double | dotted | dashed | wavy; }

Значения

ЗначениеОписание
solidСплошная линия.
doubleДвойная линия.
dottedЛиния в виде точек.
dashedЛиния в виде тире.
wavyВолнистая линия.

Значение по умолчанию: solid.

Пример . Значение wavy

Сейчас текст станет подчеркнутым красной волнистой линией:

<div> Lorem ipsum dolor sit amet. </div> #elem { text-decoration-style: wavy; text-decoration-color: red; text-decoration-line: underline; }

:

Пример . Значение dotted

Сейчас текст станет подчеркнутым красной линией в виде точек:

<div> Lorem ipsum dolor sit amet. </div> #elem { text-decoration-style: dotted; text-decoration-color: red; text-decoration-line: underline; }

:

Пример . Значение double

Сейчас текст станет перечеркнутым красной двойной линией:

<div> Lorem ipsum dolor sit amet. </div> #elem { text-decoration-style: double; text-decoration-color: red; text-decoration-line: line-through; }

:

Использование «text-decoration-color» не работает — CodeRoad



Я хочу раскрасить текстовое оформление. Я получил учебник от w3schools

И попробовал это сделать

text-decoration: underline;
text-decoration-color: #dddddd;

Но это не работает. Разве это не справедливо? Есть ли другой способ раскрасить подчеркивание?

css
Поделиться Источник Ranjit     31 августа 2017 в 08:05

4 ответа

  • ” text-decoration “и”: after » псевдо-элемент, revisited

    Я переспрашиваю этот вопрос , потому что его ответы не сработали в моем случае. В моей таблице стилей для printed media я хочу добавить url после каждой ссылки, используя псевдокласс :after . a:after { content: < attr(href) >; text-decoration: none; color: #000000; } В Firefox (и, вероятно,…

  • jquery. css(‘text-decoration’) не работает от родителей

    Я должен получить необходимое свойство css элемента (свойства могут быть унаследованы от его родителя) Стандарт jquery. css() может это сделать. Так что у меня есть такой HTML: <div id=container> some text<br> <span id=some>Our element</span> <br> some text…


12

text-decoration-color имеет минимальную поддержку браузера

Вместо этого вы можете использовать что-то вроде промежутка, чтобы перекрасить текст:

p {
  color: red;  /* colour of underline */
  text-decoration: underline;
}

span {
  color: black; /* original colour of p */
}
<p><span>underline is red, text is black</span></p>

Поделиться Pete     31 августа 2017 в 08:09


2

Ваш код, скорее всего, повлияет на другой класс

p {
    text-decoration: underline;
    text-decoration-color: red!important;
}
<p>test</p>

Поделиться Farhad Bagherlo     31 августа 2017 в 08:08


1

Обновление: он работает на Safari & Safari iOS с префиксом -webkit- !

p {
    text-decoration: underline;
    text-decoration-color: red;
    -webkit-text-decoration-color: red;
}
<p>test</p>

Поделиться Ossip     22 марта 2019 в 18:09

  • Удаление подчеркивания в URL [text-decoration: none; не работает]

    Я хочу удалить подчеркивание. Я уже поставил text-decoration: none; . Однако это не работает. Вот DEMO . HTML <a href=./index.php?sign_in=1> <div id=signup_button> Sign up </div> </a> CSS #signup_button { position: relative; max-width: 206px; min-height: 20px; max-height:…

  • css «text-decoration: none» не работает

    Я не понимаю, почему text-decoration: none не работает в следующем коде. Он не может удалить подчеркивание слова yes . .button { color: black; text-decoration: none; } body { font-family: ‘Roboto’, ‘Microsoft JhengHei’, sans-serif; font-size: 24px; } <a href=www.example.com> <div…


0

Следующий метод для добавления под строкой в вашей строке.

1) Вы можете использовать текстовое оформление, чтобы добавить подчеркивание в нижней части строки, как показано ниже. Пожалуйста, добавьте свой CSS try в этот путь.

Следующие демо-версии хороши для работы со мной.

<style type="text/css">
.underline 
{   
    text-decoration: underline;
    text-decoration-color: red;
    /*color: blue;
    border-bottom: 1px solid red;*/
}
</style>

<span>hello world</span>

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

<style type="text/css">
.underline 
{   
    /*text-decoration: underline;
    text-decoration-color: red;*/
    color: blue;
    border-bottom: 1px solid red;
}
</style>

<span>hello world</span>

Поделиться AddWeb Solution Pvt Ltd     31 августа 2017 в 09:33

Похожие вопросы:


Text-decoration-color не применяется

Действительно простая проблема, но она меня расстраивает. В навигационной панели для страницы я хочу, чтобы она была обычным цветом, а затем имела другой цветовой эффект наведения. При осмотре…


Text-decoration: line-through не работает в IE?

У меня есть это .strike{ text-decoration: line-through; } и каждый раз, когда вызывается мой disable() , он отключает <option> s из моего <select> и добавляет этот класс, но он не…


‘Text-decoration: none’ не работает в Bootstrap

При наведении курсора мои текстовые ссылки имеют подчеркивание. Это значение по умолчанию в Bootstrap. Я хочу сохранить это, если только ссылка не находится в пределах определенного div. Код,…


” text-decoration “и”: after » псевдо-элемент, revisited

Я переспрашиваю этот вопрос , потому что его ответы не сработали в моем случае. В моей таблице стилей для printed media я хочу добавить url после каждой ссылки, используя псевдокласс :after ….


jquery. css(‘text-decoration’) не работает от родителей

Я должен получить необходимое свойство css элемента (свойства могут быть унаследованы от его родителя) Стандарт jquery. css() может это сделать. Так что у меня есть такой HTML: <div…


Удаление подчеркивания в URL [text-decoration: none; не работает]

Я хочу удалить подчеркивание. Я уже поставил text-decoration: none; . Однако это не работает. Вот DEMO . HTML <a href=./index.php?sign_in=1> <div id=signup_button> Sign up </div>…


css «text-decoration: none» не работает

Я не понимаю, почему text-decoration: none не работает в следующем коде. Он не может удалить подчеркивание слова yes . .button { color: black; text-decoration: none; } body { font-family: ‘Roboto’,…


CSS: text-decoration не удается удалить overline

Я пытаюсь удалить текстовое оформление из первой буквы с помощью селектора p::first-letter . Но по какой-то неизвестной причине я не могу этого сделать. p::first-line { font-weight: bold;…


text-decoration-color не работает на IE

Есть ли какая-нибудь альтернатива для text-decoration-color для IE? Я гуглю, но у меня нет никакого решения для этого. Заранее спасибо.


‘text-decoration-line: подчеркивание’ не работает

В файле css я дал код для подчеркивания моего текста с помощью, text-decoration-line: подчеркивание Но это не работает. Он даже не работает для сквозной линии. Я использовал этот стиль для тега h2 и…

Ссылки в CSS (text-decoration, :hover, :active, :visited, :link)

По умолчанию практически во всех браузерах ссылки выглядят одинаково: они подчёркнуты чертой и имеют синий цвет. Все эти свойства можно переопределить через CSS. Для начала попробуем изменить положение черты, используя свойство text-decoration, которое может принимать значения «underline», «overline», «line-through», «none». Рассмотрим последовательно эффект от каждого.

Рассмотрим ссылку: 

<a href="/">MouseDC.ru</a>
Так будет выглядеть обычная ссылка на сайте, на котором нет никаких CSS правил (дизайн ссылки задаётся полностью браузером):
MouseDC.ru
overline ставит линию над текстом
<a href="/">MouseDC.ru</a>
результат:
MouseDC.ru
line-through перечёркивает текст посередине
<a href="/">MouseDC.ru</a>
результат:
MouseDC.ru
underline подчёркивает текст снизу (это значение по умолчанию в браузерах)
<a href="/">MouseDC.ru</a>
результат:
MouseDC.ru
none убирает подчёркивание:
<a href="/">MouseDC.ru</a>
результат:
MouseDC.ru

Состояния ссылок

Браузеры умеют понимать состояние ссылок. Этих состояний может быть несколько. Их можно отследить и задать им CSS свойства. Для этого используются псевдоклассы: «:hover» — это псевдокласс, который указывает на состояние, при котором на ссылку навели курсор мыши. Пример использования в CSS коде:
a:hover{
   font-size: 30px;
   color: red;
}

Псевдокласс «:hover» есть не только у ссылок, но и у любых других тегов. Этот псевдокласс часто применяется для создания выпадающих меню, которые появляются при наведении мышкой на пункт-родитель.

«:active» — указывает на то, что на элемент кликнули и зажали кнопку мыши, но ещё не отпустили.

«:visited» — указывает на то, что пользователь уже переходил по этой ссылке.

«:link» — псевдокласс по умолчанию. Указывает на ссылку, которую ещё не посетили.

К примеру, если вы уже переходили по ссылке на странице, то она изменяет свой цвет. Если поднести курсор мыши к ссылке, то она окрасится в другой цвет. Если кликнуть на ссылку и зажать кнопку мыши, то . Свойства таких ссылок можно задать через CSS. Попробуем это сделать, на примере использования псевдокласса «:visited«. 

a:visited {
   color: green;
}

Настроить подчеркивание с помощью оформления текста в CSS

Хотя в этом руководстве содержится контент, который, по нашему мнению, принесет большую пользу нашему сообществу, мы еще не тестировали или отредактировал его, чтобы обеспечить безошибочное обучение. Это в нашем списке, и мы над этим работаем! Вы можете помочь нам, используя кнопку «сообщить о проблеме» в нижней части руководства.

Говорят, хороших вещей приходят к тем, кто ждет , и это оказывается правдой, когда дело доходит до оформления текста в сети.Модуль оформления текста CSS уровня 3 определяет несколько отличных новых способов украшения текста в Интернете, и браузеры, наконец, начинают их хорошо поддерживать. Времена использования border-bottom вместо правильного подчеркивания текста, чтобы получить другой цвет подчеркивания, наконец, могут прийти в норму.

Результаты могут отличаться: поддержка все еще ограничена, поэтому примеры в этом сообщении могут отображаться некорректно в зависимости от используемого вами браузера.

текст-оформление

Свойство text-decoration раньше предназначалось только для выбора между значениями none, underline, overline и line-through, но с новой рекомендацией оно становится сокращением для новых text-decoration-color, text-decoration-style и свойства text-decoration-line.Например, вот цветное двойное подчеркивание:

  .fancy {
  -webkit-text-decoration: двойное подчеркивание горячим розовым цветом;
  оформление текста: двойное подчеркивание горячим розовым цветом;
}

Необычный подчерк

текст-украшение-цвет

Работает так, как вы можете себе представить. Наконец-то появился способ изменить цвет оформления текста!

стиль оформления текста

text-decoration-style используется для определения типа оформления текста, и новая рекомендация содержит два новых значения: double и wavy:

 .волнистый {
  оформление текста: подчеркивание;
  -webkit-text-decoration-color: лосось;
  текст-украшение-цвет: лосось;
  -webkit-text-decoration-style: волнистый;
  стиль оформления текста: волнистый;
}

Волнистое украшение

текст-украшение-строка

text-decoration-line принимает значения подчеркивания, overline, line-through и blink (однако мигание устарело):

  .strike {
  -webkit-текст-украшение-цвет: красный;
  цвет оформления текста: красный;
  -webkit-text-decoration-line: сквозная строка;
  текст-украшение-строка: сквозная строка;
}

Ударь этот

текст-украшение-пропустить

С помощью text-decoration-skip мы можем избежать того, чтобы украшение перешагнуло через части элемента, к которому оно применяется.Возможные значения: объекты, пробелы, чернила, края и украшение коробки.

  • ink: И, наконец, способ предотвратить наложение элементов нижнего положения глифов при оформлении текста:
  .ink {
  -webkit-text-decoration: сплошное темно-бирюзовое подчеркивание;
  оформление текста: темно-бирюзовое однотонное подчеркивание;
  -webkit-text-decoration-skip: чернила;
  текст-украшение-пропустить: чернила;
}

Бегемот

  • объекты: текстовое оформление пропускает элементы, отображаемые в виде встроенного блока.Это также начальное значение:
    • .
  

  Становится  очень  модным


  
  .super {
  -webkit-text-decoration: Перу сплошная линия поверх;
  текст-оформление: перу сплошная линия;
  -webkit-text-decoration-skip: объекты;
  текст-украшение-пропуск: объекты;
}

Очень необычное

Остальные значения еще не поддерживаются браузерами:

  • пробелов: в оформлении пропущены пробелы и знаки препинания.
  • кромок: создает зазор, когда два элемента с текстовым оформлением находятся рядом друг с другом.
  • box-decoration: украшение пропускает любые унаследованные поля, отступы или границы.

текст-подчеркивание-позиция

С помощью text-underline-position у нас есть еще один способ управлять позиционированием оформления текста по отношению к глифам. Возможные значения: auto, under, left и right.

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

 .auto {
  -webkit-text-decoration: синее сплошное подчеркивание;
  оформление текста: грифельно-синее сплошное подчеркивание;
  -webkit-текст-подчеркивание-позиция: авто;
  положение подчеркивания текста: авто;
}

Бегемот

… а теперь обратите внимание, как нижняя граница располагается после нижних элементов текста:

  .under {
  -webkit-text-decoration: синее сплошное подчеркивание;
  оформление текста: грифельно-синее сплошное подчеркивание;
  -webkit-text-underline-position: под;
  текст-подчеркивание-позиция: под;
}

Бегемот

Значения left и right для text-underline-position используются для управления оформлением текста в режимах вертикального письма.

А теперь продолжайте и поразите нас необычным оформлением текста!

Поддержка браузера: Могу ли я использовать текстовое оформление с 2020 года? показывает, что 94% браузеров по всему миру хотя бы частично поддерживают это свойство.

CSS Text Decoration: Пошаговое руководство

Когда вы разрабатываете текст для веб-страницы, вы можете захотеть добавить в текст украшения. Например, вы можете захотеть добавить подчеркивание к важной работе или линию через старый текст.

Найди свой матч на тренировочном лагере