Учебник HTML 

Урок 7. Свойства и значения (ссылки)

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

a {font-weight:bold; color: #0099FF; alink: #33CCFF; text-decoration:none };

Как видно из этого примера, к ссылкам применяются те же свойства, что и к тексту, так как ссылка представляет собой ни что иное, как выделенный участок текста.

Например, по умолчанию все ссылки имеют подчеркивание и на многих сайтах так и есть, замечали? Однако, если вы не ходите применения этого эффекта на вашем сайте, вы можете легко его отключить:

a {text-decoration:none};

Попробуйте сделать это применительно к какой-нибудь своей учебной странице сайта. Не сложно, правда?

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

- дополнительное свойство link – отображает состояние ссылки, которую пользователь еще не посещал, другими словами – на которую он еще не кликал мышкой. Пример:

a:link {color: #6699CC;}

- active (или alink) – ссылка во время нажатия на нее мышкой. Пример:

a:active {color: #FFFFFF};

- visited (или vlink)- ссылка после нажатия на нее мышкой. Пример:

a:visited {color: #990099};

- hover – ссылка в тот момент, когда над ней находится указатель мыши (без клика). Пример:

a:hover {
color: #FF3300;
font-weight:bold;
}

Кроме цвета самой ссылки можно задать и цвет ее фона во всех вышеперечисленных действиях. Пример:

a: active {color: #FFFFFF; background: #FFFF66};

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

a:hover {
letter-spacing: 15px;
font-weight:bold;
font-style:italic
text-decoration:none;
}

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

• Следующий урок: Классы (class) и идентификаторы (id)
• Предыдущий урок: Свойства и значения (текст)