Как подчеркнуть текст в html css
Перейти к содержимому

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

  • автор:

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

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

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

HTML5 CSS 2.1 IE Cr Op Sa Fx

    Линия под заголовком   

Пример текста

Черный заголовок привлекает к себе внимание, несмотря на то, что он черный, а не белый.

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

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

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

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

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

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

HTML5 CSS 2.1 IE Cr Op Sa Fx

    Подчеркивание заголовка   

Пример текста

Черный заголовок привлекает к себе внимание, несмотря на то, что он черный, а не белый.

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

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

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

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

HTML тег

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

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

Атрибуты

Стиль по умолчанию

Пример

   

Это обычный абзац.

Результат данного примера в окне браузера:

Пример использования тега <u></p>
<p>» /></p>
<p>Копирование материалов с данного сайта возможно только с разрешения администрации сайта <br />и при указании прямой активной ссылки на источник. <br />2011 – 2023 © puzzleweb.ru | razumnikum.ru</p>
<h2>Как сделать подчёркнутый текст?</h2>
<p>Таким образом, если требуется не только подчеркнуть слова, но и выделить их на фоне остального текста, используйте элемент (пример 1).</p>
<p>Пример 1. Элемент</p>
<p>Для простого оформления текста с помощью подчёркивания воспользуйтесь свойством text-decoration со значением underline (пример 2).</p>
<p>Пример 2. Использование text-decoration</p><div class='code-block code-block-4' style='margin: 8px 0; clear: both;'>
<!-- 48vs -->
<script src=

См. также

  • text-decoration
  • Начертание
  • Оформление ссылок
  • Продвинутая семантика и доступность
  • Свойства текста в CSS
  • Стилизация ссылок

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

CSS text decoration

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

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

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

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

 HTML 
Подчеркнутый текст.

 CSS .box < width: 300px; margin: 0px auto; padding: 3px 20px; border-radius: 8px; background-color: #fc0; border: 3px solid #960; >.box p

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

Как сделать перечеркнутый текст

 HTML 
Перечёркнутый текст.

 CSS .box p

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

CSS убрать нижнее подчеркивание

 HTML 
Отмена эффектов.

 CSS .box p

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

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

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

 HTML 
Линия над текстом.

 CSS text-decoration : overline; 

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

Мигающий текст CSS

 HTML 
Пульсирующий текст.

 CSS text-decoration : blink; 

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

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

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

HTML5 CSS 2.1 IE Cr Op Sa Fx

    Линия под заголовком   

Пример текста

Черный заголовок привлекает к себе внимание, несмотря на то, что он черный, а не белый.

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

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

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

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

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

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

HTML5 CSS 2.1 IE Cr Op Sa Fx

    Подчеркивание заголовка   

Пример текста

Черный заголовок привлекает к себе внимание, несмотря на то, что он черный, а не белый.

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

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

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

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

Как сделать подчёркнутый текст?

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

Пример 1. Элемент

Для простого оформления текста с помощью подчёркивания воспользуйтесь свойством text-decoration со значением underline (пример 2).

Пример 2. Использование text-decoration

См. также

  • text-decoration
  • Начертание
  • Оформление ссылок
  • Продвинутая семантика и доступность
  • Свойства текста в CSS
  • Стилизация ссылок

text — decoration

Добавляем любому тексту чёрточку. Или убираем, где она есть, но не нужна.

Время чтения: меньше 5 мин

Открыть/закрыть навигацию по статье
Контрибьюторы:

  • Егор Левченко ,
  • Светлана Коробцева

Обновлено 5 июля 2023

Кратко

Скопировать ссылку «Кратко» Скопировано

Свойство text — decoration позволяет добавить декоративные линии тексту. Текст можно подчеркнуть, перечеркнуть или добавить линию над текстом.

text — decoration : underline часто встречается при работе со ссылками.

Пример

Скопировать ссылку «Пример» Скопировано

Создадим четыре абзаца текста. По одному для каждого из доступных значений свойства text — decoration .

   

Диакритические знаки.

В типографике.

Диакритическими знаками не могут.

Черта сверху — типографический знак.

div class="parent"> p class="none">Диакритические знаки. p> p class="underline">В типографике. p> p class="line-through">Диакритическими знаками не могут. p> p class="overline">Черта сверху — типографический знак. p> div>
 .none  /* Значение по умолчанию, ничего не меняется */ text-decoration: none;> .underline  /* Нижнее подчёркивание */ text-decoration: underline;> .line-through  /* Перечёркнутый текст */ text-decoration: line-through;> .overline  /* Линия над текстом */ text-decoration: overline;> .none  /* Значение по умолчанию, ничего не меняется */ text-decoration: none; > .underline  /* Нижнее подчёркивание */ text-decoration: underline; > .line-through  /* Перечёркнутый текст */ text-decoration: line-through; > .overline  /* Линия над текстом */ text-decoration: overline; >      

Как понять

Скопировать ссылку «Как понять» Скопировано

По факту свойство text — decoration является шорткатом и позволяет указать значения для свойств:

  • text — decoration — line — положение декоративной линии;
  • text — decoration — style — стиль декоративной линии;
  • text — decoration — color — цвет декоративной линии.

Но, как правило, его используют только для указания положения линии.

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Положение линии

Скопировать ссылку «Положение линии» Скопировано

Пишем свойство text — decoration и после двоеточия указываем одно из доступных значений:

  • underline — подчёркнутый текст.
  • line — through — перечёркнутый текст.
  • overline — надчёркнутый текст, линия находится над словами.
  • none — отменяет все эффекты.

Выше указаны стандартные значения, с которыми вы будете сталкиваться чаще всего.

Стиль линии

Скопировать ссылку «Стиль линии» Скопировано

Не многие знают, что после ключевого слова, означающего положение линии, можно указать ещё и стиль этой линии и её цвет.

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

  • solid — сплошная линия. Значение по умолчанию.
  • double — двойная линия.
  • dotted — точечная линия.
  • dashed — пунктирная линия.
  • wavy — волнистая линия.

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

Как будет выглядеть двойное перечёркивание:

 p  text-decoration: line-through double;> p  text-decoration: line-through double; >      

Стиль линии можно указать отдельно при помощи свойства text — decoration — style .

Цвет линии

Скопировать ссылку «Цвет линии» Скопировано

Цвет линии по умолчанию совпадает с цветом текста, для которого задаётся свойство text — decoration .

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

Например, сделаем двойное подчёркивание красного цвета:

 p  text-decoration: underline double #ff0000;> p  text-decoration: underline double #ff0000; >      

Цветом линии можно управлять отдельно при помощи свойства text — decoration — color :

Подсказки

Скопировать ссылку «Подсказки» Скопировано

�� Свойство не наследуется.

�� Значение по умолчанию для обычного текста — none . Но для ссылок ( ) значение по умолчанию — underline .

�� Свойство text — decoration целиком нельзя анимировать при помощи свойства transition ��

Но можно анимировать цвет линии!

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

 

К диакритикам.

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

Эпанортозис.

В большинстве языков.

p class="none">К диакритикам. p> p class="underline">Дополнение подчёркивается. p> p class="line-through">Эпанортозис. p> p class="overline">В большинстве языков. p>
 p  transition: text-decoration-color 0.3s;> .none  text-decoration: none;> .underline  text-decoration: underline;> .line-through  text-decoration: line-through;> .overline  text-decoration: overline;> .dotted  text-decoration-style: dotted;> .double  text-decoration-style: double;> .wavy  text-decoration-style: wavy;> .blue:hover  text-decoration-color: #1a5ad7;> .red:hover  text-decoration-color: #ed6742;> .green:hover  text-decoration-color: #49a16c;> p  transition: text-decoration-color 0.3s; > .none  text-decoration: none; > .underline  text-decoration: underline; > .line-through  text-decoration: line-through; > .overline  text-decoration: overline; > .dotted  text-decoration-style: dotted; > .double  text-decoration-style: double; > .wavy  text-decoration-style: wavy; > .blue:hover  text-decoration-color: #1a5ad7; > .red:hover  text-decoration-color: #ed6742; > .green:hover  text-decoration-color: #49a16c; >      

�� Нельзя управлять толщиной и точным положением линии, заданной при помощи text — decoration .

�� Если по дизайну требуется задать тексту или ссылке подчёркивание, отличающееся от стандартного по толщине или положению, а также если нужно анимировать появление / пропадание линии, то используй псевдоэлементы : : before или : : after .

На практике

Скопировать ссылку «На практике» Скопировано

Егор Левченко советует

Скопировать ссылку «Егор Левченко советует» Скопировано

�� Иногда вам может потребоваться управлять расстоянием между текстом и линией ниже. Обычно это делается, через свойство line — height . Чем больше высота строки, тем ниже будет полоса подчёркивания.

К сожалению, этот способ подходит не всегда. Например, когда дизайнер задумал элемент несколько иначе. На примере ниже отказываемся от text — decoration и используем border — bottom или логический аналог border — block — end .

       О магазине   О тыквах   О нас   Контакты      

Магазин «Резная тыква»

header> div class="container top"> nav> ul class="navigation"> li class="navigation__item"> a href="#" class="navigation__link">О магазинеa> li> li class="navigation__item"> a href="#" class="navigation__link">О тыквахa> li> li class="navigation__item"> a href="#" class="navigation__link">О насa> li> li class="navigation__item"> a href="#" class="navigation__link">Контактыa> li> ul> nav> div> div class="container"> h1>Магазин «Резная тыква»h1> div> header>
 .navigation__link, .navigation__link:visited  /* делаем элементы строчно-блочными */ display: inline-block; /* убираем подчёркивание */ text-decoration: none;> .navigation__link:hover  /* нивелируем размеры рамки */ padding-bottom: 20px; /* добавляем рамку снизу */ border-bottom: 4px solid currentColor;> .navigation__link, .navigation__link:visited  /* делаем элементы строчно-блочными */ display: inline-block; /* убираем подчёркивание */ text-decoration: none; > .navigation__link:hover  /* нивелируем размеры рамки */ padding-bottom: 20px; /* добавляем рамку снизу */ border-bottom: 4px solid currentColor; >      

Открыть демо в новой вкладке + Развернуть

Алёна Батицкая советует

Скопировать ссылку «Алёна Батицкая советует» Скопировано

�� У ссылок по умолчанию задано подчёркивание. Если по дизайну оно не требуется, то нужно будет его сбросить — задать свойство text — decoration : none . Это самый частый случай применения этого свойства. Перечёркивание или надчёркивание почти не встречаются в работе.

�� Отдельные свойства — text — decoration — line , text — decoration — style и text — decoration — color — редко встречаются в вёрстке, но знать о них нужно, чтобы при необходимости не переписывать свойство целиком только для изменения стиля или цвета линии.

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

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

Команда контент-менеджеров wikiHow тщательно следит за работой редакторов, чтобы гарантировать соответствие каждой статьи нашим высоким стандартам качества.

Количество просмотров этой статьи: 38 918.

В этой статье:

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

Метод 1 из 2:

Современный метод

Step 1 Используйте свойство «text-decoration» в CSS.

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

Step 2 Используйте тег.

Используйте тег , чтобы подчеркнуть определенный фрагмент текста. Введите открывающий тег вместе со свойством «text-decoration» перед текстом, который нужно подчеркнуть. В конце текста введите закрывающий тег . [1] X Источник информации

span style="text-decoration: underline;">Этот текст будет подчеркнут.span> 

Step 3 Укажите HTML-элементы в разделе 

<style></p>
<p>, чтобы упростить подчеркивание.» width=»460″ height=»345″ /></p>
<p><b>Укажите HTML-элементы в разделе , чтобы упростить подчеркивание.</b> Также это можно сделать с помощью таблицы стилей CSS. Например, чтобы подчеркнуть все заголовки уровня 3, добавьте следующий код в раздел «style»:</p>
<pre><span ><span >html</span><span >></span> <span ><span >head</span><span >></span> <span ><span >style</span><span >></span> <span >h3</span> <span > <span >text-decoration</span><span >:</span> <span >underline</span><span >;</span> <span >></span> <span ></</span><span >style</span><span >></span> <span ></</span><span >head</span><span >></span> <span ><span >body</span><span >></span> <span ><span >h3</span><span >></span>Этот заголовок будет подчеркнут<span ></</span><span >h3</span><span >></span> <span ></</span><span >body</span><span >></span> <span ></</span><span >html</span><span >></span> </pre>
<p><img loading=

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

html> head> style> .underline  text-decoration: underline; > style> head> body> Используйте этот класс для div class="underline">быстрого подчеркиванияdiv> различных div class="underline">элементовdiv> body> html> 

Step 5 Подумайте о других способах выделения текста.

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

html> head> style> em  color: red; > style> head> body> Все, что находится в элементе «em», будет выделено em>курсивом (по умолчанию), а также окрашено в красный цветem> благодаря дополнительным параметрам стиля. body> html> 

Метод 2 из 2:

Устаревший метод

Step 1 Избегайте использования старых тегов .

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

Step 2 Используйте теги.

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

html> body> Старый HTML-тег u> позволял быстро подчеркивать элементы u>, но если затрагивались другие элементы стиля, все становилось хаотичным. Поэтому сейчас для подчеркивания используют CSS-элемент «text-decoration». body> html> 

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

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