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

Содержание

text-decoration | htmlbook.ru

Internet Explorer Chrome Opera Safari Firefox Android iOS
6.0+ 1.0+ 4.0+ 1.0+ 1.0+ 1.0+ 1.0+

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

Версии CSS

Описание

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

Синтаксис

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

Значения

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

Пример

HTML5CSS2.1IECrOpSaFx

<!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="1.html">Стратегическое нападение</a></p>
 </body>
</html>

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

[window.]document.getElementById(«elementID»).style.textDecoration

[window. ]document.getElementById(«elementID»).style.textDecorationBlink

[window.]document.getElementById(«elementID»).style.textDecorationLineThrough

[window.]document.getElementById(«elementID»).style.textDecorationNone

[window.]document.getElementById(«elementID»).style.textDecorationOverLine

[window.]document.getElementById(«elementID»).style.textDecorationUnderline

Браузеры

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

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

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

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

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

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

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Линия под заголовком</title>
  <style>
   h2 {
    font-size: 200%; /* Размер шрифта */
    border-bottom: 2px solid maroon; /* Параметры линии под текстом */
    font-weight: normal; /* Убираем жирное начертание */
    padding-bottom: 5px; /* Расстояние от текста до линии */
   }
  </style>
 </head>
 <body>
  <h2>Пример текста</h2>
  <p>Черный заголовок привлекает к себе внимание, 
   несмотря на то, что он черный, а не белый.</p>
 </body>
</html>

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

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

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

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

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

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Подчеркивание заголовка</title>
  <style>
   h2 {
   text-decoration: underline; /* Подчеркивание заголовка */
   }
  </style>
 </head>
 <body>
  <h2>Пример текста</h2>
  <p>Черный заголовок привлекает к себе внимание, 
   несмотря на то, что он черный, а не белый.</p>
 </body>
</html>

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

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

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

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

Серёжа СыроежкинКопирайтер

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

Конструктор сайтов <u>"Нубекс"</u>

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

Подчеркнуть текст — CSS

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

<!DOCTYPE html>
<html>
 <head>
    <title>Подчеркнутый текст с помощью CSS - "Нубекс"</title>
	<meta charset="utf-8">
	<style>
	   .underline {
	   text-decoration: underline;
	   }
	</style>
 </head>
  <body>
	 <p>Конструктор сайтов <span>Нубекс"</span></p>
  </body>
</html>

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

  • Подчеркнуть текст пунктиром CSS:
    <!DOCTYPE html>
    <html>
     <head>
        <title>Подчеркнутый пунктиром текст - "Нубекс"</title>
    	<meta charset="utf-8">
    	<style>
    	   . dashed {
    	   border-bottom: 1px dashed blue;
    	   }
    	</style>
     </head>
      <body>
    	 <p>Конструктор сайтов <span>Нубекс"</span></p>
      </body>
    </html>

  • Подчеркивание точками:
    <!DOCTYPE html>
    <html>
     <head>
        <title>Подчеркнутый точками текст - "Нубекс"</title>
    	<meta charset="utf-8">
    	<style>
    	   .dotted {
    	   border-bottom: 2px dotted blue;
    	   }
    	</style>
     </head>
      <body>
    	 <p>Конструктор сайтов <span>Нубекс"</span></p>
      </body>
    </html>

  • Двойная черта:
    <!DOCTYPE html>
    <html>
     <head>
        <title>Подчеркнутый двумя линиями текст - "Нубекс"</title>
    	<meta charset="utf-8">
    	<style>
    	   . double {
    	   border-bottom: double blue;
    	   }
    	</style>
     </head>
      <body>
    	 <p>Конструктор сайтов <span>Нубекс"</span></p>
      </body>
    </html>

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

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

Перечёркнутый текст в 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 — подчёркнутый и зачёркнутый текст

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



12. 0+ 3.0+ 1.0+ 1.0+ 3.5+ 1.0+

Описание

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

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

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


/*делаем подчёркнутый текст*/
span {text-decoration: underline;}

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


/*убираем подчёркивание ссылок*/
a {text-decoration: none;}

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


/*убираем подчёркивание ссылок*/
a {text-decoration: none;}

/*задаём подчёркивание ссылок при наведении*/
a:hover {text-decoration: underline;}

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

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







Значение по умолчанию: none
Применяется: ко всем элементам, а также к псевдо-элементам ::first-letter и ::first-line
Анимируется: нет
Наследуется: нет
Версия: CSS1
Синтаксис JavaScript: object. style.textDecoration=»overline»

Синтаксис

text-decoration: none|underline|overline|line-through|inherit;

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







Значение Описание
none Оставляет текст без изменений.
underline Определяет горизонтальную линию под текстом.
overline Определяет горизонтальную линию над текстом.
line-through Определяет линию перечеркивающую текст.
inherit Указывает, что значение наследуется от родительского элемента.

Пример

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


div {

text-decoration: none;

}

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

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

div.usage { font-style: italic; margin-left... margin-right... ; }

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

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

html

css

Поделиться

Источник


SabreWolfy    

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

9 ответов




13

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

<div>This is <em>very</em> important.</div>

и

em { text-decoration:underline; }

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

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

Поделиться


Nix    

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



4

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

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

<div>This is <strong>very</strong> important.</div>

strong {
  font-weight: normal;
  text-decoration: underline;
}

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

.usage strong {
  font-weight: normal;
  text-decoration: underline;
}

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

Поделиться


Waiting for Dev…    

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



1

Свойство «text-decoration: underline» позволяет отменить выравнивание текста.

Поделиться


Unknown    

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


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

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

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

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



1

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

.usage strong { font-weight: bold; }

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

Поделиться


nickvane    

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



1

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

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

<strong>this is important</strong>

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

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

<p>text <span>hightlighed</span> text</p>

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

  span.highlight {
    background-color: #FF9;
  }

Поделиться


methodofaction    

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



0

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

HTML

<div>
    <p>
        This is just a text to check <span>underline</span> with CSS
    </p>

</div>

CSS

div p { font-style: italic; }

div p span{ text-decoration: underline;}

Поделиться


Murtaza    

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



0

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

u { text-decoration: none; font-weight: bold; }

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

Поделиться


Jukka K. Korpela    

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



-1

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

<div>This is <span>very</span> important. </div>

css:

.underline { text-decoration: underline; }

Поделиться


Adaz    

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



-1

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

.underline {
  text-decoration:underline;
}

<div> This is <span>very</span> important.</div>

Поделиться


rahool    

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Я пытаюсь добавить подчеркивание к одному из символов в plt.text. plt.text(.5,.5,r’\underline{O}H’) Это, кажется, не работает , я попытался использовать \overline{O} , который работает просто…

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

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

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

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

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

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


HTML

<div>
  <p>
    Подчеркнутый текст.
  </p>
</div>


CSS

.box{
    width: 300px;
    margin: 0px auto;
    padding: 3px 20px;
    border-radius: 8px;
    background-color: #fc0;
    border: 3px solid #960;
}
. box p{
    font-size: 25px;
    font-weight: bold;
    text-align: center;
    text-decoration: underline;
}


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


HTML

<div>
  <p>
    Перечёркнутый текст.
  </p>
</div>


CSS

.box p{
    font-size: 25px;
    font-weight: bold;
    text-align: center;
    text-decoration : line-through; 
}


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


HTML

<div>
  <p>
    Отмена эффектов.
  </p>
</div>


CSS

. box p{
    font-size: 25px;
    font-weight: bold;
    text-align: center;
    text-decoration : none;
}


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

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


HTML

<div>
  <p>
    Линия над текстом.
  </p>
</div>


CSS

text-decoration : overline;


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


HTML

<div>
  <p>
    Пульсирующий текст.
  </p>
</div>


CSS

text-decoration : blink;


HTML тег u

Пример

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

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

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

Дополнительные примеры «Попробуйте сами» ниже.


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

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

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


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

Элемент
Есть Есть Есть Есть Есть

Глобальные атрибуты

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


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

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



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

Пример

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

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

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


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


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

Учебное пособие по HTML: Форматирование текста HTML

Ссылка на HTML DOM: подчеркнутый объект


Настройки CSS по умолчанию

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

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

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

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

Пример




оформление текста
<стиль>
h2 {
цвет синий;
}
тело {
выравнивание текста: центр;
}
п{
размер шрифта: 25 пикселей;
}
# p1 {
оформление текста: подчеркивание;
цвет оформления текста: синий;
}

Добро пожаловать в javaTpoint.

com

Привет, добро пожаловать на сайт javaTpoint.com. Этот сайт разработан для того, чтобы студенты могли легко изучать технологии, связанные с информатикой. JavaTpoint.com всегда предоставляет простые и подробные учебники по различным технологиям. Никто не совершенен в этом мире, и ничто не вечно лучше. Но мы можем попытаться стать лучше.


Проверить это сейчас

Выход

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

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

Пример

В этом примере мы также используем свойство text-decoration-style , которое задает стиль для подчеркивания выделенного текста. Мы используем значение double этого свойства. Здесь есть два элемента , которые содержат текст, который необходимо подчеркнуть.



оформление текста
<стиль>
h2 {
красный цвет;
}
тело {
выравнивание текста: центр;
}
п{
размер шрифта: 25 пикселей;
}
охватывать {
оформление текста: подчеркивание;
цвет оформления текста: красный;
стиль оформления текста: двойной;
}

Добро пожаловать в

javaTpoint.com

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


Проверить это сейчас

Выход


Подчеркнуть текст CSS: как подчеркнуть текст в CSS?

В общем веб-дизайне наиболее узнаваемым стилем по-прежнему является синий текст с подчеркиванием , который наверняка вас куда-то приведет.Элемент ссылки имеет этот стиль по умолчанию, и это единственный цвет в режиме по умолчанию. Так что мы должны относиться к этому с уважением.

Хотя снаружи есть новый мир, и старые вещи улучшаются, по крайней мере, в несколько этапов. Элементы ссылки больше не нужно подчеркивать, а строка под текстом сегодня — это не просто идентификация ссылки. Этот краткий курс в основном посвящен опции подчеркивания text-decoration CSS и «связанным» параметрам.

Перво-наперво — если вам нужно быстрое, простое, регулярное подчеркивание, всегда есть HTML-элемент . Он собирается сделать строку в цвет текста на позиции по умолчанию из текста. Фактически, элемент просто добавляет текстовое оформление: подчеркивание текста с помощью встроенного в браузер CSS.

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

Есть два основных варианта добавления строки под текстом с помощью CSS.
Первый — это свойство text-decoration , которое определяет украшение, добавленное к тексту.Возможные значения этого свойства: подчеркивание, подчеркивание и переход строки . Свойство text-decoration должно быть сокращенным свойством для text-decoration-line, text-decoration-color и text-decoration-style, но это пока плохо поддерживается. На данный момент у нас есть текстовое украшение, и с его помощью мы можем добавить строку под, поверх или через текст, с text-decoration-color мы можем раскрасить эту строку, а с text-decoration-style мы можем сделать это двойной, пунктирный, штриховой или волнистый.

Второе решение — своего рода взлом и подразумевает использование border-bottom . Свойство display в этом случае должно быть inline . С помощью этого решения мы можем контролировать положение линии с помощью свойства padding-bottom , толщину линии с border-bottom-width , стиль с border-bottom-style и цвет с border-bottom- цвет . Border-bottom-style имеет те же параметры, что и text-decoration-style, и некоторые параметры 3D-эффекта.Эта опция предлагает больше опций и переменных, но ее сложнее использовать.

Сделать точечно-волнистое подчеркивание по-прежнему невозможно. Жду его 🙁

Этот пост изначально был опубликован в блоге Колосек.

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


Пример
<стиль>
h2 {
шрифт: 100 3em без засечек;
оформление текста: подчеркивание;
текст-подчеркивание-позиция: под;
}

Пример

Свойство CSS text-underline-position устанавливает позицию подчеркивания, указанного в элементе.

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

Если указано слева или справа , подразумевается под .

Синтаксис

положение подчеркивания текста: авто | [под || [слева | справа]]

Возможные значения

авто
Браузер / пользовательский агент может использовать любой алгоритм для определения позиции подчеркивания; однако он должен располагаться на уровне буквенного обозначения или ниже него.
под
Подчеркивание располагается под текстовым содержимым элемента. В этом случае подчеркивание обычно не пересекает нижние элементы. Это иногда называют подчеркиванием «бухгалтерский учет». Это ниже обычного «буквенного» подчеркивания. Это значение можно комбинировать с слева или справа , если конкретная сторона предпочтительна в режимах вертикального письма.
слева
Используется при отображении текста в режиме вертикального письма (например, текст читается вертикально сверху вниз или наоборот).

В режимах вертикального письма подчеркивание выравнивается так же, как для по , за исключением того, что оно всегда выравнивается по левому краю текста. Если это приводит к тому, что подчеркивание рисуется на стороне «сверху» текста, то верхняя линия также меняет стороны и рисуется на стороне «снизу».

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

В режимах вертикального письма подчеркивание выравнивается так же, как для по , за исключением того, что оно всегда выравнивается по правому краю текста. Если это приводит к тому, что подчеркивание рисуется на стороне «сверху» текста, то верхняя линия также меняет стороны и рисуется на стороне «снизу».

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

начальный
Представляет значение, указанное в качестве начального значения свойства.
наследовать
Представляет вычисленное значение свойства родительского элемента.
снято
Это значение действует как наследует или как начальный , в зависимости от того, унаследовано свойство или нет. Другими словами, он устанавливает для всех свойств их родительское значение, если они наследуются, или их начальное значение, если они не наследуются.

Основная информация об имуществе

Начальное значение
авто
Относится к
Все элементы
Унаследовано?
Есть
Медиа
Визуальный
Анимационный

Пример кода

Базовый CSS

Вот пример базовой декларации. Объявление состоит из свойства и его значения.

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

Рабочий пример в HTML-документе


Пример
<стиль>
h2 {
шрифт: 100 3em без засечек;
оформление текста: подчеркивание;
текст-подчеркивание-позиция: под;
}

Пример

Попробуй

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

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

Следующая таблица предоставлена ​​Caniuse.com показывает уровень поддержки этой функции браузером.

Префиксы поставщиков

Для максимальной совместимости с браузером многие веб-разработчики добавляют свойства браузера, используя такие расширения, как -webkit- для Safari, Google Chrome и Opera (более новые версии), -ms- для Internet Explorer, -moz- для Firefox, -o- для более старых версий Opera и т. д. Как и в случае любого свойства CSS, если браузер не поддерживает проприетарное расширение, он просто проигнорирует его.

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

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

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

Вы также можете использовать Autoprefixer с такими препроцессорами, как Less и Sass.

Когда лучше всего использовать теги представления HTML или CSS для стилизации элементов?

Когда лучше всего использовать теги представления HTML или CSS для стилизации элементов? — Переполнение стека

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

Спросил

Просмотрено
199 раз

Закрыт .Этот вопрос основан на мнении. В настоящее время он не принимает ответы.


Хотите улучшить этот вопрос? Обновите вопрос, чтобы на него можно было ответить с помощью фактов и цитат, отредактировав это сообщение.

Закрыт 9 месяцев назад.

В чем разница между использованием этого метода в HTML и CSS путем создания as вместо просто using.

  

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

в HTML?

HTML с использованием класса …

  

профессиональный программист.

CSS класс

  .pro {text-decoration: underline;}
  

Результат тот же, но мне интересно, есть ли причина, почему я должен использовать одно вместо другого.

Мэтью

1,19211 золотых знаков99 серебряных знаков1616 бронзовых знаков

Создан 23 сен.

Тег


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

Отказ от использования

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

Чтобы подчеркнуть текст без какого-либо семантического значения, используйте элемент со свойством text-decoration , установленным на «подчеркивание» .

ПРИМЕЧАНИЕ:

Наряду с другими элементами чистого стиля, исходный элемент HTML Underline () объявлен устаревшим в HTML 4 ; однако был восстановлен в HTML 5 с новым семантическим значением: пометить текст как имеющий некоторую форму нетекстовой аннотации.

Важное примечание: —

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

Тег


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

  .pro {text-decoration: underline;}  
  

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

профессиональный программист.

Создан 23 сен.

Rayees ACRayees AC

3,155 33 золотых знака66 серебряных знаков2727 бронзовых знаков

0

Оба хороших способа подчеркнуть ваш текст, но я бы посоветовал вам использовать тег html u , потому что он сделает ваш html менее беспорядочным и более организованным.Счастливое кодирование

Создан 23 сен.

, хотя диапазон используется для стилизации, тег u является семантически правильным.

Создан 23 сен.

Если ваша цель — подчеркнуть текст, вы можете использовать оба способа.

Тег HTML объявлен устаревшим, но возвращен в HTML5, поэтому вы можете обнаружить некоторую несовместимость с ним.

Использование атрибута стиля переопределяет любой набор стилей глобально. Он переопределит любой стиль, установленный в теге HTML или внешней таблице стилей. Как вы можете видеть в первой фразе сниппета.

  .override {
текст-оформление: надстрочный;
}

.underline {
оформление текста: подчеркивание;
}
.Линия, проходящая через{
текстовое оформление: сквозное;
}
.overline {
текст-оформление: надстрочный;
}  
  

Это моя первая фраза

Это моя вторая фраза

Это моя третья фраза

Это моя четвертая фраза

Создан 23 сен.

Сэм Сэм

61322 серебряных знака1515 бронзовых знаков

0

lang-html

Stack Overflow лучше всего работает с включенным JavaScript

Ваша конфиденциальность

Нажимая «Принять все файлы cookie», вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в ​​отношении файлов cookie.

Принимать все файлы cookie

Настроить параметры

Как установить разрыв между текстом и подчеркиванием с помощью CSS?

Как установить разрыв между текстом и подчеркиванием с помощью CSS?

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

Подход: Уловка, которую мы собираемся использовать для достижения этой цели, используя свойство border-bottom-style и padding-bottom . Вместо использования встроенного оформления текста : подчеркивание; , мы собираемся создать собственное подчеркивание, используя свойство border-bottom-style, а затем мы можем добавить padding-bottom, чтобы отодвинуть его на столько, сколько захотим.

Синтаксис:

 .class_name {
    padding-bottom: value;
    стиль нижнего края: сплошной;
} 

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

< html >

< голова >

название >

Как установить зазор между текстом

и подчеркиванием с помощью CSS?

название >

< стиль >

.строка {

/ * Увеличьте это согласно требованию * /

padding-bottom: 15px;

граница снизу: сплошная;

ширина нижнего края границы: 3,1 пикселя;

ширина: fit-content;

}

.обычное подчеркивание {

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

}

стиль >

головка >

< корпус

5> 900

< h2 class = «нормальное подчеркивание» >

GeeksforGeeks: с нормальным подчеркиванием

h2 > 900

< h2 класс = «линия» >

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

h / >

корпус >

html >

Вывод:

10 CSS-фрагментов для создания потрясающих анимированных текстовых эффектов с подчеркиванием

Подчеркивание CSS по умолчанию отлично работает.Кто мог это ненавидеть?

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

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

Панель инструментов веб-дизайнера

Неограниченное количество скачиваний: более 1 000 000 веб-шаблонов, тем, плагинов, ресурсов дизайна и многого другого!

1.Чередование подчеркивания

Если вы переместите курсор между этими ссылками, вы заметите что-то забавное. Эффект подчеркивания в меню навигации фактически изменяет стили между ссылками.

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

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

2. Составление нескольких строк

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

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

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

3. Подчеркивание

Разработчик

Райан Морс (Ryan Morse) создал этот очень простой эффект скользящего подчеркивания, основанный исключительно на CSS. Это довольно элегантное решение, учитывая, что для него даже не требуется дополнительный элемент HTML.

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

4. Лучшее подчеркивание текста

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

В улучшенном подчеркивании текста Лукаса Хорака вы заметите, что полоса под текстом лучше вписывается в нисходящие элементы. При этом учитываются такие формы букв, как «g» и «p», где строки опускаются ниже обычной высоты строки.

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

5.Стили анимации

Это уникальное перо обладает несколькими настраиваемыми эффектами подчеркивания, созданными с помощью чистого CSS разработчиком Мэтью Скоттом.

Он может похвастаться четырьмя очень специфическими стилями подчеркивания, основанными на некоторых общих переходах CSS:

  • Справа налево
  • Слева направо
  • Анимация вовне
  • Анимация внутрь

Вы заметите, что это работает с обычными переходами CSS3, которые работают как при наведении курсора на ссылку, так и при перемещении курсора за пределы ссылки.

Определенно несколько классных эффектов, и все они довольно легко переносятся в свои собственные проекты.

6. Дополнительные стили анимации

Вот еще один набор пользовательских анимаций подчеркивания, созданных разработчиком Ксесо.

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

7. Просто захожу

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

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

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

8. Расширение анимации

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

Обратите внимание, что функция cubic-bezier () используется для создания уникальной анимации при наведении курсора.

Это выполняется немного быстрее, чем стандартный «линейный» переход, поэтому дает совсем другой эффект. И вы даже можете попробовать настроить анимацию Безье самостоятельно, чтобы создать уникальный стиль подчеркивания.

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

Вот еще один стиль, который действительно может работать на любом веб-сайте.Разработчик Тристан Уилсон создал эти простые подчеркивания, которые обрамляют линию на несколько пикселей ниже текста.

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

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

10. Установка между спусковыми механизмами

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

Весь эффект зависит от пары свойств CSS3: box-shadow и text-shadow , если быть точным.

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

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

11. Пользовательские градиенты

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

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

Из всех этих дизайнов я, конечно, надеюсь, что есть один приятный эффект, который вы можете извлечь из этой коллекции.

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

.

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

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