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

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

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

Содержание

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

Свойство CSS text-decoration-style устанавливает стиль строк, заданных параметром 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 Этот API не стандартизирован.
Не рисует линии. Используйте text-decoration-line : none .

Formal definition

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

solid | double | dotted | dashed | wavy

Examples

Установка волнистого подчеркивания

.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

Совместимость с браузерами

DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidХромовый AndroidFirefox для AndroidОпера АндроидSafari на IOSSamsung Интернет
text-decoration-style

57

79

36

6-39

No

44

12.1

8

57

57

36

6-39

43

12.2

8

7.0

wavy

57

79

6

No

44

8

57

57

6

43

8

7.0

См.также

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

Как убрать подчеркивание ссылки в 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» , подготовленная редакцией проекта.

Перечёркнутый текст в HTML и CSS

Первыми тегами для зачёркнутого текста были <strike>

и <s>.

<strike>Перечёркнутый текст</strike>
<s>Перечёркнутый текст</s>

C приходом HTML 4 их использование стало осуждается, а в HTML 5 их вовсе запретили. В место них ввели <del>, он помечает текст как удаленный, что семантически правильнее.

<del>Перечёркнутый текст</del>

По виду они не отличается:

Изменить цвет линии

Первый способ

С помощью CSS свойства text-decoration-color, который задаёт цвет линии (не поддерживается в Internet Explorer и Edge).

<del>Перечёркнутый текст</del>
del {
	text-decoration: line-through;
	text-decoration-color: red;
}

Также можно изменить стиль линии с помощью text-decoration-style

.

Значение Описание Пример
text-decoration-style: solid; Одинарная линия Текст
text-decoration-style: double; Двойная линия Текст
text-decoration-style: dotted; Точечная линия Текст
text-decoration-style: dashed; Пунктирная линия Текст
text-decoration-style: wavy; Волнистая линия Текст

Второй способ

Тегу <del> задается цвет линии, вложенному <span> цвет текста.

<del>
	<span>Текст зачёркнут красной линией</span>
</del>
 
del {
	color: red;
	text-decoration: line-through;
}
del span {
	color: blue;
}

Третий способ

Линия добавляется псевдо элементом :before, но у текста не должно быть переносов.

<del>Перечёркнутый текст</del>
del {
	position: relative;
	color: #000;
	text-decoration: none;
}
del:before {
	content: "";
	border-bottom: 2px solid red;
	position: absolute;
	top: 0;
	left: 0;    
	width: 100%;
	height: 50%;
}

При такой реализации, можно расположить линию за текстом.

del {
	position: relative;
	color: #000;
	text-decoration: none;
}
del:before {
	content: "";
	border-bottom: 2px solid red;
	position: absolute;
	top: 0;
	left: 0;    
	width: 100%;
	height: 50%;
	z-index: -1;
}

text-decoration-style — CSS: Каскадные таблицы стилей

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

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

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

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


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

Значения

твердый
Рисует одну линию.
двойной
Рисует двойную линию.
с точками
Рисует пунктирную линию.
штриховая
Рисует пунктирную линию.
волнистый
Рисует волнистую линию.
-моз-нет
Не рисует линии. Используйте вместо него text-decoration-line : none .
 твердый | двойной | пунктирная | пунктирная | wavy

Установка волнистого подчеркивания 

  .example {
       -moz-текст-украшение-строка: подчеркивание;
       -moz-text-decoration-style: волнистый;
       -moz-текст-украшение-цвет: красный;
    -webkit-text-decoration-line: подчеркивание;
    -webkit-text-decoration-style: волнистый;
    -webkit-текст-украшение-цвет: красный;
}
CSS 
 .волнистый {
  текст-украшение-строка: подчеркивание;
  стиль оформления текста: волнистый;
  цвет оформления текста: красный;
}
HTML 
  
 Под этим текстом есть волнистая красная линия.
Результаты
Таблицы

BCD загружаются только в браузере.

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

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

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

Присоединяйтесь к Stack Overflow , чтобы учиться, делиться знаниями и строить свою карьеру.

Спросил

Просмотрено 140k раз

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

Создан 06 мар.

параппарап

1,955 44 золотых знака1515 серебряных знаков2727 бронзовых знаков

4

Без CSS это невозможно.Фактически, тег просто добавляет text-decoration: подчеркивание к тексту с помощью встроенного в браузер CSS.

Вот что вы можете сделать:
Оставить комментарий

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

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