Отправляет email-рассылки с помощью сервиса Sendsay

Рецепты HTML

Рассылка закрыта

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Март 2003   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Автор
Влад Мержевич

Статистика

12.722 подписчиков
-26 за неделю
←   Все выпуски   →

Рецепты HTML


Информационный Канал Subscribe.Ru
   Новости сайта www.htmlbook.ru

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

Рецепты CSS

Здесь собраны небольшие советы по использованию приемов 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 - способ управления свойствами объектов на веб-странице, такие как, графика, текст, элементы форм и другое, без необходимости обновления всей страницы.

Рекомендую подписаться на рассылку:
CenterINet - все для начинающих и опытных web мастеров
Всё о Photoshop

Всё из мира графического редактора Adobe Photoshop. Еженедельно и только для вас в рассылке последние новости и обновления ресурса http://psd.eserver.ru. Не пропустите десятки увлекательных статей о Photoshop и компьютерной графике!

Новичку, интересующемуся, профессионалу!

 

  Разделы сайта
 
Создание сайта
  HTML
  CSS
  Графика
  Дизайн
  Инструментарий
  Справочная информация
  Шаблоны
  Форум

  Подписка на новости
  Введите ваш e-mail:
  Помощь
  Не знаете с чего начать или что можно найти на сайте www.htmlbook.ru - воспользуйтесь Помощником по сайту
Copyright 2002 Влад Мержевич, e-mail: vlad@htmlbook.ru
Материалы сайта охраняются законом об авторском праве.
Вы можете свободно использовать и распространять любые статьи с указанием автора и ссылки на сайт www.htmlbook.ru.
http://subscribe.ru/
E-mail: ask@subscribe.ru 		Отписаться
Убрать рекламу
В избранное