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

🕛 22.01.2009, 23:49

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

<H1>

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

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

HTML 4.01CSS 2.1IE 6IE 7Op 9.5Sa 3.1Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Линия под заголовком</title> <style type="text/css"> h1 { font-size: 200%; /* Размер шрифта */ border-bottom: 2px solid maroon; /* Параметры линии под текстом */ font-weight: normal; /* Убираем жирное начертание */ padding-bottom: 5px; /* Расстояние от текста до линии */ } </style> </head> <body> <h1>Пример текста</h1> <p>Черный заголовок привлекает к себе внимание, несмотря на то, что он черный, а не белый.</p> </body>
</html>

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

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

HTML 4.01CSS 2.1IE 6IE 7Op 9.5Sa 3.1Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Подчеркивание заголовка</title> <style type="text/css"> h1 { text-decoration: underline; /* Подчеркивание заголовка */ } </style> </head> <body> <h1>Пример текста</h1> <p>Черный заголовок привлекает к себе внимание, несмотря на то, что он черный, а не белый.</p> </body>
</html>

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