Предыдущая страница реферата | 1  2  3



Псевдо-класс отличается от обычного тем, что его не надо явно указывать в коде документа. Если вы объявляете обычный класс, то в коде обязательно надо его указать, например, . Псевдо-класс не надо указывать в коде, а стили, написанные к нему, автоматически применяются ко всем элементам с данным поведением. В нашем случае псевдо-класс hover задан для всех ссылок, так что при наведении курсора мыши ссылки будут менять цвет. Надеюсь, вам все стало понятно, так что перейдем к более высоким материям.

Обычным способом выделения ссылок при наведении является исчезновение подчеркивания. По ходу книги оно уже неоднократно реализовывалось. Кроме того, иногда изменяют фон. Можно и совместить два этих приема:

A {color: #000}

A:hover {background: #DDD; text-decoration: none}

Результат показан на рис. 28

Рис. 28 Изменение фона и устранение подчеркивания ссылки

Еще одни интересный эффект – включение рамок при наведении курсора. Правда, он не работает в браузере Internet Explorer 5, но ничего страшного в этом нет. На первый взгляд, он должен очень просто реализовываться:

A {color: #000}

A:hover {border: 1px solid #000; text-decoration: none}

На самом деле при таком стиле ссылка при наведении будет смещаться вправо на 1 пиксель из-за рамки. Смотрится это некрасиво, а устраняется очень просто:

A:hover {border: 1px solid #000; text-decoration: none; margin-left: -1px}

В результате получается эффект, который показан на рис. 29

Рис. 29 Рамка вокруг ссылки

Еще можно изменять сплошную линию на пунктир с помощью фонового рисунка. Создаете одно звено пунктирной линии и сохраняете его в файл bg1.gif. После этого останется написать стиль, который дублирует фон по оси Х и позиционирует его вниз блока ссылки:

A:hover {background: url(i/bg1.gif) repeat-x bottom; text-decoration: none}

Результат показан на рис. 30

Рис. 30 Замена подчеркивания пунктирной линией

Конечно, оформление ссылок не ограничивается приведенными выше примерами. Вы можете включить фантазию и придумать совершенно необычные и оригинальные эффекты, но осторожно. Есть вещи, которые практически всегда плохо использовать. Например, не рекомендуется изменять размер и насыщенность шрифта. Еще хуже изменять сам шрифт. Например, если у вас в тексте шрифт Verdana, а при наведении курсора мыши он изменяется на Courier, то могут возникать проблемы в браузере и пользователи воспринимают такое изменение с раздражением.

Кроме того, если вы изменяете цвет или фон, то надо внимательно смотреть, насколько контрастны новые цвета. Например, если у вас черная ссылка на белом фоне, а при наведении фон меняется на темно-серый, ссылка читаться не будет.

Резюме

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

Не стоит увлекаться видами блоков и их классификацией, отдавая все свое свободное время попыткам найти новый способ оформления гиперссылки. Хотя, с другой стороны, занятие это интересное и часто полезное, как полезна любая исследовательская деятельность. Данная глава, скорее, попытка дать общее представление о приемах, которыми вы будете пользоваться при верстке. Каждый приличный сайт уникален и все равно придется искать свои варианты решения. Но с течением времени все реже.

Скачали данный реферат: Jelefterov, Ovsov, Ходяев, Buldakov, Chernakov, Абдурахимов, Darjushin.
Последние просмотренные рефераты на тему: реферати українською мовою, курсовая работа по психологии, конспект статьи, мировая торговля.



Предыдущая страница реферата | 1  2  3

Поделитесь этой записью или добавьте в закладки