Всё для Web Дизайнера: статьи и советы Web Мастерам, правила хорошего тона в веб дизайне, сайт своими руками, бесплатные сервисы на Народ.ру, выбираем цвета для вашего сайта, нужно ли делать страничку "об авторе", с чего начинается сайт, нестандартные опции "mailto", сага о фреймах, идеальная навигация, удобная навигация по вашему сайту, использование CSS при создании ссылок, иоздание веб-страниц для различных разрешений монитора, индексирование динамического контента, изменение курсора, изменение цвета скролл бара (полосы прокрутки), открытие нового окна браузера, подстройка чужого баннера под свою страницу.

Программирование

Web мастеру

3D Графика и анимация

Предыдущая статья Читать дальше
На главную страницу > > В раздел Web Мастеру

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

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

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

<STYLE="text/css">

</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">

</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; }

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

Предыдущая статья Читать дальше

На главную страницу > > В раздел Web Мастеру