Автор: Дадыкин Дмитрий Александрович
Источник: 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; }
Тем самым, Вы можете использовать различные виды ссылок на одной странице. Согласитесь очень полезно и быстро.
При перепечатке любых материалов с сайта, ссылка на