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

Leave a Comment / Css / By /

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

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

5.06.2015

Подчеркнутый текст в 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 (нижняя граница). С помощью этого параметра можно задать тип подчеркивания, цвет, толщину.

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

  • Шрифты CSS
  • Тень текста
  • Зачеркнутый текст HTML
  • Жирный текст CSS
  • Курсив CSS

магазин, разработка, контент, новости, домен, главная страница, клиенты, продвижение, реклама, соцсети, кнопки, функционал, html, текст, шрифты, html5, видео, звук, seo, история, css, фон, хостинг, дизайн, мобильная версия, посещаемость, фото, типографика, создание сайтов, ссылка, ошибки, проверка, Яндекс, Сайт для детского сада,

Раз в неделю мы отправляем дайджест с популярными статьями по теме образования

Адрес эл.

почты*

Узнаем как изготовить зачеркнутый текст в CSS

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

Присвоение

Подчеркнуть и зачеркнуть текст в CSS можно с помощью команды «text-decoration». Эффект будет зависеть от того, какое указано значение. CSS был придуман, чтобы разделить логическую и структурную часть веб-страницы. Но до появления каскадных таблиц стилей использовались HTML-теги, которые имели аналогичное значение. К примеру, такой элемент, как <strike> позволяет вывести зачеркнутый текст. Сейчас данный тег признан нежелательным, и его применение автоматически сделает ваш код страницы невалидным. Хотя при этом элемент <strike> до сих пор поддерживается всеми современными браузерами и используется некоторыми разработчиками. Но вернемся к CSS. Команда «text-decoration» может иметь следующие значения:


Узнаем как изготовить в CSS жирный шрифт?

Чтобы сделать в CSS жирный шрифт, следует использовать ряд стандартных команд. Но можно…

  • Underline. Назначив данное значение, вы получите подчеркнутый текст.
  • Overline. Линия будет проходить над определенным фрагментом страницы.
  • Line-through. Создает перечеркнутый или зачеркнутый текст.
  • Blink. Выделенный фрагмент документа будет периодически исчезать и снова появляться.
  • Также есть значения «none» и «inherit». Первое отменяет все эффекты, а второе приказывает наследовать свойство у родительского элемента.

Предназначение

Казалось бы, что в CSS зачеркнутый текст и подобные эффекты служат только для украшения текста. В большинстве случаев это утверждение правдивое. Но иногда стоит задуматься над вопросом: для чего создавались такие элементы? К примеру, уже устаревший тег «strike» использовался для обозначения неверной или старой информации. Читатели, увидев перечеркнутый текст, понимают скрытое значение такого обозначения. Подчеркнутые слова всегда сразу же выделяются из общего потока. Поэтому такой эффект необходимо использовать для выделения важной информации. Значение «blink», которое делает текст мигающим, используется довольно редко, так как среди программистов принято считать такой эффект неприемлемым. Ведь мало кому из ваших читателей нравятся мелькающие символы, которые будут постоянно их отвлекать. Ну а значение «overline» используется только для украшения текста.


Горячие клавиши Excel (сочетание клавиш)

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

Особенности

Хотя все значения свойства «text-decoration» входят в спецификацию версий каскадных таблиц, все же некоторые значения не поддерживаются современными браузерами. Например, мигающий текст не будет виден в IE. Браузер Google Chrome не воспринимает некоторые значения. Мобильные платформы неполноценно поддерживают данное свойство.

Заключение

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

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

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

💡

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

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

Начнем!

  • Как подчеркивать другой текст в CSS
  • Как убрать подчеркивание из элементов
  • Подчеркивание в CSS Распространенные ошибки и решения
  • Часто задаваемые вопросы

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

    Как подчеркивать другой текст в CSS

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

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

    Все элементов ‘p’ в вашем HTML-документе теперь будут подчеркнуты.

    💡

    Чтобы использовать этот стиль форматирования для других элементов, просто замените «p» на имя элемента.

    Например, если вы хотите подчеркнуть все заголовки h3 в документе или на странице, тогда ваш код будет выглядеть так: 

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

    Достаточно просто, правда? ✔️

    Вот другие общих стилей , которые вы обычно найдете подчеркнутыми:

    Подчеркнуть все ссылки в документе 
     a {
оформление текста: подчеркивание;
}
    Подчеркнуть определенный элемент с классом 
     .underline {
оформление текста: подчеркивание;
}
    Подчеркните определенный элемент с помощью «специального» идентификатора 
     #special {
оформление текста: подчеркивание;
}
    Использовать двойное подчеркивание 
     p {
нижняя граница: 1 пиксель сплошной красный;
ширина нижней границы: 2px;
}

    Как удалить подчеркивание из элементов

    Удалить подчеркивание из текста или ссылки также очень просто. Просто установите для свойства text-decoration значение «none» 

     a {
  текстовое оформление: нет;
}

    Подчеркивание в CSS Распространенные ошибки и решения

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

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

    Конфликты родительского и дочернего элементов : Если вы используете text-decoration: подчеркните на родительском элементе, это может быть переопределено text-decoration : нет 9Правило 0026 для дочернего элемента.

    Несовместимый браузер : Некоторые старые браузеры несовместимы со свойством оформления текста.

    Неверный синтаксис : Убедитесь, что код CSS правильный, с правильным синтаксисом, орфографией и учетом регистра, так как это влияет на вывод.

    Часто задаваемые вопросы

    Могу ли я подчеркнуть только определенную часть текста?
    Да, вам просто нужно поместить эту часть текста в отдельный элемент HTML и применить стиль подчеркивания.

     
    Это текст, и эта часть должна быть подчеркнута.
    
 
     .подчеркнуть {
  оформление текста: подчеркивание;
}

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

     украшение текста: надчеркивание;


    Можно ли изменить цвет подчеркивания?
    Да, вы можете использовать свойство border-bottom для изменения цвета.

     р {
  нижняя граница: 1 пиксель сплошной красный;
}


    Как сделать толстое подчеркивание в CSS?
    Используйте свойство границы, чтобы сделать подчеркивание толще.

     нижняя граница: сплошная толстая;


    Надеемся, эта статья была вам полезна!

    Хотите узнать больше? Посмотрите этот курс CSS🙌

    Ссылка скопирована!

    Как увеличить расстояние между текстом и подчеркиванием в CSS

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

    У вас могут возникнуть трудности при попытке увеличить разрыв между текстом и его подчеркиванием.

    В этом фрагменте мы покажем, как это сделать. Просто следуйте инструкциям ниже!

    • Поместите внутри
      .
     <дел>
  <диапазон>
  Lorem Ipsum — это просто текст-пустышка полиграфической и наборной индустрии. Lorem Ipsum был стандартным фиктивным текстом в отрасли с 1500-х годов, когда неизвестный печатник взял гранку шрифта и перемешал ее, чтобы сделать книгу образцов шрифтов.
    • Укажите ширину div.
    • Укажите padding-bottom, border-bottom и line-height диапазона.
     раздел {
  ширина: 400 пикселей;
}
охватывать {
  отступ снизу: 10px;
  нижняя граница: 1px сплошная #1f67db;
  высота строки: 48px;
}

    Здесь вы можете увидеть результат нашего кода.

    Пример увеличения отступа между текстом и его подчеркиванием: 

     

  <голова>
    <div id="yandex_rtb_2" class="yandex-adaptive classYandexRTB"></div> <script type="text/javascript">if(rtbW>=960){var rtbBlockID="R-A-744004-3";}
else{var rtbBlockID="R-A-744004-5";}
window.yaContextCb.push(()=>{Ya.Context.AdvManager.render({renderTo:"yandex_rtb_2",blockId:rtbBlockID,pageNumber:2,onError:(data)=>{var g=document.createElement("ins");g.className="adsbygoogle";g.style.display="inline";if(rtbW>=960){g.style.width="580px";g.style.height="400px";g.setAttribute("data-ad-slot","9935184599");}else{g.style.width="300px";g.style.height="600px";g.setAttribute("data-ad-slot","9935184599");}
g.setAttribute("data-ad-client","ca-pub-1812626643144578");g.setAttribute("data-alternate-ad-url",stroke2);document.getElementById("yandex_rtb_2").appendChild(g);(adsbygoogle=window.adsbygoogle||[]).push({});}})});window.addEventListener("load",()=>{var ins=document.getElementById("yandex_rtb_2");if(ins.clientHeight =="0"){ins.innerHTML=stroke3;}},true);</script>Название документа
    <стиль>
      дел {
        ширина: 400 пикселей;
      }
      охватывать {
        отступ снизу: 10px;
        нижняя граница: 1px сплошная #1f67db;
        высота строки: 48px;
      }
    
  
  <тело>
    <дел>
      Lorem Ipsum — это просто фиктивный текст полиграфической и наборной индустрии.  Lorem Ipsum был стандартным фиктивным текстом в отрасли с 1500-х годов, когда неизвестный печатник взял гранку шрифта и смешал ее, чтобы сделать книгу образцов шрифта.

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

    Result

    Lorem Ipsum — это просто фиктивный текст полиграфической и наборной промышленности. Lorem Ipsum был стандартным фиктивным текстом в отрасли с 1500-х годов, когда неизвестный печатник взял гранку шрифта и перемешал ее, чтобы сделать книгу образцов шрифтов.

    В этом примере мы увеличили расстояние между текстом и подчеркиванием с помощью нижней границы. Вы можете управлять пространством, используя свойства line-height и padding-bottom.

    Давайте посмотрим на другой пример, где мы используем элемент внутри

    . В этом примере мы также используем те же свойства border-bottom и padding-bottom для , что и в предыдущем примере, а также устанавливаем для свойства display значение «inline-block».

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

    :
     

  <голова>
    Название документа.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/cf3.ppt-online.org/files3/slide/x/xjmoudSTsKIfX7AZkLCby6iP150tRQ4Dcp2rYO/slide-19.jpg' /><noscript><img loading='lazy' src='/800/600/http/cf3.ppt-online.org/files3/slide/x/xjmoudSTsKIfX7AZkLCby6iP150tRQ4Dcp2rYO/slide-19.jpg' /></noscript> 
    <стиль>
      охватывать {
        отображение: встроенный блок;
        нижняя граница: 1px сплошная #000;
        отступ снизу: 10px;
      }
    
     
    
  
  <тело>
    
    
      <диапазон>
          Lorem Ipsum — это просто текст-пустышка полиграфической и наборной индустрии. Lorem Ipsum был стандартным фиктивным текстом в отрасли с 1500-х годов, когда неизвестный печатник взял гранку шрифта и перемешал ее, чтобы сделать книгу образцов шрифтов. Lorem Ipsum — это просто текст-пустышка полиграфической и наборной индустрии. Lorem Ipsum был стандартным фиктивным текстом в отрасли с 1500-х годов, когда неизвестный печатник взял гранку шрифта и перемешал ее, чтобы сделать книгу образцов шрифтов.

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

    Однако у вас могут возникнуть трудности с использованием border-bottom, так как он может не обеспечивать полный контроль над подчеркиванием. Чтобы иметь большую точность пикселей, вы можете использовать псевдоэлемент :after.

     а {
  текстовое оформление: нет;
  положение: родственник;
}
а: после {
  содержание: '';
  ширина: 100%;
  положение: абсолютное;
  слева: 0;
  внизу: 1 пиксель;
  ширина границы: 0 0 1px;
  стиль границы: сплошной;
}

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

    Пример увеличения отступа между текстом и его подчеркиванием с помощью псевдоэлемента ::after: 

      <голова>Название документа. <стиль> а {
 текстовое оформление: нет;
 положение: родственник;
 }
 а: после {
 содержание: '';
 ширина: 100%;
 положение: абсолютное;
 слева: 0;
 внизу: 1 пиксель;
 ширина границы: 0 0 1px;
 стиль границы: сплошной;
 }   <тело> W3docs
     Lorem Ipsum — это просто текст-пустышка полиграфической и наборной индустрии.