Создание подчеркивания текста

Влад Мержевич

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

Пример 1. Создание пунктирного подчеркивания для ссылок

<!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">
A {
color: #f00; /* Цвет ссылок */
}
A:visited {
color: #666; /* Цвет посещенных ссылок */
}
A:hover {
text-decoration: none; /* Убираем обычное подчеркивание */
border-bottom: 1px dashed blue; /* Добавляем пунктирную линию под текстом */
}
</style>
</head>
<body>

<p><a href="1.html">Подчеркнутая ссылка</a></p>

</body>
</html>

В данном примере прописан стиль для ссылки, который создает у текста пунктирное подчеркивание синего цвета при наведении на текст курсором (рис. 1).

Рис. 1

Рис. 1. Подчеркивание ссылки

Для создания просто подчеркнутого текста без ссылки, проще создать новый стилевой класс и применять его в нужном месте (пример 2).

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

<!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">
.underline {
border-bottom: 1px dashed blue; /* Добавляем пунктирную линию под текстом */
}
</style>
</head>
<body>

<p><span class="underline">Динамический HTML</span> - способ управления свойствами объектов на веб-странице, таких как графика, текст, элементы форм и другое, без необходимости обновления всей страницы.</p>

</body>
</html>

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

Рис. 2

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

Подчеркивание текста через стили можно установить для определенного тега и применять этот тег там, где требуется подчеркивание. В примере 3 в качестве такого тега выступает <ACRONYM>.

Пример 3. Подчеркивание текста для тега <ACRONYM>

<!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">
ACRONYM {
border-bottom: 1px dashed blue; /* Подчеркивание текста */
color: maroon; /* Цвет текста */
}
</style>
</head>
<body>

<p>Популярность языка JavaScript порождена его широкими возможностями по взаимодействию с элементами веб-страницы через <acronym title="Document Object Model, Объектная модель документа">DOM</acronym>.</p>

</body>
</html>

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

Рис. 3

Рис. 3. Подчеркивание текста в теге <ACRONYM>

Статья опубликована: 03.10.2005

Последнее обновление: 16.04.2008

Прежде, чем писать комментарий к статье, примите во внимание следующие моменты.

Не задавайте вопросы в комментариях, для этой цели предназначен форум, где вы получите нужную помощь.
Удаляются любые комментарии, которые:
- включают множество ошибок;
- написаны безграмотно;
- не имеют отношения к данной статье;
- не содержат никакой полезной информации для посетителей.
Для выделения отдельных слов используйте следующие команды: [b]жирный[/b], [i]курсив[/i], [color=цвет]цветной текст[/color], [tag]тег[/tag], [var]параметр[/var], [code]пример[/code].
Потренироваться в написании комментариев вы можете в песочнице.

Комментарии к статье

Sokos

12.04.2007

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

V@dimK@

09.06.2007

Хочу заметить о кроссбраузерности 1-го примера.
В Нетскейпе он работать не будет, т.к.Нетскейп не поддерживает
псевдокласс Anchor Pseudo Classes при наведении курсора мышки на ссылку!

qwqq

24.06.2007

а в Internet Explorer 7, bolder вообще не кажет, ни solid, ни dotted, ни другие. гр?баны гейтс цука

Seferon

25.06.2007

qwqq, может это потому, что все же "border"?

Krast

08.07.2007

Интересно, а кому нужен этот "Netscape", если им никто не пользуется?

Сергей

31.07.2007

как ни странно, все показанные на данном CАЙТЕ примеры прекрасно работают в IE 7 (точнее WIE(Windows Internet Explorer))
Владу-большой респект!

Сергей

01.03.2008

У меня в IE7 (Vista x64) стиль вида
.name {
border-bottom: 1px dashed #FFFFFF
}
на тексты кастатся не хочет, в дрим вивере/FireFox/Opera отображает, а в IE7 не хочет хоть убей

Сергей

01.03.2008

Поменял
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
на
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
вс? заработало

Дмитрий

21.04.2008

А я как не менял DOCTYPE, не хочет подчеркивать....

Кто знает выход - подскажите

Алексей

30.05.2008

Для отображения в ие7 можно и не менять доктайп. Для того чтобы заработало на XHTML 1.0 Transitional нужно в стили добавить

div {line-height: 1.3em;}

Либо каждый раз задавать line-height блоку в котором нужно чтобы работал border для ссылки

Саня

16.06.2008

А можно как-то отключить надпись "Title:" которая у меня светится почему-то только в опере? я так понимаю что это если и возможно то только через js...

Создание подчеркивания текста

Комментарии к статье

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