Dashed text decoration: text-decoration-style | htmlbook.ru

17.07.2021 Разное

Содержание

Свойство 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-style — text-decoration-style CSS свойство задает стиль линий , указанных text-decoratio

text-decoration-style CSS свойство задает стиль линий , указанных text-decoration-line . Стиль применяется ко всем строкам, которые установлены с помощью text-decoration-line .

Если указанное оформление имеет конкретное семантическое значение, такое как прямая линия, означающая, что некоторый текст был удален, авторам рекомендуется обозначать это значение с помощью HTML-тега, например

<del> или <s> . Так как в некоторых случаях браузеры могут отключить стилизацию, семантическое значение не исчезнет в такой ситуации.

При одновременной установке нескольких свойств декорирования линий может быть удобнее использовать вместо этого свойство сокращения text-decoration .

Syntax

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


text-decoration-style: inherit;
text-decoration-style: initial;
text-decoration-style: unset;

Values

solid: Рисует одну линию.
double: Рисует двойную линию.
dotted: Рисует пунктирную линию.
dashed: Рисует пунктирную линию.
wavy: Рисует волнистую линию.
-moz-none: Не рисует линии. Используйте text-decoration-line : none .

Formal definition

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

solid | double | dotted | dashed | wavy

Examples

Setting a wavy underline

.example {    
       -moz-text-decoration-line: underline;
       -moz-text-decoration-style: wavy;
       -moz-text-decoration-color: red;    
    -webkit-text-decoration-line: underline;
    -webkit-text-decoration-style: wavy;
    -webkit-text-decoration-color: red;
}

CSS

 .wavy { 
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: red;
}

HTML

<p>This text has a wavy red line beneath it.</p>

Results

Specifications

	Desktop
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
`text-decoration-style`	57	79	36 36 6 — 39 Prefixed Префикс Реализовано с префиксом производителя:-moz-	No	44	12.1 12.1 8 Prefixed Префикс Реализовано с префиксом производителя:-webkit-
`wavy`	57	79	6	No	44	8

	Mobile
	Android веб-просмотр	Хром для Android	Firefox для Android	Опера для Android	Safari on iOS	Samsung Интернет
`text-decoration-style`	57	57	36 36 6 — 39 Prefixed Префикс Реализовано с префиксом производителя:-moz-	43	12.2 12.2 8 Prefixed Префикс Реализовано с префиксом производителя:-webkit-	7.0
`wavy`	57	57	6	43	8	7.0

См.также

При одновременной установке нескольких свойств декорирования линий может быть удобнее использовать вместо этого свойство сокращения text-decoration .

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

От автора: Скорее всего, вы уже знакомы с данным свойством. Например, большинство браузеров, по умолчанию, задают с помощью данного свойства подчеркивание у ссылок (text-decoration: underline;), которое мы можем отменить вот так: text-decoration: none;.

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

Для данного свойства можно задать несколько значений

Например:

a { text-decoration: underline overline; }

a {

text-decoration: underline overline;

}

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Посмотрите описание данной возможности в Альманахе. Если быть точнее, то в данном случае происходит добавление нескольких значений для дополнительного свойства text-decoration-line.

Вы можете управлять цветом данного свойства

По умолчанию для данного свойства задается цвет, указанный для текста (в свойстве color). Но вы можете изменить это:

a { text-decoration-color: #f06d06; }

a {

text-decoration-color: #f06d06;

}

Посмотрите описание данной возможности в Альманахе.

Примечание: Браузерный «движок» Gecko отображает подчеркивание под нижним выносным элементом букв (подстрочным элементом литеры), а WebKit/Blink – над:

Слева показан пример в браузере Chrome, справа – в Firefox.

Обычно цветные подчеркивания реализуются с помощью свойства border, а не text-decoration. Для каждой из границ элемента может быть указан индивидуальный цвет, толщина, и позиционируются границы значительно лучше.

Но есть вещи, которые нельзя сделать с помощью границ, например…

Вы можете менять стиль данного свойства

Вы просто не сможете сделать также с помощью границ!

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

a { text-decoration-style: wavy; }

a {

text-decoration-style: wavy;

}

Посмотрите описание данной возможности в Альманахе.

А можно сделать и еще лучше

Есть определенное желание сделать подчеркивание текста лучше. Например, пропускать подчеркивание нижних выносных элементов у букв для улучшения читабельности подчеркнутого текста:

Такая возможность будет доступна благодаря свойству text-decoration-skip, хотя она пока не реализована ни в одном из браузеров. А пока мы можем указать для подчеркивания более мягкий и менее контрастный цвет. Здесь можно применить rgba():

И, кстати, пропуск нижних выносных элементов у букв – это всего лишь одна из возможностей. Вы также сможете пропускать некоторые строчные элементы, пробелы и управлять подчеркиванием по краям текста.

Примечание: Похоже, что в Safari/iOS пропуск нижних выносных элементов у букв задан по умолчанию.

Если вы хотите отменить данное поведение, воспользуйтесь следующей записью: -webkit-text-decoration-skip: none;.

Тестирование

Из-за разной степени браузерной поддержки, некоторые (или все) демо-примеры могут не сработать в вашем браузере.

Так что да! Даже такие простые вещи, которые мы воспринимаем, как должное, могут со временем меняться в CSS царстве.

Автор: Chris Coyier

Источник: //css-tricks.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Как добавить пунктирное подчеркивание под текстом HTML

Как вы подчеркиваете текст html так, чтобы линия под текстом была пунктирной, а не стандартной? Предпочтительно, я хотел бы сделать это без использования отдельного файла CSS. Я новичок в html.

html underline
Поделиться Источник parap 06 марта 2013 в 16:19
9 ответов

137

Это невозможно без CSS. На самом деле тег <u> просто добавляет text-decoration:underline к тексту с помощью встроенного в браузер CSS.
Вот что вы можете сделать:
<html> <head>  <style type="text/css"> u { border-bottom: 1px dotted #000; text-decoration: none; } </style> </head>  </html>
Поделиться Alfred Xing 06 марта 2013 в 16:24

30

Используйте следующие коды CSS…
text-decoration:underline; text-decoration-style: dotted;
Поделиться Shakeel Ahmed 13 июля 2016 в 07:53

15

Без CSS вы в основном застряли с использованием тега изображения. В основном сделайте изображение текста и добавьте подчеркивание. Это в основном означает, что ваша страница бесполезна для чтения с экрана.
С CSS все просто.
HTML:
<u>I like cheese</u>
CSS:
u.dotted{ border-bottom: 1px dashed #999; text-decoration: none; }
Пример
Пример страницы
<!DOCTYPE HTML> <html> <head> <style> u.dotted{ border-bottom: 1px dashed #999; text-decoration: none; } </style> </head> <body> <u>I like cheese</u> </body> </html>
Поделиться epascarello 06 марта 2013 в 16:25

9

Элемент HTML5 может давать пунктирное подчеркивание, поэтому Нижний текст будет иметь пунктирную линию, а не обычное подчеркивание. А атрибут title создает подсказку для пользователя при наведении курсора на элемент:
NOTE: пунктирная граница / подчеркивание по умолчанию отображается в Firefox и Opera, но IE8, Safari и Chrome нуждаются в строке CSS:
<abbr title="Hyper Text Markup Language">HTML</abbr>
Поделиться Fatima Waheed 11 июля 2016 в 14:14

4

Если содержимое содержит более 1 строки, добавление нижней границы не поможет. В этом случае вам придется использовать,
text-decoration: underline; text-decoration-style: dotted;
Если вы хотите больше передышки между текстом и строкой, просто используйте,
text-underline-position: under;
Поделиться Darshana Gunawardana 09 октября 2018 в 10:12

3

Переформатировал ответ на @epascarello :
u.dotted { border-bottom: 1px dashed #999; text-decoration: none; }
<!DOCTYPE html> <u>I like cheese</u>
Поделиться anatoly techtonik 26 декабря 2015 в 06:54

0

Вы можете использовать border bottom с опцией dotted .
border-bottom: 1px dotted #807f80;
Поделиться Neel 24 января 2020 в 07:16

0

Вы можете попробовать этот метод:
<h3>Hello World!</h3>
Обратите внимание, что без text-underline-position: under; у вас все равно будет пунктирное подчеркивание, но это свойство даст ему больше передышки.
Это предполагает, что вы хотите встроить все в файл HTML с помощью встроенного стиля, а не использовать отдельный файл CSS или тег.
Поделиться Mona Jalal 05 февраля 2020 в 00:12

-2

Это не невозможно без CSS. Например, как элемент списка:
<li></li>
Поделиться Davington III 30 апреля 2015 в 09:03
Похожие вопросы:

Как создать двойное пунктирное подчеркивание для текста в css
Как мы можем создать двойное пунктирное подчеркивание в CSS ? Я использую свойство border-bottom. border-bottom: 1px dotted #oof Но появляется только одно пунктирное подчеркивание. Как мы можем…

IE7 Nivo Slideshow странное пунктирное подчеркивание на подписи
У меня есть слайд-шоу Nivo, работающее на сайте. Когда я тестирую в страшном IE7, он показывает пунктирное подчеркивание на подписях. Я устал искать преступника в своей стихии, но пока мне не везет….

Как удалить синее пунктирное подчеркивание предложения в TextView из Apple keyboard dictation?
Если пользователи используют Apple dictation с мягкой клавиатуры, то после завершения их voice input. Он показывает синее пунктирное подчеркивание предложения для коррекции голоса. Но я не могу от…

CSS эффект при наведении курсора (пунктирное подчеркивание + изменение цвета текста)
Я совершен CSS нуб Не могли бы вы уделить мне минутку и помочь создать пунктирное подчеркивание (с пробелом) с изменением цвета текста при наведении мыши? Я был бы очень признателен вам за помощь!…

Как сделать строку под текстом без текстового оформления: подчеркивание?
Мне нужно добавить строку под текстом, без текстового оформления: подчеркивание; иначе как сделать пользовательское пространство между текстом и строкой. Что мы делаем

Пунктирное подчеркивание в TextView с использованием SpannableString в Android
Я хочу пунктирное подчеркивание ниже SpannableString Например вот моя струна Hello, How are you? Я хочу разработать пунктирное подчеркивание ниже How слова, так как же его установить? Если я добавлю…

Android пунктирное подчеркивание остается в середине textview
Я хочу показать пунктирное подчеркивание под textview, ниже приведены мои коды <TextView android:id=@+id/contact_num android:layout_width=wrap_content android:layout_height=wrap_content…

Пунктирное подчеркивание TextView не переносится на следующую строку с помощью SpannableString в Android
Я сделал пунктирное подчеркивание textview, используя это пунктирное подчеркивание в TextView, используя SpannableString в Android . Но пунктирное подчеркивание textview не переносится на следующую…

Получение: после добавить подчеркивание только под текстом, а не весь контейнер
Я хочу, чтобы заголовки подчеркивались методом :after . Я заставляю его работать частично. Чего я не могу понять, так это как сделать так, чтобы подчеркивание ( after ) находилось только под текстом…

CSS как установить автоматическую длину подчеркивания doth под текстом
в CSS я хочу иметь подчеркивание как пунктирное под моим текстом, но текст может быть коротким или длинным по вводу пользователя, а пунктирное подчеркивание должно быть нарисовано до конца строки…
Как убрать подчеркивание ссылки в HTML и CSS
По умолчанию, браузеры применяют определенные наборы стилей CSS к конкретным HTML-элементам. Для гиперссылок эти стили по умолчанию определяют, что любой текст ссылки отображается синим цветом с CSS underline. Это делается для того, чтобы посетители сайта могли легко определить, что данный текст представляет собой ссылку. Многие веб-дизайнеры не уделяют внимания этим стилям по умолчанию, особенно это касается подчеркивания. К счастью, CSS позволяет легко изменить внешний вид гиперссылок.
Подчеркнутый текст может сложнее читаться, чем обычный. Многие дизайнеры просто не уделяют этому должного внимания. Но можно полностью удалить подчеркивание. Для этого мы будем использовать свойство CSS text-decoration. Вот CSS-код, с помощью которого это можно сделать:
a { text-decoration: none; }
С помощью этой строки кода можно удалить CSS underline style всех ссылок.
Нравится вам подчеркивание или нет, нельзя отрицать того, что оно позволяет указать на связь текста со ссылкой. Если убрать подчеркивание или изменить синий цвет ссылок, то нужно предоставить взамен стили, которые позволяют выделить текст ссылок. Это сделает взаимодействие посетителей с сайтом интуитивным.
Не подчеркивайте текст, который не является ссылкой. Люди привыкли к тому, что подчеркнутый текст (с помощью CSS underline color) является ссылкой. Если вы подчеркиваете контент, чтобы акцентировать на нем внимание (вместо того, чтобы вывести его полужирным шрифтом или курсивом), вы вводите пользователей сайта в заблуждение.
Если хотите сохранить подчёркивание ссылок, но при этом изменить стиль по умолчанию (линия «solid«), это можно сделать следующим образом. Вместо сплошной линии используйте точки. Для этого нужно удалить подчеркивание и заменить его свойством border-bottom:
a { text-decoration: none; border-bottom:1px dotted; }
Так как стандартное CSS text decoration underline мы удалили, будет отображаться только линия из точек:

То же самое можно сделать, чтобы получить пунктирное подчеркивание. Просто измените значение border-bottom на dashed:
a { text-decoration: none; border-bottom:1px dashed; }
Еще один способ обратить внимание пользователей на ссылки — изменить цвет подчеркивания. Н забудьте, что цвет text underline CSS должен соответствовать используемой цветовой схеме:
a { text-decoration: none; border-bottom:1px solid red; }
Хитрость в создании двойного подчеркивания заключается в изменении ширины рамки. Если создать рамку шириной в 1 пиксель, в результате получится два подчеркивания, которые выглядят как одно:
a { text-decoration: none; border-bottom:3px double; }

Также можно использовать подчеркивание по умолчанию, чтобы создать альтернативное двойное подчеркивание. Например, чтобы одна из линий была двойной:
a { border-bottom:1px double; }
Также можно использовать border-bottom для различных состояний ссылок. Использование псевдокласса :hover поможет улучшить опыт взаимодействия пользователей. Чтобы создать второе точечное подчеркивание, выводимое при наведении на ссылку курсора мыши, используйте следующий код и деактивацию CSS text decoration underline:
a { text-decoration: none; } a:hover { border-bottom:1px dotted; }
Данная публикация является переводом статьи «How to Change Link Underlines on a Webpage» , подготовленная редакцией проекта.
CSS свойство стиля оформления текста

Пример
Установить различные типы стилей оформления текста:
дива {
текст-украшение-строка: подчеркивание;
стиль оформления текста: сплошной;
}
div.b {
текст-украшение-строка: подчеркивание;
стиль оформления текста: волнистый;
}
div.c {
текст-украшение-строка: подчеркивание;
стиль оформления текста: двойной;
}
дел.d {
текст-украшение-строка: подчеркивание подчеркивания;
стиль оформления текста: волнистый;
}
Попробуй сам »
Определение и использование
Свойство text-decoration-style устанавливает стиль оформления текста. (например, сплошная, волнистая, пунктирная, пунктирная, двойная).
Совет: Также обратите внимание на свойство text-decoration, который является сокращенным свойством для text-decoration-line, text-decoration-style и текст-украшение-цвет.
Значение по умолчанию: цельный
Унаследовано: нет
Анимируемый: нет. Прочитать о animatable
Версия: CSS3
Синтаксис JavaScript: объект .style.textDecorationStyle = «волнистый» Попытайся
Поддержка браузера
Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.
Числа, за которыми следует -moz-, указывают первую версию, которая работала с префиксом.
Объект
стиль оформления текста 57,0 79,0 36,0
6,0 -моз- 12,1 44,0
Синтаксис CSS
стиль оформления текста: сплошной | двойной | пунктирный | пунктирный | волнистый | начальный | наследование;
Стоимость недвижимости
Связанные страницы
Учебник
CSS: Текст CSS
Ссылка на HTML DOM: свойство textDecorationStyle

Как добавить пунктирное подчеркивание под HTML-текстом
Как добавить пунктирное подчеркивание под HTML-текстом — qaru
Присоединяйтесь к Stack Overflow , чтобы учиться, делиться знаниями и строить свою карьеру.
Спросил 8 лет, 3 мес назад
Просмотрено 138k раз
Как вы подчеркиваете html-текст, чтобы линия под текстом была пунктирной, а не стандартным подчеркиванием? Желательно, чтобы это было сделано без использования отдельного файла CSS.Я новичок в html.
Создан 06 мар.
параппарап
1,944 44 золотых знака1515 серебряных знаков2727 бронзовых знаков
4
Без CSS это невозможно.Фактически, тег просто добавляет text-decoration: подчеркивание к тексту с помощью встроенного в браузер CSS.
Вот что вы можете сделать:

Создан 06 мар.
Альфред Син
3,96422 золотых знака2020 серебряных знаков3434 бронзовых знака
4
Используйте следующие коды CSS…
текст-оформление: подчеркивание; стиль оформления текста: пунктирная;
Создан 13 июл.
Шакил АхмедШакил Ахмед
1,9471414 серебряных знаков2020 бронзовых знаков
3
Без CSS вы в основном застряли с использованием тега изображения.В основном сделайте изображение текста и добавьте подчеркивание. По сути, это означает, что ваша страница бесполезна для программы чтения с экрана.
С CSS это просто.
HTML:
Я люблю сыр
CSS:
u.dotted { нижняя граница: 1px пунктирная # 999; текстовое оформление: нет; }
Текущий пример
Пример страницы
<стиль> u.пунктирный{ нижняя граница: 1px пунктирная # 999; текстовое оформление: нет; } Я люблю сыр
анимусон ♦
50.8k2727 золотых знаков132132 серебряных знака142142 бронзовых знака
ответ дан 6 мар ’13 в 16:25
epascarelloepascarello
177k1818 золотых знаков175175 серебряных знаков214214 бронзовых знаков
В элементе
HTML5 может быть пунктирное подчеркивание, поэтому нижний текст будет иметь пунктирную линию, а не обычное подчеркивание.Атрибут title создает всплывающую подсказку для пользователя, когда он наводит курсор на элемент:
ПРИМЕЧАНИЕ: Пунктирная граница / подчеркивание отображается по умолчанию в Firefox и Opera, но IE8, Safari и Chrome нуждаются в строке CSS:
HTML
Создан 11 июл.
2
Если в содержимом более 1 строки, добавление нижней границы не поможет.В этом случае вам нужно будет использовать
текст-оформление: подчеркивание; стиль оформления текста: пунктирная;
Если вам нужно больше свободного пространства между текстом и строкой, просто используйте,
текст-подчеркивание-позиция: под;
Создан 09 окт.
Ответ переформатирован на @epascarello :
ед.пунктирный { нижняя граница: 1px пунктирная # 999; текстовое оформление: нет; }
Я люблю сыр
Создан 26 дек.
анатолий техтоник
17.5k88 золотых знаков112112 серебряных знаков131131 бронзовый знак
Вы можете использовать нижнюю границу с опцией , пунктирной, .
нижняя граница: 1px с точками # 807f80;
Создан 24 янв.
NeelNeel
8,0542121 золотой знак7575 серебряных знаков119119 бронзовых знаков
Вы можете попробовать этот метод:
Привет, мир!
Обратите внимание, что без text-underline-position: under; , у вас все еще будет пунктирная линия подчеркивания, но это свойство даст ему больше пространства для передышки.
Предполагается, что вы хотите встроить все в файл HTML, используя встроенные стили, а не использовать отдельный файл или тег CSS.

Создан 05 фев.
Мона ДжалалМона Джалал
24.3k4949 золотых знаков167167 серебряных знаков314314 бронзовых знаков
Это невозможно без CSS.Например, как элемент списка:

Миричан
1,92211 золотых знаков1212 серебряных знаков2525 бронзовых знаков
Создан 30 апр.
5
Не тот ответ, который вы ищете? Просмотрите другие вопросы с метками html подчеркивание или задайте свой вопрос.
lang-html
Stack Overflow лучше всего работает с включенным JavaScript
Ваша конфиденциальность
Нажимая «Принять все файлы cookie», вы соглашаетесь с тем, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Принимать все файлы cookie Настроить параметры
c # — отображение даты и времени в текстовом блоке с подчеркнутым пунктиром TextDecorations
У меня нет ответа, почему происходит такое странное поведение.Похоже, что штрихи, созданные с помощью пера Pen , сопоставляются с декорированным текстом TextDecoration . Это имеет смысл, поскольку тире или TextDecoration в целом автоматически подстраиваются под, например, размер шрифта. Знак минус, кажется, дает другой интервал. Возможно, этого не происходит при использовании моноширинного шрифта.
В любом случае, вы можете создать мозаичную кисть DrawingBrush и назначить ее свойству Pen.Brush для создания пунктирной линии.Вы можете поиграть с DrawingBrush.ViewPort , чтобы изменить положение или длину штрихов.
Окно просмотра состоит из четырех значений и на самом деле является прямоугольником Rect , который описывает положение и размер плитки: x, y, ширина, высота . Чем больше значения ширины и высоты, тем длиннее тире.
Результат — ровный рисунок тире и пробелов:
<Ручка> <Кисть пера>
Обратной стороной этого подхода является то, что размер и положение штрихов больше не адаптируются к размеру шрифта.
стиль оформления текста | CSS-уловки
Свойство text-decoration-style устанавливает стиль подчеркивания для ссылок, а также подчеркивания, надчеркивания или сквозной строки для любого текста с примененным text-decoration .
a { стиль оформления текста: сплошной; }
Значения
сплошной : по умолчанию. Украшение представляет собой единую сплошную линию.
двойной : украшение представляет собой пару сплошных линий.
пунктирная : украшение — пунктирная линия.
пунктирная : украшение — пунктирная линия.
волнистый : украшение — волнистая линия.
Демо
На момент написания статьи text-decoration-style официально поддерживается только в Firefox.Он также будет работать в браузерах Chrome с включенным флагом экспериментальных функций веб-платформы.
См. Pen text-decoration-style от CSS-Tricks (@ css-tricks) на CodePen.
стенография
В браузерах, поддерживающих text-decoration-style и text-decoration-color , вы можете добавить стиль оформления к сокращенному свойству text-decoration :
. Подчеркнутый { оформление текста: подчеркнутый красный пунктир; }
В настоящее время только Firefox поддерживает это без префикса.Safari поддерживает его с префиксом -webkit . Chrome также нуждается в префиксе -webkit и функциях экспериментальной веб-платформы, включенных во флагах Chrome.
Связанные
Дополнительная информация
Поддержка браузера
Хром Safari Firefox Opera IE Android iOS
31 * Нет 6 † Нет Нет Нет Нет
* только с включенным флагом экспериментальных функций веб-платформы
† Firefox 6+ с префиксом -moz , 36+ без префикса.
CSS | Текст-украшение-стиль Свойство — GeeksforGeeks

< html >
< head >
title >
CSS свойство стиля оформления текста
title >

< style >
p {
стиль оформления текста: наследование;
}
.основной {
стиль оформления текста: волнистый;
}
.GFG1 {
текст-украшение-строка: подчеркивание;
}
.GFG2 {
текст-украшение-строка: сквозная;
}
.GFG3 {
текст-украшение-строка: над чертой;
}
стиль >
головка >

< корпус >
< h2 style = "цвет: зеленый" >
GeeksforGeeks
h2 >

< b > стиль оформления текста: наследование b >

< div class = «основной» > 900 06
< p класс = "GFG1" >
Эта линия имеет унаследованный стиль подчеркивания.
p >
< p class = "GFG2" >
У этой линии есть наследственная линия сквозной стиль.
p >
< p class = "GFG3" >
Эта линия имеет унаследованный оверлайн стиль.
p >
div >
корпус >
html >
Свойство CSS3 text-decoration-style - Tutorial Republic
Тема: Справочник по свойствам CSS3 Пред. | След.
Описание
Свойство text-decoration-style CSS определяет стиль строк, заданный свойством text-decoration-line .
В следующей таблице приведены контекст использования и история версий этого свойства.
Синтаксис
Синтаксис свойства задается следующим образом:
стиль оформления текста:
[твердый | двойной | пунктирная | пунктирная | волнистый] ^{одно или несколько значений} | начальная | унаследовать
В приведенном ниже примере показано свойство text-decoration-style в действии.
п { текст-оформление: подчеркивание; -moz-text-decoration-style: пунктирная; /* Fire Fox */ стиль оформления текста: пунктирная; / * Стандартный синтаксис * / }
Значения собственности
В следующей таблице описаны значения этого свойства.
Значение Описание
цельный Строка отображается как отдельная строка.Это значение по умолчанию.
двойной Линия отображается как двойная линия.
с точками Линия отображается пунктирной линией.
штриховая Линия отображается пунктирной линией.
волнистый Линия отображается в виде волнистой линии.
начальный Устанавливает для этого свойства значение по умолчанию.
наследовать Если указано, связанный элемент принимает вычисленное значение свойства своего родительского элемента text-decoration-style.
Совместимость с браузером
Свойство text-decoration-style не поддерживается в большинстве браузеров.
Базовая поддержка -
Firefox 6+ ^-moz-, 36+
Google Chrome ×
Internet Explorer ×
Apple Safari ×
Опера ×
Предупреждение: Свойство text-decoration-style в настоящее время не поддерживается большинством браузеров.Вам лучше избегать использования этого свойства.
Дополнительная литература
См. Учебник по теме: Текст CSS, Граница CSS.
Связанные свойства: текст-украшение , текст-украшение-строка , текст-украшение-цвет .
Справочное руководство
CSS: оформление текста - блог LogRocket
30 октября, 2020 1 мин чтения 357
Сокращенное свойство text-decoration CSS позволяет добавлять и стилизовать декоративные линии к тексту.
Забегая вперед:
Синтаксис свойства следующий:
оформление текста: строка | стиль | цвет | толщина
Демо
См. Пример оформления текста CSS Pen
от Соломона Эсеме (@kaperskyguru)
на CodePen.
Свойства компонента
Сокращение CSS text-decoration состоит из четырех компонентных свойств. Рассмотрим следующий пример:
p { text-decoration: подчеркивание сплошным красным 0.1em; } // взрывается до: п { текст-украшение-строка: подчеркивание; стиль оформления текста: сплошной; цвет оформления текста: красный; толщина украшения текста: 0,1 мкм }
Мы подробно исследуем каждое свойство компонента ниже.
текст-украшение-строка
Задает стиль линии для оформления текста .
Значения
подчеркивание : отображение строки под текстом
сквозная линия : зачеркивает текст
над чертой : отображение строки над текстом
мигает : текст постоянно чередуется между видимым и невидимым - другими словами, он мигает.Это значение устарело в пользу анимации CSS
нет : не выводит строку
Использование
p { текст-украшение-строка: подчеркивание | линейный | надчеркнутый | мигать | никто }
текст-оформление в стиле
Задает стиль линии, отображаемой в тексте.
Значения
сплошная : рисует сплошную линию
double : рисует двойную линию
пунктирная : рисует пунктирную линию
штриховая : рисует пунктирную линию
волнистый : рисует волнистую линию
Использование
p { стиль оформления текста: сплошной | двойной | пунктирная | пунктирная | волнистый; }
цвет текстового оформления
Задает цвет линии, отображаемой в тексте.
Значения
Как и все цвета CSS, значения могут быть предоставлены с помощью ключевого слова, шестнадцатеричного кода, значений RGB / RGBA или значений HSL / HSLA.
Использование
p { цвет-украшения-текста: текущий-цвет | красный | # 00ff00 | rgba (255, 128, 128, 0,5) | прозрачный; }
толщина текстового орнамента
Устанавливает толщину обводки линии, нарисованной на тексте.
N.B. , text-decoration-Thickness в настоящее время поддерживается только в последних версиях Firefox и Safari.
Значения
auto : позволяет браузеру выбирать подходящую ширину для линии оформления текста
from-font : позволяет определять толщину линии с помощью файла шрифта для текста. Если в файле шрифта нет информации о толщине, по умолчанию используется значение auto
.
длина : позволяет разработчику указать любое значение длины (например, 1px , 2em и т. Д.)
в процентах : позволяет разработчику указать процентное значение для толщины линии
Использование
p { толщина украшения текста: авто | from-font | 0.2em | 3px | 10%; }
Ваш интерфейс загружает процессор ваших пользователей?
По мере того, как веб-интерфейсы становятся все более сложными, ресурсоемкие функции требуют все большего и большего от браузера. Если вы заинтересованы в мониторинге и отслеживании использования ЦП на стороне клиента, использования памяти и многого другого для всех ваших пользователей в производственной среде, попробуйте LogRocket.https://logrocket.com/signup/
LogRocket похож на цифровой видеорегистратор для веб-приложений, записывающий все, что происходит в вашем веб-приложении или на сайте. Вместо того, чтобы гадать, почему возникают проблемы, вы можете агрегировать и составлять отчеты по ключевым показателям производительности внешнего интерфейса, воспроизводить сеансы пользователей вместе с состоянием приложения, регистрировать сетевые запросы и автоматически обнаруживать все ошибки.

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

Объект
стиль оформления текста	57,0	79,0	36,0 6,0 -моз-	12,1	44,0

Хром	Safari	Firefox	Opera	IE	Android	iOS
31 *	Нет	6 †	Нет	Нет	Нет	Нет

Значение	Описание
`цельный`	Строка отображается как отдельная строка.Это значение по умолчанию.
`двойной`	Линия отображается как двойная линия.
`с точками`	Линия отображается пунктирной линией.
`штриховая`	Линия отображается пунктирной линией.
`волнистый`	Линия отображается в виде волнистой линии.
`начальный`	Устанавливает для этого свойства значение по умолчанию.
`наследовать`	Если указано, связанный элемент принимает вычисленное значение свойства своего родительского элемента `text-decoration-style.`

Comments

Leave Comment