Оглавление

11. Псевдостили гиперссылок. Отображение ссылок разными цветами

Большинство Web-браузеров позволяют отобразить посещенные и непосещенные ссылки разными цветами. Достигается это при помощи предопределенных стилей — псевдостилей:


□     а:link — вид непосещенной ссылки;
□   a:visited — вид посещенной ссылки;
□   а:active — вид активной ссылки:
□   а:hover — вид ссылки, на которую указывает курсор мыши. (1)

 

 

Псевдостили аналогичны параметрам link, viink и alink тега <body>:

<body link="#000000" vlink="#000080" alink="#FF0000">


эквивалентно заданию стиля

a:link    { color: #000000 }  

a:visited { color: #000080 }  

a:active  { color: #FF0000 }


С помощью псевдостилей можно менять не только цвет ссылки, но и задать, будет ли ссылка подчеркнута:

a:link    { color: red;   text-decoration: underline }

a:visited { color: blue;  text-decoration: underline }

a:active  { color: green; text-decoration: none }

a:hover   { color: lime;  text-decoration: none }

 

Кроме того, можно применить стиль гиперссылок не только ко всему документу, но и к определенному классу:

a.linkl:link    { color: black; text-decoration: none }  

a.linkl:visited { color: blue;  text-decoration: none }  

a.linkl:active  { color: red;   text-decoration: underline }  

a.linkl:hover   { color: red;   text-decoration: underline }

 

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

 

Листинг 2.7. Псевдостили гиперссылок


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
             "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Псевдостили гиперссылок</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type="text/css">
a:link    { color: red;   text-decoration: underline }
a:visited { color: blue;  text-decoration: underline }
a:active  { color: green; text-decoration: none }
a:hover   { color: lime;  text-decoration: none }
a.linkl:link    { color: black; text-decoration: none } 
a.linkl:visited { color: blue;  text-decoration: none } 
a.linkl:active  { color: red;   text-decoration: underline } 
a.linkl:hover   { color: red;   text-decoration: underline } 
</style> 
</head>
<body>
  <p>
    <a href="docl.html">Ссылка1</a><br>
    <a href="doc2.html" class="linkl">Ссылка2</a>
  </p> 
</body> 
</html>
Примечания:
  • До и после двоеточия не должно быть пробелов.
<< Меню >>  
Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити

Кто активен

9 пользователь(ей) активно (3 пользователь(ей) просматривают Инструкции)

Участников: 0
Гостей: 9

далее...

Рекомендуем

Частный сыск полковника в отставке Детективный сериал, главным героем которого является бывший

Новые инструкции

Ссылки

Радиолюбительский портал.

В чем основные преимущества и недостатки нетбуков.