Рецепты CSS. Библиотека I2R. Сегодня тема посвящена некоторым хитростям и приемам использования стилей. Со ссылками, при помощи CSS, можно сделать интересную особенность. Цвет ссылки, при наведении на нее курсора мыши, остается неизменным, но зато у нее появляется подчеркивание другого цвета, нежели сама ссылка.

Сегодня тема посвящена некоторым хитростям и приемам использования стилей.
Статья доступна по адресу www.htmlbook.ru/css/tips.shtml

Здесь собраны небольшие советы по использованию приемов CSS для различных целей.

Изменение цвета подчеркивания

Со ссылками, при помощи CSS, можно сделать интересную особенность. Цвет ссылки, при наведении на нее курсора мыши, остается неизменным, но зато у нее появляется подчеркивание другого цвета, нежели сама ссылка. Данный прием не работает в браузерах Netscape 4.x и Internet Explorer 5.

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

<html>
<head>
<style>
a:link { color: blue; text-decoration: none }
a:hover { color: red; text-decoration: underline }
.link { color: blue }
</style>

<body>
<a href=link1.html><span class=link>Ссылка</span></a>
</body>
</html>

НАВЕДИ СЮДА КУРСОР, УВИДИШЬ РЕЗУЛЬТАТ

Изменение цвета ячейки

Цвет фона ячейки меняется, когда курсор мыши наводится на нее. Наведение мыши на область отслеживается событием onMouseOver, а вывод мыши за ее пределы - событием onMouseOut. Поскольку цвет фона меняется у той же самой ячейки, на которую наводим курсор мыши, то изменение стиля делается с помощью метода this.style.background.

Пример 2. Изменение цвета фона

<table width=60% border=1 cellspacing=0 cellpadding=4 bordercolor=#333333 align=center>
<tr>
<td align=center bgcolor=#CCCCCC onMouseOver="this.style.background='#FFCC33'" onMouseOut="this.style.background='#CCCCCC'"><a href="link1.htm">Пункт 1</a></td>
<td align=center bgcolor=#CCCCCC><a href="link2.htm">Пункт 2</a></td>
</tr>
</table>

Пункт 1

Пункт 2

В примере используется изменение серого цвета фона на оранжевый.В браузере Netscape 4.x приведенный способ не работает.

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

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

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

<html><head>
<style>
A {color: #FF0000;}
A:visited {color: #666666;}
A:hover { text-decoration: none; border-bottom: 1px dashed blue; }
</style>
</head>

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

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

Подчеркнутая ссылка

Обратите внимание, пунктирное подчеркивание появляется чуть ниже обычного подчеркивания ссылки.

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

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

<html><head>
<style>
.underline { border-bottom: 1px dashed blue; }
</style>
</head>

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

Динамический HTML - способ управления свойствами объектов на веб-странице, такие как, графика, текст, элементы форм и другое, без необходимости обновления всей страницы.

	Библиотека Интернет Индустрии I2R.ru	Малобюджетные сайты... Продвижение веб-сайта... Контент и авторское право...
Забобрить! Блог		Поиск:	Рассылки для занятых...»

Библиотека Интернет Индустрии I2R.ru

Малобюджетные сайты...

Продвижение веб-сайта...

Контент и авторское право...