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

Рецепты HTML

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

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

  Июнь 2001   →
 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
Автор
Влад Мержевич

Статистика

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

Рецепты HTML


Служба Рассылок Subscribe.Ru проекта Citycat.Ru

Стильные ссылки
 

CSS имеет несколько параметров для изменения стиля ссылок.

Свойство Значение NS IE
A:link
A:visited
A:active
A:hover		 <style>
<style>
<style>
<style>		 4+
4+
4+
6+ 		4+
4+
4+
4+

Обозначения: NS - Netscape Navigator, IE - Internet Explorer, 4+ - версия браузера 4 и выше.

Как видно из таблицы, поддержка селектора a:hover появилась в Netscape только начиная с 6 версии, а до этого просто отсутствовала, что вызывало у многих пользователей недоумение.

Селекторы A:link
Определяет стиль для обычной непосещенной ссылки.

A:visited
Определяет стиль для посещенной ссылки.

A:active
Определяет стиль для активной ссылки. Активной ссылка становится при нажатии на нее.

A:hover
Определяет стиль для ссылки при наведении на нее мышью. Не поддерживается браузером Netscape до 6 версии.
 

Одно из наиболее популярных применений CSS - это убирание подчеркивания у ссылок. С позиции юзабилити не совсем верное решение, поскольку пользователь может сразу не догадаться, что текст, который он видит, является ссылкой. Все ведь уже привыкли - раз подчеркивание используется, значит это ссылка. Но при правильном применении отсутствие подчеркивания у ссылок может придать определенный эффект сайту.
Часто делается, что при наведении курсора, ссылка становится подчеркнутой, меняет свой цвет или используется и то и другое одновременно. Параметр hover не работает в Netscape до 6 версии, поэтому его следует использовать осторожно.

Пример 1. Использование HOVER <style type="text/css">
A:link {text-decoration: none} // убирает подчеркивание для ссылок
A:visited {text-decoration: none}
A:active {text-decoration: none}
A:hover {text-decoration: underline; color: red;} // делает ссылку красной и подчеркнутой при наведении на нее курсора
</style>
  Ниже приведено использование данного примера. При наведении курсора на ссылку, она станет подчеркнутой и красной.
 
  Еще один пример демонстрирует использование в ссылках подчеркивания и надчеркивания одновременно. При этом эффекте тонкие линии будут появляться над и под ссылкой при наведении на нее курсора. Это достигается применением параметра text-decoration: underline overline в A:hover.
Пример 2. Использование подчеркивания в ссылках <style type="text/css">
A:link {text-decoration: none}
A:visited {text-decoration: none}
A:active {text-decoration: none}
A:hover {text-decoration: underline overline; color: red;} // ссылка подчеркнутая, надчеркнутая и красного цвета
</style>
 
  Третий пример показывает, как изменять размер ссылки при наведении на нее курсора.
Пример 3. Изменение размера ссылки <style type="text/css">
A:link {text-decoration: none}
A:visited {text-decoration: none}
A:active {text-decoration: none}
A:hover {font-size: 24; font-weight: bold; color: red;} // ссылка изменит свой размер на больший
</style>
 
http://subscribe.ru/
E-mail: ask@subscribe.ru 		Отписаться Рейтингуется SpyLog
В избранное