Создание подчеркивания текста - Форум
( Новые сообщения ·Правила форума ·Поиск ·RSS )
Страница 1 из 11
Модератор форума: Ezhik 
Форум » Статьи о CSS » Рецепты CSS » Создание подчеркивания текста
Создание подчеркивания текста
EvgenyДата: Вторник, 23.02.2010, 19:11 | Сообщение # 1
Контр-Адмирал
Группа: Администраторы
Сообщений: 287
Статус:
Подчеркивание текста у ссылок настолько устоялось, что любое другое применение такого оформления будет с ними ассоциироваться. Чтобы не вводить посетителей сайта в заблуждение, никогда не используйте подчеркивание для обычного текста, только для ссылок. Но подчеркивание можно использовать разное, например, в виде пунктирной линии. Для этого создадим новый стиль в котором будем использовать параметр border-bottom, он добавляет линию под текстом (пример 1).

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

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


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

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

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

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.


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

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

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

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.


[small]Рис. 3. Подчеркивание текста в теге < ACRONYM>[/small]
 
Форум » Статьи о CSS » Рецепты CSS » Создание подчеркивания текста
Страница 1 из 11
Поиск:

Статистика Форума
Уважаемые пользователи
Популярные темы
Недавно обновленные темы
Evgeny Репутация [ 122 ]
akkemir22 Репутация [ 113 ]
Kuks64 Репутация [ 49 ]
Gavrik Репутация [ 48 ]
Anatoliy03 Репутация [ 37 ]
MiRel Репутация [ 33 ]
hius Репутация [ 23 ]
mVizio Репутация [ 19 ]
ewa69 Репутация [ 16 ]
straik67 Репутация [ 14 ]
Прочие [ 10 ]
О програмистах и Веб-Мастерах [ 6 ]
Про детей [ 6 ]
Про автомобилистов [ 5 ]
Про женщин [ 3 ]
Блондинка сдает на права ! (МЕГА ЖЕСТЬ) [ 2 ]
Про новых русских [ 2 ]
ВАЗ-2107 1000 лошадей [ 2 ]
Новый вид ББ-кодов на вашем сайте [ 2 ]
Про компьютеры [ 1 ]
Игры на телефон бесплатно [ 0 ]
Лучшее онлайн казино. Как обыграть казино? [ 0 ]
Инвест-Проект. Прибыль каждые 5 мин. [ 1 ]
Финансовая Взаимопомощь. Каждые 24ч получаете % [ 0 ]
Играть и зарабатывать онлайн [ 0 ]
Новый Топ пользователей с аватарами для Ucoz [ 0 ]
Простой и красивый вид формы опроса [ 0 ]
Красивый информер "кто нас сегодня посетил" для Ucoz [ 0 ]
Flash радио для сайта [ 0 ]
Заработок на играх [ 0 ]