Эй! Спасибо, что решили посмотреть на тему! Осмотритесь вокруг
и подпишитесь на RSS feed чтобы узнавать обо всех обновлениях. До встречи!

Подчеркивание для блочных элементов вроде тега

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

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

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

Пример

Линия под заголовком h1 {  font-size: 200%;  border-bottom: 2px solid maroon;  font-weight: normal;  padding-bottom: 5px; }

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

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

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

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

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

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

Пример

Подчеркивание заголовка h1 {  text-decoration: underline; }

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

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

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

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

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

 

Комментарии закрыты, но Вы можете трекбэк с Вашего сайта.

Комментирование закрыто.