Css подчеркнутый текст: text-decoration | htmlbook.ru

Leave a Comment / Css / By /

Содержание

text-decoration | CSS | WebReference

  • Содержание
    • Краткая информация
    • Синтаксис
    • Значения
    • Песочница
    • Пример
    • Примечание
    • Спецификация
    • Браузеры

Добавляет оформление текста в виде его подчёркивания, перечёркивания или линии над текстом. Одновременно можно применить более одного стиля, перечисляя значения через пробел.

Значение по умолчаниюnone
НаследуетсяНет
ПрименяетсяКо всем элементам
Анимируетсяtext-decoration-line: Нет
text-decoration-style: Нет
text-decoration-color: Да

Синтаксис 

text-decoration: 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
Отменяет все эффекты, в том числе и подчёркивание у ссылок, которое задано по умолчанию.

Песочница

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

И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.

none line-through overline underline

div {
  text-decoration: {{ playgroundValue }};
}

Пример

<!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 эта ошибка исправлена.

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

СпецификацияСтатус
CSS Text Decoration Module Level 3 Возможная рекомендация
CSS Level 2 Revision 1 (CSS 2. 1)Рекомендация
CSS Level 1Рекомендация

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

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

31213.511
1141

Браузеры

В таблице браузеров применяются следующие обозначения.

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

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

Текст и шрифт

См. также

  • <blink>
  • text-decoration-color
  • text-decoration-line
  • text-decoration-style
  • Начертание
  • Оформление ссылок
  • Свойства текста в CSS

Рецепты

  • Как добавить подчёркивание к ссылке?
  • Как добавить пунктирное подчёркивание к ссылкам?
  • Как сделать мигающий текст?
  • Как сделать подчёркивание заголовка?
  • Как сделать подчёркнутый текст?
  • Как убрать подчёркивание у ссылок?

Практика

  • Двойное подчёркивание ссылок
  • Пунктирное подчёркивание ссылок
  • Рамка вокруг ссылки
  • Ссылки без подчёркивания
  • Убираем подчёркивание

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 02. 03.2020

Редакторы: Влад Мержевич

Подчёркнутый текст (свойство 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>

text-decoration
none underline overline line-through spelling-error grammar-error solid double dotted dashed wavy
initial
none solid currentcolor
inherit
наследует значение родителя
unset
none solid currentcolor

Свойство text-decoration не наследуется, применяется ко всем элементам

<style>
div {
  text-decoration: none;

  

  text-decoration-line: none;
  text-decoration-style: solid;
  text-decoration-color: currentColor;
}
</style>

<div>Свойство <code>text-decoration</code> не наследуется, применяется ко всем элементам</div>

text-decoration-line
none
убрать от текста линии
underline
подчеркнуть текст (снизу)
overline
провести линию над текстом (сверху)
line-through
зачеркнуть текст (посередине)
spelling-error
оформить как при орфографической ошибке (не поддерживается браузерами)
grammar-error
оформить как при грамматической ошибке (не поддерживается браузерами)
initial
none
inherit
наследует значение родителя
unset
none

Свойство text-decoration-line не наследуется, применяется ко всем элементам

<style>
div {
  text-decoration-line: none;
}
</style>

<div>Свойство <code>text-decoration-line</code> не наследуется, применяется ко всем элементам</div>

Сделать линию над и под текстом

Стиль текста CSS 
<style>
.
 
 raz {
  text-decoration-line: underline overline;
}
</style>

<span>Стиль текста CSS</span>

text-decoration-style
solid
одинарная прямая линия
double
двойная прямая линия
dotted
линия точками
dashed
прерывистая пунктирная линия
wavy
волнистая линия
initial
solid
inherit
наследует значение родителя
unset
solid

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

<style>
div {
  text-decoration: underline;
  text-decoration-style: solid;
}
</style>

<div>Свойство <code>text-decoration-style</code> не наследуется, применяется ко всем элементам</div>

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 не реализованы вовсе и потому пока не рассмотрены в статье.

text-decoration-skip
objects
черта пропускает картинки и inline-block-элементы
none
черта ничего не пропускает
spaces
черта пропускает пробелы и интервалы, созданные letter-spacing и word-spacing
leading-spaces
trailing-spaces
edges
черта немного не доходит до начала и конца элемента для того, чтобы два рядом стоящих элемента не были подчёркнуты единой линией
box-decoration
черта видна, если задана родителю, и пропускает области, созданные margin, padding и border
initial
objects leading-spaces trailing-spaces
inherit
наследует значение родителя
unset
наследует значение родителя

Свойство text-decoration-skip наследуется, применяется ко всем элементам .

<style>
div {
  text-decoration: underline;
  text-decoration-skip: objects leading-spaces trailing-spaces;
}
code {
  display: inline-block;
}
</style>

<div>Свойство <code>text-decoration-skip</code> наследуется, применяется ко всем элементам <img src="http://photos1.blogger.com/x/blogger2/6533/16720282190093/320/140728/plain.gif" alt="смайлик">.</div>

text-decoration-skip-ink
auto
черта пропускает выступающие части символов (например, «хвостики» у букв «р» и «у»)
none
черта не пропускает выступающие части символов (например, «хвостики» у букв «р» и «у»)
initial
auto
inherit
наследует значение родителя
unset
наследует значение родителя

Свойство text-decoration-skip-ink наследуется, применяется ко всем элементам

<style>
div {
  text-decoration: underline;
  text-decoration-skip-ink: auto;
}
</style>

<div>Свойство <code>text-decoration-skip-ink</code> наследуется, применяется ко всем элементам</div>

Пропуск выносных частей символов в подчеркиваемом тексте в 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-underline-position
auto
автоматически (положение черты близко к базовой линии)
under
черта достаточно отдалена от базовой линии, чтобы не пересекать выступающие части символов
left
right
initial
auto
inherit
наследует значение родителя
unset
наследует значение родителя

Свойство text-underline-position наследуется (применяется ко всем элементам)

<style>
div {
  text-decoration: underline;
  text-underline-position: auto;
}
</style>

<div>Свойство <code>text-underline-position</code> наследуется (применяется ко всем элементам)</div>

Разница

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.

Как подчеркнуть в css

Подчеркнутый текст html css: text-decoration-line | htmlbook.ru

Добавляет оформление текста в виде его подчеркивания, перечеркивания, линии
над текстом и мигания. Одновременно можно применить более одного стиля, перечисляя
значения через пробел.

Синтаксис

text-decoration: [ blink || line-through || overline || underline ] | none | inherit

Значения

blink Устанавливает мигающий текст. Такой текст периодически, примерно раз в секунду
исчезает, потом вновь появляется на прежнем месте. Это значение в настоящее время не поддерживается браузерами и осуждается в CSS3, взамен рекомендуется использовать анимацию. line-through Создает перечеркнутый текст (пример). overline Линия проходит над текстом (пример). underline Устанавливает подчеркнутый текст (пример). none Отменяет все эффекты, в том числе и подчеркивания у ссылок, которое задано
по умолчанию. inherit Значение наследуется у родителя.

Объектная модель

[window. ]document.getElementById(&#171;elementID&#187;).style.textDecorationBlink

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit. Линия полученная с помощью значения line-through в IE7 располагается выше, чем в других браузерах; в IE8 эта ошибка исправлена.

Как добавить подчеркивание к заголовку?

Подчеркивание для блочных элементов вроде тега <h3> можно проводить двояко. Например, линию под текстом устанавливать на всю ширину блока, независимо от объема текста. А также подчеркивание делать только у текста. Далее рассмотрим оба варианта.

Линия под текстом на всю ширину блока

Чтобы создать линию под текстом, следует добавить к элементу стилевое свойство border-bottom, его значением выступает одновременно толщина линии, ее стиль и цвет (пример 1).

Пример 1. Линия на всю ширину

Расстояние от линии до текста можно регулировать свойством padding-bottom, добавляя его к селектору h3. Результат данного примера показан на рис. 1.

Рис. 1. Линия под заголовком

Подчеркивание текста

Чтобы подчеркнуть только текст, необходимо воспользоваться свойством text-decoration со значением underline, опять же, добавляя его к селектору h3 (пример 2).

Пример 2. Линия на ширину текста

Результат данного примера показан на рис. 2.

Рис. 2. Подчеркивание заголовка

В случае использования свойства text-decoration линия жестко привязана к тексту, поэтому определить ее положение и стиль не удастся.

Подчеркнутый текст силами HTML и CSS

Подчеркнутый текст в HTML выделяется с помощью тега u HTML (от слова underline). Применяется он следующим образом (нужная часть текста помещается между тегами <u></u>):

Но данный код считается невалидным, поэтому значительно эффективнее и правильнее использовать CSS-стили для декорации текста.

Подчеркнуть текст &#8212; CSS

Как мы уже говорили в статье Зачеркнутый текст, декорации текста задаются при помощи свойства text-decoration. Подчеркнутый текст задается параметром underline:

Подчеркнуть текст с помощью CSS можно не только сплошной линией. Посмотрим, какими вариантами можно подчеркнуть текст:

    Подчеркнуть текст пунктиром CSS:&#13;

Как видно из приведенных примеров, управлять стилем подчеркивания можно при помощи свойства border-bottom (нижняя граница). С помощью этого параметра можно задать тип подчеркивания, цвет, толщину.

Смотрите также:

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

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

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

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

Изменить цвет линии
Первый способ

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

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

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

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

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

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

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

text-decoration &#8212; подчёркнутый и зачёркнутый текст

Поддержка браузерами
Описание

CSS свойство text-decoration позволяет добавить к тексту такие элементы декора как подчёркивание, надчёркивание и перечёркивание (то есть сделать зачёркнутый текст).

Свойство text-decoration может принимать одно значение или больше. Чтобы задать сразу несколько значений, их следует разделить пробелами.

Самый часто используемый декор для текста &#8212; это подчёркивание. Подчёркнутый текст задаётся значением underline :

Если вам, наоборот, нужно убрать подчёркивание, например убрать подчеркивание ссылки, заданное по умолчанию, то нужно воспользоваться значением none :

Часто требуется не просто убрать подчёркивание ссылки в обычном состоянии, а сделать так, чтобы ссылки были подчёркнуты при наведении на них курсора мыши. Чтобы сделать подчёркивание ссылки при наведении, надо воспользоваться псевдо-классом :hover:

К сожалению цвет линий подчёркивания, надчёркивания и перечёркивания, установленных свойством text-decoration , будет совпадать с цветом текста, для которого эти линии используются. Чтобы иметь возможность изменять цвет, толщину и стиль подчёркивания или надчёркивания надо воспользоваться CSS свойствами border-top (создаёт линии над элементом) и border-bottom (создаёт линию под элементом).

Примечание: чтобы добавить к тексту подчёркивание или перечёркивание не обязательно использовать CSS, этих же эффектов можно добиться с помощью HTML тегов: <u> (подчёркнутый текст) и <del> (зачёркнутый текст).

Синтаксис
Значения свойства
Пример

Измените значение свойства для просмотра результата.

Подчеркивание текста при использовании CSS

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

а затем включил <div>Explanation</div> в файл HTML. Это работает, как и ожидалось.

Насколько я понимаю,при использовании CSS содержимое и макет разделяются. Как же тогда я подчеркну какой-то текст в своем объяснении? Насколько я понимаю, мне следует избегать следующего: <div>This is <u>very</u> important. </div> .

17 января 2012 в 10:17

9 ответов

Вы правы насчет разделения контента и макета, но в этом случае я бы завернул его в тег. Тег <u/> -это хоть и устаревший,. То, что я бы использовал, это что-то вроде этого:

<em/> означает подчеркнутый текст. По умолчанию используется курсив, поэтому в зависимости от вашего сброса CSS вам может потребоваться также сбросить шрифт-syle до нормального.

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

17 января 2012 в 10:25

Как вы говорите, HTML &#8212; это содержание, а CSS-стиль. Таким образом, вам не нужно использовать стилистические материалы в вашем HTML. Действительно, когда вы мыслите в HTML, вы должны мыслить содержательно, а также семантически.

Таким образом, класс, который вы используете для вашего div. usage , очень хорошо выбран, потому что он ничего не говорит о своем стиле, но о его семантике. А как насчет текста, который вы хотите подчеркнуть? Я бы сказал, что в семантическом смысле это текст, который вы хотите выделить, и HTML имеет хороший элемент для этого: <strong> . Затем в вашем HTML вы можете переопределить стиль браузера по умолчанию для <strong> элементов (жирный шрифт)для подчеркивания, которое вы хотите.

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

Конечно, вы не хотите добавлять div в селектор (я имею в виду . usage лучше, чем div.usage ).), таким образом, вы готовы к тому, что будете кодировать, например, список или праграф с семантикой usage .

17 января 2012 в 10:30

Свойство &#171;text-decoration: underline&#187; позволяет отменить выравнивание текста.

17 января 2012 в 10:21

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

У меня есть поле ввода, которое отображает подчеркивание, когда я начинаю печатать текст. Это не подчеркивание автозамены, а черное подчеркивание, так как я пытался отключить автозаполнение и проверку орфографии. Это появляется только на телефонах android jelly bean. <input type=search&#8230;

Можно ли с помощью CSS сделать подчеркивание заголовка менее широким, чем текст заголовка? У меня есть следующий стиль для заголовка h3: h3 < font-weight: 300; display: inline-block; padding-bottom: 5px; border-bottom: 1px #d2202f solid; >Это создает тонкое красное подчеркивание под моими. ..

Вы должны использовать один из этих тегов: <strong> или <em> и стилизовать их в css.

В вашем markup вы определяете некоторый контент, который вы хотите подчеркнуть ( <em> ) или сильно подчеркнуть ( <strong> ). см. http://www.w3.org/TR/ html4/struct/text. html .
Я бы не стал использовать подчеркивание для подчеркивания, так как это сбьет пользователей с толку, думая, что это гиперссылка.

17 января 2012 в 10:26

Просто небольшой дружеский совет: не стоит использовать подчеркивание в интернете, так как его очень часто путают с кликабельной ссылкой.

Я бы предложил использовать

Который по умолчанию будет выделен жирным шрифтом.

Или, возможно, вы могли бы использовать желтый фон на тексте, как маркер выделения&#8230;

И положи это в свой CSS

17 января 2012 в 10:32

привет для подчеркивания вы можете взять небольшой пример здесь

17 января 2012 в 10:23

В наши дни люди обычно говорят, что <u> markup не следует использовать, но мало кто может подкрепить это фактологическими аргументами (в отличие от цитирования предполагаемых авторитетов и использования отрицательно звучащих прилагательных). Если вы действительно хотите подчеркнуть (что, как правило, не очень хорошая идея в документах HTML, как указано здесь), то <u> -это самый простой и надежный способ. У вас все еще была бы свобода позже решить, что вы хотите использовать, скажем, жирный шрифт вместо подчеркивания, и тогда вы могли бы сделать это просто в CSS:

Для акцентирования внимания другие методы почти всегда лучше, чем подчеркивание. Но есть ситуации, когда подчеркивание является частью обычной нотации (например, в фонетике или математике), и тогда вы можете использовать <u> (и вы не хотите полагаться на CSS).

17 января 2012 в 10:50

вы можете попробовать это:

17 января 2012 в 10:19

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

17 января 2012 в 10:22

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

Ограничьте подчеркивание текста

Я хотел бы иметь подчеркивание только для текста и в то же время сохранить часть изображения ссылки: <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN&#8230;

CSS слишком длинное подчеркивание текста при применении интервала между буквами?

Всякий раз, когда letter-spacing применяется к чему-то с подчеркиванием или нижней границей, кажется, что подчеркивание выходит за пределы текста справа. Есть ли какой-нибудь способ сделать так,&#8230;

удаление зазора в один пиксель при использовании CSS text-decoration: подчеркивание

У меня есть следующие CSS и markup на моем сайте, которые производят подчеркивание, когда я навожу курсор на ссылку Account . По умолчанию подчеркивание отображается на один пиксель от текста. Можно&#8230;

Центрированные, подчеркнутые заголовки, где подчеркивание отличается по цвету от текста

Какой самый простой способ стилизовать заголовки HTML таким образом, чтобы они были одновременно подчеркнуты и горизонтально центрированы? Я не хочу, чтобы подчеркивание распространялось на всю&#8230;

CSS эффект при наведении курсора (пунктирное подчеркивание + изменение цвета текста)

Я совершен CSS нуб Не могли бы вы уделить мне минутку и помочь создать пунктирное подчеркивание (с пробелом) с изменением цвета текста при наведении мыши? Я был бы очень признателен вам за помощь!&#8230;

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

У меня есть поле ввода, которое отображает подчеркивание, когда я начинаю печатать текст. Это не подчеркивание автозамены, а черное подчеркивание, так как я пытался отключить автозаполнение и&#8230;

CSS подчеркивание меньше ширины заголовка?

Можно ли с помощью CSS сделать подчеркивание заголовка менее широким, чем текст заголовка? У меня есть следующий стиль для заголовка h3: h3 < font-weight: 300; display: inline-block; padding-bottom:&#8230;

CSS: удалить подчеркивание из текста

У меня есть следующее HTML <div style=text-decoration: underline;> outer text <div style=text-decoration: none;>inner text</div> </div> Несмотря на то, что я использовал none&#8230;

matplotlib подчеркивание текста

Я пытаюсь добавить подчеркивание к одному из символов в plt. text. plt.text(.5,.5,r&#8217;\underlineH&#8217;) Это, кажется, не работает , я попытался использовать \overline, который работает просто&#8230;

CSS подчеркивание исчезает при использовании непрозрачности

В текущем стабильном Chrome при использовании следующего CSS, где установлена некоторая непрозрачность, подчеркивание текста исчезает. Когда непрозрачность установлена на 1 или удалена,&#8230;

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

Содержание web-сайта, в тех или иных случаях, требует оформления его части в виде подчёркнутого, перечёркнутого, а также текста с линией сверху или мигающий вариант отображения, который в прочем в настоящее время мало используется в виду не соответствия с текущими требованиями. Одновременно можно задействовать более одного стиля, перечисляя выбранные значения через пробел.

Наиболее распространённые стили

underline – подчёркивание текста сплошной линией.

line-through – вывод перечеркнутого текста.

none – отменяет все заданные ранее эффекты, включая и подчеркивания у ссылок которое установлено по умолчанию.

Менее используемые стили

overline – отображает текст с линией поверх него.

blink – этот параметр задаёт пульсирующий текст.

HTML тег u

Пример

Отметьте слово с ошибкой тегом :

Это неверный текст.

Дополнительные примеры &#171;Попробуйте сами&#187; ниже.

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

Тег представляет текст, который
не артикулирован и оформлен по-разному
из обычного текста, например слов с ошибками или собственных имен в китайском тексте.В
содержимое внутри обычно отображается с подчеркиванием. Вы можете изменить это
с помощью CSS (см. пример ниже).

Совет: Избегайте использования
элемент, где его можно было спутать с гиперссылкой!

Поддержка браузера
Одинарная линияТекстДвойная линияТекстТочечная линияТекстПунктирная линияТекстВолнистая линияТекст

&#13;

12. 0+ко всем элементам, а также к псевдо-элементам ::first-letter и ::first-lineobject. style.textDecoration=&#187;overline&#187;Оставляет текст без изменений.Определяет горизонтальную линию под текстом.Определяет горизонтальную линию над текстом.Определяет линию перечеркивающую текст.Указывает, что значение наследуется от родительского элемента.
Элемент
ЕстьЕстьЕстьЕстьЕсть
Глобальные атрибуты

Тег также поддерживает глобальные атрибуты в HTML.

Атрибуты событий

Тег также поддерживает атрибуты событий в HTML.

Другие примеры
Пример

Используйте CSS для стилизации текста с ошибками:

. Ошибка орфографии <
текст-украшение-строка: подчеркивание;
стиль оформления текста: волнистый;
цвет оформления текста: красный;
>

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

wikiHow — это «вики», похожая на Википедию, что означает, что многие наши статьи написаны в соавторстве несколькими авторами. При создании этой статьи авторы-добровольцы работали над ее редактированием и улучшением с течением времени.

Техническая команда wikiHow также выполнила инструкции статьи и подтвердила, что они работают.

Эта статья была просмотрена 162 214 раз (а).

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

Оформление текста CSS

❮ Назад Далее ❯

CSS Text Decoration

В этой главе вы узнаете о следующих свойствах:

  • text-decoration-line
  • цвет оформления текста
  • стиль оформления текста
  • толщина оформления текста
  • текстовое украшение

Добавить декоративную линию к тексту

9Свойство 0011 text-decoration-line используется для добавления декоративная линия к тексту.

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

Пример

h2 {
  text-decoration-line: overline;
}

h3 {
  text-decoration-line: line-through;
}

h4 {
  text-decoration-line: underline;
}

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

Попробуйте сами »

Примечание: Не рекомендуется подчеркивать текст, не являющийся ссылкой, так как это часто сбивает читателя с толку.

Укажите цвет для линии оформления

Свойство text-decoration-color используется для установить цвет декоративной линии.

Пример

h2 {
  text-decoration-line: overline;
 текстовый-декоративный-цвет: красный;
}

h3 {
  text-decoration-line: line-through;
 текстовый-декоративный-цвет: синий;
}

h4 {
  text-decoration-line: underline;
 текстовый-декоративный-цвет: зеленый;
}

p {
  строка-декорации текста: надчеркивание подчеркивание;
  text-decoration-color: фиолетовый;
}

Попробуйте сами »

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

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

Пример

h2 {
  text-decoration-line: underline;
  стиль оформления текста: твердый;
}

h3 {
  text-decoration-line: underline;
стиль оформления текста: двойной;
}

h4 {
  text-decoration-line: underline;
стиль оформления текста: пунктирный;
}

p. ex1 {
  text-decoration-line: underline;
стиль оформления текста: пунктир;
}

p.ex2 {
  text-decoration-line: underline;
стиль оформления текста: волнистый;
}

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

Попробуйте сами »

Укажите толщину линии оформления

Свойство text-decoration-thickness используется для установите толщину декоративной линии.

Пример

h2 {
  text-decoration-line: underline;
толщина оформления текста: авто;
}

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

ч4 {
строка оформления текста: подчеркивание;
text-decoration-толщина: 25%;
}

р {
строка оформления текста: подчеркивание;
  text-decoration-color: красный;
стиль оформления текста: двойной;
  толщина оформления текста: 5 пикселей;
}

Попробуйте сами »

Сокращенное свойство

text-decoration свойство является сокращением свойство для:

  • text-decoration-line (обязательно)
  • цвет текста-декорации (опционально)
  • стиль оформления текста (опционально)
  • толщина оформления текста (опционально)

Пример

h2 {
  text-decoration: underline;
}

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

ч4 {
  text-decoration: подчеркивание красный двойной;
}

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

Попробуйте сами »

Маленький совет

Все ссылки в HTML по умолчанию подчеркнуты. Иногда вы обратите внимание, что ссылки оформлены без подчеркивания. Текстовое оформление : нет; используется для удаления подчеркивание из ссылок, например:

Пример

a {
  text-decoration: none;
}

Попробуйте сами »

Все свойства CSS text-decoration

Свойство Описание
украшение текста Задает все свойства оформления текста в одном объявлении
цвет оформления текста Задает цвет оформления текста
строка оформления текста Определяет тип оформления текста (подчеркивание, надчеркивание, д.)
стиль оформления текста Задает стиль оформления текста (сплошной, пунктирный и т. д.)
толщина оформления текста Задает толщину линии оформления текста

❮ Предыдущий Далее ❯


НОВИНКА

Мы только что запустили
Видео W3Schools

Узнать

ВЫБОР ЦВЕТА
КОД ИГРЫ

Играть в игру

Лучшие учебники
Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3. CSS
Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебное пособие по Java
Учебное пособие по C++
Учебное пособие по jQuery

902 Справочник Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Основные примеры
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2022 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

Стилизация подчеркивания с помощью CSS – Tempertemper

Если вы не подчеркиваете свои ссылки, вы должны это сделать. Есть несколько способов подчеркнуть ссылки; text-decoration: underline является наиболее очевидным, так как ссылки оформлены по умолчанию, а border-bottom предлагает нам немного больше гибкости. Используя границы, можно указать толщину, стиль и цвет, но знаете ли вы, что теперь это можно сделать с помощью украшение текста: подчеркивание ?

Хотя зачем заморачиваться, если у нас и так работает с границами? Что ж, text-decoration: underline лучше типографски , так как подчеркивания хорошо сидят на базовой линии слов, проходя через нисходящие элементы (биты букв, которые идут ниже базовой линии в таких буквах, как g , p , и y ), в то время как border-bottom подчеркивания сидят под выносными элементами, что означает слишком большое расстояние между словами и их подчеркиванием, когда.

Мало того, браузеры теперь обнаруживают нисходящие элементы, а подчеркивание text-decoration аккуратно пропускает их по умолчанию. Это можно отменить с помощью text-decoration-skip-ink (или text-decoration-skip в Safari), но я не вижу, что это даст, поэтому он включен по умолчанию.

Итак, как мы можем получить тот визуальный стиль с помощью text-decoration: underline , который у нас всегда был через border-bottom ?

Подчеркнутый, надчеркнутый

Здесь мы говорим о подчеркивании, но стоит сделать небольшое уточнение: text-decoration-line , точно так же, как text-decoration , имеет 3 позиции:

  • Под текстом ( underline )
  • Через текст ( через строку )
  • Над текстом ( над чертой )

text-decoration-line также допускает несколько значений, поэтому у нас могут быть строки под, через и над одним и тем же блоком текста. Немного странно, но это есть:

 украшение текста: подчеркивание; 
 text-decoration-line: подчеркивание над чертой;

Как выглядит подчеркивание

Вернуться к подчеркиванию. Теперь у нас есть контроль над тем, как они выглядят, с помощью text-decoration-style ; 5 вариантов:

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

Каждый из них выглядит так, как вы ожидаете, с двойной линией, волнистой линией и т. д. Просто добавьте text-decoration-style объявление:

 text-decoration: underline; 
 text-decoration-style: волнистый;

Цвет подчеркивания

Это здорово. text-decoration-color позволяет изменить цвет подчеркивания. Он принимает любое нормальное значение цвета CSS, будь то ключевое слово, шестнадцатеричное число, RGB, RGBA, HSL и т. д. :

 text-decoration: underline; 
 цвет оформления текста: красный;

Просто убедитесь, что подчеркивание соответствует нужному коэффициенту цветовой контрастности!

Утолщение этих подчеркиваний

Наконец, мы можем контролировать толщину подчеркивания с помощью text-decoration-thickness , например:

 text-decoration: underline; 
 толщина оформления текста: 5px;

Комбинации

Конечно, мы можем делать много одновременно:

 text-decoration: underline; 
 text-decoration-style: волнистый; 
 цвет оформления текста: красный; 
 толщина оформления текста: 5px;

Или мы можем использовать text-decoration-line вместо text-decoration :

 text-decoration-line: underline; 
 text-decoration-style: волнистый; 
 цвет оформления текста: красный; 
 толщина оформления текста: 5px;

Сокращение

Это превращается в много CSS! К счастью, как и margin, padding, border radius и множество других свойств CSS, text-decoration теперь является сокращением, где мы можем объявить несколько значений:

 text-decoration: underline wavy red;

Обратите внимание, что в этом примере я не добавил свойство text-decoration-thickness . Для этого есть веская причина: поддержка браузера.

Постепенное усовершенствование

Стиль подчеркивания хорошо поддерживается всеми современными браузерами. Более старые версии (и, конечно, Internet Explorer 11 и ниже) должны получить стандартное, но очень удобное для пользователя подчеркивание, если в вашем сбросе CSS нет ничего подобного:

 a { 
 text-decoration: none; 
 }

Но имейте в виду, что поддержка браузерами зависит от:

  • используемого свойства
  • значения в свойстве

Префиксы, необходимые для стенографии

Если вы используете стенографию, вам потребуются префиксы поставщиков для Safari:

 text-decoration: подчеркивание волнистым красным; 
 -webkit-text-decoration: подчеркивание волнистым красным цветом;

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

text-decoration-thickness поддерживается не так хорошо, как другие

Поддержка браузером text-decoration-line , text-decoration-style и text-decoration-color довольно хороша . Все браузеры реализовали все три одновременно, но управление толщиной 90 362 подчеркивания 90 363 было введено намного позже. Фактически, в настоящее время его поддерживают только Safari и Firefox, поэтому мы все еще ждем Chrome (и, следовательно, Opera и Edge).

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

 text-decoration: подчеркивание сплошным красным цветом; 
 text-decoration: подчеркивание сплошным красным 5px;

text-decoration-thickness и проценты не работают хорошо

Также будьте осторожны, используя процентные значения для толщины, так как их поддерживает только Firefox.

Хорошей новостью является то, что процентные значения рассчитываются как процент от 1em, поэтому text-decoration-thickness: 0.1em совпадает с text-decoration-thickness: 10% , поэтому вы можете придерживаться em s, поскольку они делают одно и то же.

Всегда есть пиксели ( px ), но с точки зрения типографики лучше сохранять толщину линии по отношению к тексту, который она подчеркивает, поэтому, если пользователь увеличивает размер текста на своем экране, подчеркивание увеличивается пропорционально.

text-decoration-thickness беспорядка

Будьте осторожны при соединении text-decoration-style с text-decoration-thickness . Все, кроме сплошной линии по умолчанию (и, возможно, двойной линии ), может выглядеть беспорядочно, если установлена ​​слишком большая толщина. Те волнистые , пунктирные и точечные почти всегда обычно обрезаются в неаккуратных местах, когда они пропускают выносные элементы, и в конце слова.

Вопросы удобства использования

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

Так что вы, вероятно, в порядке, если вам нужно:

  • подчеркивание другого цвета
  • постепенно усиливающееся жирное подчеркивание
  • может даже двойное подчеркивание

Но будьте осторожны со всем остальным:

  • text-decoration-line: line-through в основном так выглядят элементы с перечеркнутым
  • text-decoration-line: overline выглядит странно и может сделать текст над ссылкой вместо ссылки
  • волнистый , пунктирный или пунктирный подчеркивания могут выглядеть как орфографические или грамматические ошибки в текстовом документе, а не как ссылки

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

Что бы я сделал

В сокращении используются префиксы поставщиков и хитрые двойные объявления, поэтому я бы начал с классического оформления текста : подчеркивание; и улучшить его. Я склонен избегать чего-либо, кроме простого подчеркивания, которое пользователи хорошо знают, поэтому text-decoration-line отсутствует; что оставляет мне всплеск цвета и хороший em 9Толщина на основе 0012 для браузеров, отличных от Chromium:

 a { 
 text-decoration: underline; 
 цвет оформления текста: красный; 
 text-decoration-thickness: 0.1em; 
 }

Подчеркивание текста CSS | Как использовать свойство положения подчеркивания текста

В этой статье мы узнаем о подчеркивании текста в CSS. Каскадная таблица стилей предназначена для презентации. Чем лучше мы используем стиль, тем более совершенной будет презентация. Сказав это, нужно знать, что существует множество деталей, о которых нужно позаботиться при стилизации с помощью CSS. В качестве простого примера возьмем подчеркивание текста. Теперь простое подчеркивание текста можно выполнить с помощью свойства text-decoration. Но чтобы исправить детализацию, мы должны вникнуть в ее тонкости и исправить свойства позиционирования и смещения. Именно об этом мы и поговорим в этой статье. text-underline-position и text-underline-offset — это улучшенные функции для добавления к подчеркиванию, предоставляемому свойством text-decoration: underline.

Синтаксис в подчеркивании текста

1. Положение подчеркивания текста: Это свойство определяет положение подчеркивания относительно текста.

Синтаксис для этого:

 положение подчеркивания текста: авто| под | слева| правильно| выше

Объяснение приведенного выше синтаксиса: Здесь значение автоматически выбирает положение для подчеркивания, а использование значения ниже гарантирует, что строка не пересекает нижние элементы, например, в случае нижних индексов, тогда как значение выше пересекает над спусками. Левое и правое положение подчеркивания такое же, как и в случае, если режим письма для текста горизонтальный. Они используются, когда режим текста переключается на вертикальный. Мы можем решить, будет ли подчеркивание лежать слева или справа от текста.

2. Text-underline-offset:  Это не подсвойство свойства text-decoration. Это свойство устанавливает расстояние смещения подчеркивания относительно его исходного положения. Расстояние смещения здесь означает расстояние от определенного пути.

Синтаксис для этого может быть следующим:

 text-underline-offset: length

Объяснение к приведенному выше синтаксису:  Здесь длина может быть указана в таких единицах, как em или cm. Они будут определять длину расстояния смещения. Однако это свойство не поддерживается многими браузерами, включая Chrome. Так что лучше обойти это при стилизации текста.

Пример реализации в CSS Text Underline

Ниже приведены примеры реализации для одного и того же:

Пример № 1

Демонстрация положения контура текста со значениями выше и ниже и наблюдение за различиями.

  • В этом примере мы проверим text-underline-position с двумя значениями, то есть выше и ниже. Мы можем наблюдать тонкую разницу между двумя значениями свойства в соответствующем выводе.
  • Во-первых, мы создадим файл CSS, так как мы используем внешний CSS.
  • Мы создадим класс, в котором мы будем использовать сокращенное свойство text-decoration для оформления подчеркивания. Далее мы будем использовать text-underline-position и определим его отдельно. Мы можем добавить другие функции по своему усмотрению. Код класса CSS должен выглядеть так:
    • .

Код: 

 .class1{
оформление текста: подчеркивание двойное зелёное;
позиция подчеркивания текста: под;
семейство шрифтов: «Franklin Gothic Medium», «Arial Narrow», Arial, без засечек;
}
  • Подобно предыдущему, мы определим еще один класс CSS и сохраним положение подчеркивания текста, как указано выше. Код должен быть похож на приведенный ниже:

Код: 

 . class2{
text-decoration: подчеркивание двойное фиолетовое;
text-underline-position: выше;
семейство шрифтов: 'Segoe UI', Tahoma, Geneva, Verdana, без засечек;
}
  • Окончательный код CSS должен быть примерно таким:

Код: 

 .класс1{
text-decoration: подчеркивание двойное зелёное;
text-underline-position: под;
семейство шрифтов: 'Franklin Gothic Medium', 'Arial Narrow', Arial, без засечек;
}
.класс2{
text-decoration: подчеркивание двойное фиолетовое;
text-underline-position: выше;
семейство шрифтов: 'Segoe UI', Tahoma, Geneva, Verdana, без засечек;
}
  • Далее мы создадим HTML-страницу. Кроме того, обязательно вызовите внешний файл CSS на странице. Поскольку мы определили классы CSS, мы можем использовать их с любым элементом HTML для применения стиля к этому конкретному элементу. В этом примере мы будем использовать его с элементом заголовка, то есть

    . Окончательный HTML-код должен выглядеть примерно так:

Код: 

 
<голова>
Свойство оформления текста
 css">

<тело>
Тестирование позиции подчеркивания текста: под
Проверка положения подчеркивания текста: выше

Вывод:

  • Мы можем ясно видеть, что, сделав положение как нижнее или верхнее, мы можем получить два разных стиля подчеркивания текстового содержимого.
Пример #2

Демонстрация положения контура текста с режимом письма и наблюдение за разницей значений слева и справа

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

Код: 

 .class1{
режим письма: вертикальный-lr;
положение: абсолютное;
padding-right: 100 пикселей;
text-decoration: подчеркивание двойное зелёное;
позиция подчеркивания текста: слева;
семейство шрифтов: 'Franklin Gothic Medium', 'Arial Narrow', Arial, без засечек;
}
  • Второй класс должен иметь подчеркивание справа от вертикально выровненного текста. Код должен быть похож на следующий:

Код: 

 .class2{
режим письма: вертикальный-lr;
отступ слева: 100 пикселей;
text-decoration: подчеркивание волнистым фиолетовым;
text-underline-position: справа;
семейство шрифтов: 'Segoe UI', Tahoma, Geneva, Verdana, без засечек;
}
  • Окончательный файл CSS должен выглядеть примерно так, как показано ниже:

Код: 

 . class1{
режим письма: вертикальный-lr;
положение: абсолютное;
padding-right: 100 пикселей;
text-decoration: подчеркивание двойное зелёное;
позиция подчеркивания текста: слева;
семейство шрифтов: 'Franklin Gothic Medium', 'Arial Narrow', Arial, без засечек;
}
.класс2{
режим письма: вертикальный-lr;
отступ слева: 100 пикселей;
text-decoration: подчеркивание волнистым фиолетовым;
text-underline-position: справа;
семейство шрифтов: 'Segoe UI', Tahoma, Geneva, Verdana, без засечек;
}
  • Конечная HTML-страница должна вызывать внешний CSS и включать оба класса при стилизации элементов. Код HTML-страницы должен выглядеть следующим образом:
    • .

Код: 

 
<голова>
Свойство оформления текста


<тело>
Проверка положения подчеркивания текста: слева
Проверка положения подчеркивания текста: выше
  • Сохраните этот код и откройте HTML-файл в браузере. Окончательный результат должен выглядеть примерно так, как показано на скриншоте ниже:
    • .

Вывод:

Пример #3

Использование позиции подчеркивания текста во встроенном стиле CSS

  • некоторые тексты. Окончательный HTML-код должен выглядеть так:
    • .

Код: 

 
<голова>
свойство text-decoration

<тело>
ЭТО ВСТРОЕННЫЙ CSS ДЛЯ ПОДЧЕРКИВАНИЯ ТЕКСТА
  • Сохраните файл и откройте его в браузере. Конечный результат должен выглядеть так:

Выход:

Таким образом, мы увидели, как использовать свойство text-underline-position при стилизации через CSS. Это функция или свойство, которое можно использовать для получения более мелких деталей. Его можно назвать свойством улучшения и использовать для специальных целей.

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

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