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

eXeS

Дата: Вторник, 10.11.2009, 19:47 | Сообщение # 1

Легенда

Группа: Администраторы

Сообщений: 273

Репутация: 120

Статус: Offline

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

Code

<!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).

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

Code

<!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.

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

Code

<!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.

Автор:Влад Мержевич
Источник: www.htmlbook.ru

Прикрепления: 8390925.png (3.9 Kb) · 4569905.png (5.1 Kb) · 5660574.png (4.9 Kb)

Партнеры	Инф. о пользователях сайта:	Статистика сайта
	EXES - Администратор timyrkz - Администратор kr1d - Проверенный(Бывший Адимнистратор)