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




Автор: Дадыкин Дмитрий Александрович
Источник: http://ground.r2.ru/  


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

В общем, приступим.
Для начала хочу сказать, все то, что я сейчас покажу реально сделать и без использования CSS, но… с каскадными таблицами все намного проще и быстрее. Наверняка Вы все это время пользовались стандартными атрибутами тега <BODY> alink="" vlink="" link="" , но чем плох этот способ, тем что эти атрибуты распространяются на все ссылки страницы, а наша задача сделать ссылки абсолютно разнообразными и более динамичными. Пользоваться нужно вот такой конструкцией:

<STYLE="text/css">
<!-- 
a:visited { color: #00ff00; font-size: xx-small; }
a:active { color: #00dd00; font-size: 9pt; }
a:link { color: #00ff00; font-size: xx-small; }
a:hover { color: #ff0000; }
-->
</STYLE>

Что делает этот код. Этот код очень похож по своей сути, на то, как мы используем стандартные атрибуты тега <BODY>, только выполнен с помощью CSS. Он также будет распространяться на все ссылки. Давайте разберем каждый элемент это кода:

<STYLE="text/css">

</STYLE>
Между этими тегами размещается код стилей. Их нужно вставить в заголовке странице между <HEAD></HEAD>.

a:visited { color: #00ff00; font-size: xx-small; }
Данный код показывает, что посещенная ссылка будет иметь цвет #00ff00 и шрифт xx-small. Аналогичную функцию выполняет атрибут vlink. 

a:active { color: #00dd00; font-size: 9pt; }
Здесь говорится, что при нажатии на ссылку, цвет ее должен измениться на #00dd00 и поменять размер шрифт на 9pt. Аналогичную функцию выполняет атрибут alink.

a:link { color: #00ff00; font-size: xx-small; }
Ну а здесь не посредственно указывается как будет выглядеть наша ссылка. Аналогично - link.

a:hover { color: #ff0000; }
Здесь указывается, что должно произойти с ссылкой, когда на нее наведут мышь. В данном случае она просто поменяет цвет с #00ff00 на #ff0000.

Вот это была основная теория, как с помощью CSS можно задавать цвет ссылки. Но как я уже писал это распространяется на все ссылки. А теперь давайте сделаем для каждой ссылки свой определенный стиль.

<STYLE type="text/css">
<!--
a:visited { color: #00ff00; font-size: xx-small; }
a:active { color: #00dd00; font-size: 9pt; }
a:link { color: #00ff00; font-size: xx-small; }
a:hover { color: #ff0000; }

a.new:visited { color: #cc00cc; font-size: 10pt; }
a.new:active { color: #cc00cc; font-size: 10pt; }
a.new:link { color: #cc00cc; font-size: 10pt; font-family: Verdana}
a.new:hover { color: #ff0000; text-decoration: none}

a.best:visited , a.best:active , a.best:link { color: #00ff00; font-size: 9px; }
a.best:hover { color: #ff0000; }
--> 
</STYLE>

И так можно сделать сколько угодно стилей для ссылок. Как теперь все это применить, да очень просто:
Если Вы напишите такой код:

<a href="ссылка куда-то">ССЫЛКА</a>
То ссылка примет вид который расположен в этом коде:
a:visited { color: #00ff00; font-size: xx-small; }
a:active { color: #00dd00; font-size: 9pt; }
a:link { color: #00ff00; font-size: xx-small; }
a:hover { color: #ff0000; }

Если же вы напишите так:

<a href="ссылка куда-то еще" class="new">ССЫЛКА</a>
То ссылка будет выглядеть так, как описано в стиле new, т.е. :
a.new:visited { color: #cc00cc; font-size: 10pt; }
a.new:active { color: #cc00cc; font-size: 10pt; }
a.new:link { color: #cc00cc; font-size: 10pt; font-family: Verdana}
a.new:hover { color: #ff0000; text-decoration: none}

Ну и наконец вы пишите так:

<a href="ссылка куда-то снова" class="best">ССЫЛКА</a>
И ссылка принимает стиль, который описан вот так:
a.best:visited , a.best:active , a.best:link { color: #00ff00; font-size: 9px; }
a.best:hover { color: #ff0000; }

Тем самым, Вы можете использовать различные виды ссылок на одной странице. Согласить очень полезно и быстро.

Если у Вас возникли вопросы по данной статье, то пишите, с радостью отвечу. 

   Перепечатка материалов разрешается, только после письменного разрешения автора (e-mail). При перепечатке любого материала с журнала видимая ссылка на источник www.wmaster.ru и все имена, ссылки авторов обязательны.
© Copyright Wmaster Design Group  2002. © Все права защищены. Designed by WWW.DESIGN.ST/udio