MENU
Главная » Статьи » CSS » Рецепты CSS
Создание подчеркивания текста

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

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

Валидный HTML
Валидный CSS
<!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. Создание пунктирного подчеркивания для текста

Валидный HTML
Валидный CSS
<!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>

Валидный HTML
Валидный CSS
<!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>

Категория: Рецепты CSS | Добавил: Virt (03.11.2009)
Просмотров: 3624 | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]