Властивості посилань

Влад Мержевич

Для стилювання посилань у CSS використовуються псевдокласи, які додаються після селектора A через двокрапку. У табл. 1 наведено припустимі псевдокласи та їх описи.

Табл. 1. Псевдокласи для роботи з посиланнями
ВластивістьОпис
A:linkВизначає стиль для звичайного непереглянутого посилання.
A:visitedВизначає стиль для відвіданого посилання.
A:activeВизначає стиль для активного посилання, яке стає активним при натисканні на нього.
A:hoverВизначає стиль для посилання при наведенні на нього курсора миші.

Зазвичай використання псевдокласу link має той же ефект, що й застосування стилю до селектора A. Тому цей псевдоклас можна пропустити.

Посилання без підкреслення

Одним з найпопулярніших застосувань CSS є сховання підкреслення у посиланнях. З точки зору користувальницької зручності це не зовсім правильне рішення, оскільки користувач може не відразу здогадатися, що текст, який він бачить, є посиланням. Але при правильному застосуванні відсутність підкреслення у посиланнях може надати певний ефект сайту. Часто відбувається так, що при наведенні курсора, посилання стає підкресленим, змінює свій колір або використовується обидва ефекти одночасно (приклад 1).

Приклад 1. Підкреслення у посиланні та зміна його кольору

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Посилання</title>
  <style type="text/css">
   A:link { 
    text-decoration: none; /* Прибирає підкреслення для посилань */
   } 
   A:visited { text-decoration: none; } 
   A:active { text-decoration: none; }
   A:hover {
    text-decoration: underline; /* Робить посилання підкресленим при наведенні на нього курсора */
    color: red; /* Колір посилання */
   } 
  </style>
 </head> 
 <body>
    <p><a href="1.html">Приклад посилання</a></p>
 </body> 
</html>

Нижче наведено застосування даного прикладу. При наведенні курсора на посилання, воно стає підкресленим та червоним.

Підкреслені та надкреслені посилання

Ще один приклад демонструє застосування у посиланнях підкреслення та надкреслення одночасно. При цьому тонкі лінії будуть з'являтися над та під посиланням при наведенні на нього курсора. Це досягається застосуванням властивості text-decoration: underline overline у селекторі A:hover.

Приклад 2. Застосування підкреслення в посиланнях

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Посилання</title>
   <style type="text/css">
    A:link { text-decoration: none; }
    A:visited { text-decoration: none; }
    A:active { text-decoration: none; }
    A:hover { 
     text-decoration: underline overline; /* Посилання підкреслене та надкреслене */
     color: red; /* Колір посилання */
   } 
  </style>
 </head>
 <body>
   <p><a href="1.html">Приклад посилання</a></p>
 </body>
</html>

Зміна розміру посилання

Приклад 3 показує, як змінювати розмір посилання при наведенні на нього курсора.

Приклад 3. Зміна розміру посилання

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Посилання</title>
  <style type="text/css">
   A:link { text-decoration: none; }
   A:visited { text-decoration: none; }
   A:active { text-decoration: none; }
   A:hover { 
    font-size: 24px; /* Розмір шрифту */
    font-weight: bold; /* Жирний начертання */
    color: red; /* Колір посилання */
   }
  </style>
 </head>
 <body>
   <p><a href="1.html">Приклад посилання</a></p>
 </body>
</html>

Зміна кольору підкреслення

З посиланнями, за допомогою CSS, можна створити цікаву особливість. Колір посилання, при наведенні на нього курсора миші, залишається незмінним, але зате у нього з'являється підкреслення іншого кольору, ніж саме посилання (приклад 4).

Приклад 4. Створення підкреслення іншого кольору

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Посилання</title>
  <style type="text/css">
   A:link { color: blue; text-decoration: none; }
   A:hover { color: red; text-decoration: underline; }
   .link { color: blue; }
  </style>
 </head>
 <body>
  <p><a href="1.html"><span class="link">Посилання</span></a></p>
 </body>
</html>

Посилання різних кольорів

Часто виникає необхідність на одній сторінці використовувати посилання різних кольорів і розмірів. І застосовувати для кожної області веб-сторінки посилання відповідного типу. У цьому випадку створюємо два або більше класів зі своїми параметрами і застосовуємо їх за власним розсудом. У прикладі 6 досить змінити значення у відповідному класі, і кольори посилань, де цей клас використовується, зміняться автоматично.

Приклад 5. Посилання різних кольорів

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Посилання</title>
  <style type="text/css">
   A { font-size: 14px; color: red; }
   A.link1 { font-size: 12px; color: green; }
   A.link2 { font-size: 14px; color: blue; }
  </style>
 </head>
 <body>
  <p>| <a href="1.html">Посилання 1</a> | 
   <a href="2.html" class="link1">Посилання 2</a> | 
   <a href="3.html" class="link2">Посилання 3</a> |</p>
  </body>
</html>

Результат цього прикладу показаний на рис. 1.

посиланняколір

Часті запитання