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

           главная страница сайта              Главная                                      обмен ссылками с тематическими сайтами                 Обмен ссылками                                        гостевая книга             Гостевая                                       обратная связь для отправки почты на e-mail               Обратная связь              |

Webmaster-Soft.ru - программы, скрипты для вебмастера            Меню

 

Книги для веб-мастера, книги програмирования  Программы
Электронные книги  Книги
Журналы для вебмастеров   Журналы вебмастеру
  Скрипты
Статьи
Учебник HTML  Учебник HTML
Базы каталогов для раскрутки сайта  Базы каталогов
Шаблоны, картинки, смайлы, иконки  Архив программ
   Интернет магазин
  Каталог статей
  Доска обьявлений
 

 

 

 

 

Работа в сети интернет
Лучшие системы в сети
для заработка

 

 
 

 


 

 

 

 

В помощь Web-Дизайнеру

Создание сайта,  оптимизация,  раскрутка

    Статьи
 Создание сайта




 

Создание сайта

 

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


Дадыкин Дмитрий Александрович
 




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

В общем, приступим.
Для начала хочу сказать, все то, что я сейчас покажу реально сделать и без использования 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; }

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

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




 

 




 

Страницы <50 51 52 53 54 55 56 57 58 59 60 >

 

<<<В начало>>>

 







 

Ramblers.ru

Rambler's Top100

 

    

  

 
  
  

 

Inet-Bazar.ru
 Интернет магазин цифрового товара.

--==--

 

  

 

Copyright © 2006 Oleg Velikanov