Как добавить подчеркивание к заголовку - «Текст» » Новости мира Интернет
Хардкорный шутер Road to Vostok о выживании на границе Финляндии и России скоро ворвётся в ранний доступ Steam — дата выхода и новый трейлер - «Новости сети»
Хардкорный шутер Road to Vostok о выживании на границе Финляндии и России скоро ворвётся в ранний доступ Steam — дата выхода и новый трейлер - «Новости сети»
Google переполошила геймдев: выход ИИ-генератора миров Project Genie уронил акции крупнейших разработчиков - «Новости сети»
Google переполошила геймдев: выход ИИ-генератора миров Project Genie уронил акции крупнейших разработчиков - «Новости сети»
Уже три компании из Китая пробились в топ-20 крупнейших поставщиков оборудования для выпуска чипов - «Новости сети»
Уже три компании из Китая пробились в топ-20 крупнейших поставщиков оборудования для выпуска чипов - «Новости сети»
Качественные изображения Samsung Galaxy S26 и S26+ слили в Сеть до анонса - «Новости сети»
Качественные изображения Samsung Galaxy S26 и S26+ слили в Сеть до анонса - «Новости сети»
Финны начали варить пиво «на песке» — местная пивоварня установила песочный теплоаккумулятор - «Новости сети»
Финны начали варить пиво «на песке» — местная пивоварня установила песочный теплоаккумулятор - «Новости сети»
Gemini стал доступен в «Google картах» по всему миру для пеших и велосипедных прогулок - «Новости сети»
Gemini стал доступен в «Google картах» по всему миру для пеших и велосипедных прогулок - «Новости сети»
Капитализация Microsoft рухнула на $357 млрд после успешного отчёта и заявления гендира о популярности Copilot - «Новости сети»
Капитализация Microsoft рухнула на $357 млрд после успешного отчёта и заявления гендира о популярности Copilot - «Новости сети»
Чтобы не отвлекаться на чтение субтитров: для Stellar Blade вышла профессиональная русская озвучка - «Новости сети»
Чтобы не отвлекаться на чтение субтитров: для Stellar Blade вышла профессиональная русская озвучка - «Новости сети»
«Руки не держат, ноги дрожат»: атмосферный симулятор альпиниста Cairn оставил игроков и критиков в полном восторге - «Новости сети»
«Руки не держат, ноги дрожат»: атмосферный симулятор альпиниста Cairn оставил игроков и критиков в полном восторге - «Новости сети»
Выручка Apple взлетела почти на 16 % — iPhone принесли рекордные $85 млрд, несмотря на дефицит чипов - «Новости сети»
Выручка Apple взлетела почти на 16 % — iPhone принесли рекордные $85 млрд, несмотря на дефицит чипов - «Новости сети»
Новости мира Интернет » Самоучитель CSS » Текст » Как добавить подчеркивание к заголовку - «Текст»

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

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

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

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

HTML5CSS 2.1IECrOpSaFx

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

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

.;


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

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

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

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

HTML5CSS 2.1IECrOpSaFx

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

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

.;


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

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


Подчеркивание для блочных элементов вроде тега можно проводить двояко. Например, линию под текстом устанавливать на всю ширину блока, независимо от объема текста. А также подчеркивание делать только у текста. Далее рассмотрим оба варианта. Линия под текстом на всю ширину блока Чтобы создать линию под текстом, следует добавить к элементу стилевое свойство border-bottom, его значением выступает одновременно толщина линии, ее стиль и цвет (пример.;1). Пример 1. Линия на всю ширину HTML5 CSS 2.1 IE Cr Op Sa Fx Расстояние от линии до текста можно регулировать свойством padding-bottom, добавляя его к селектору H1. Результат данного примера показан на рис;1. .; Рис. 1. Линия под заголовком Подчеркивание текста Чтобы подчеркнуть только текст, необходимо воспользоваться свойством text-decoration со значением underline, опять же, добавляя его к селектору H1 (пример.;2). Пример 2. Линия на ширину текста HTML5 CSS 2.1 IE Cr Op Sa Fx Результат данного примера показан на рис;2. .; Рис. 2. Подчеркивание заголовка В случае использования свойства text-decoration линия жестко привязана к тексту, поэтому определить ее положение и стиль не удастся.

Цитирование статьи, картинки - фото скриншот - Rambler News Service.
Иллюстрация к статье - Яндекс. Картинки.
Есть вопросы. Напишите нам.
Общие правила  поведения на сайте.

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

А что там на главной? )))



Комментарии )))