Колір посилань

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

За допомогою HTML можна задавати кольори всіх посилань на сторінці, а також змінювати кольори для окремих посилань.

Встановлення кольору всіх посилань на сторінці

Кольори посилань задаються як атрибути тега <body>. Атрибути є необов'язковими, і якщо вони не вказані, використовуються значення за замовчуванням.

link — визначає колір посилань на веб-сторінці (за замовчуванням колір синій, #0000FF).

alink — колір активного посилання. Колір посилання змінюється при натисканні на нього кнопки миші. Колір за замовчуванням червоний, #FF0000.

vlink — колір вже відвіданих посилань. Колір за замовчуванням фіолетовий, #800080.

У HTML кольори зазвичай вказуються цифрами у шістнадцятковому коді у вигляді #rrggbb, де r, g і b відповідно позначають червоний, зелений і синій складові. Для кожного кольору вказується шістнадцяткове значення від 00 до FF, що відповідає діапазону від 0 до 255 в десятковій системі числення. Потім ці значення об'єднуються в одне число, перед яким ставиться символ # (приклад 1).

Приклад 1. Встановлення кольорів посилань

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Колір посилань</title>
 </head>
 <body link="червоний" vlink="#cecece" alink="#ff0000" bgcolor="чорний">
  <p><a href="content.html">Зміст сайту</a></p>
 </body>
</html>

Колір не обов'язково вказувати у шістнадцятковому форматі, можна використовувати також ключові слова. У цьому прикладі колір фону веб-сторінки встановлено чорним, а колір посилань — червоним.

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

visited — Стиль для відвіданого посилання.

active — Стиль для активного посилання. Посилання стає активним при натисканні на нього.

hover — Стиль для посилання при наведенні на нього мишею.

У прикладі 2 показано, як змінити колір посилань на веб-сторінці за допомогою стилів. Для цього скористаємося стильовим властивістю color, воно задає колір певного тексту, у цьому випадку, посилань.

Приклад 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">
   BODY {
    background: чорний; /* Колір фону веб-сторінки */
   } 
   A {
    color: червоний; /* Колір посилань */
   }
   A:visited {
    color: #cecece; /* Колір відвіданих посилань */
   }
   A:active {
    color: #ffff00; /* Колір активних посилань */
   }
  </style>
 </head>
 <body>
  <p><a href="content.html">Зміст сайту</a></p>
 </body>
</html>

Встановлення кольору окремих посилань на сторінці

Вищезазначений спосіб встановлення кольорів працює для всіх посилань веб-сторінки. Проте іноді виникає необхідність використовувати одночасно різні кольори. Світлі, наприклад, для темних областей веб-сторінки, а темні кольори — відповідно для світлих. Для цього також можна скористатися стилями.

Для зміни кольору посилання слід використовувати атрибут style="color: #rrggbb" у тезі <a>, де #rrggbb — колір у шістнадцятковому представленні. Можна також використовувати назви кольорів або вказувати колір у форматі: rgb (132, 33, 65). У дужках вказані десяткові значення червоного, зеленого і синього кольору (приклад 3).

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Колір посилань</title>
 </head>
 <body link="#ffcc00" vlink="#cecece" alink="#ff0000" bgcolor="чорний">
  <p><a href="content.html" style="color: білий">Зміст сайту</a></p>
  <p><a href="1.html" style="color: #ffffff">Інтернет-маркетинг</a></p>
  <p><a href="2.html" style="color: rgb (255, 255, 255)">Юзабіліті</a></p> 
 </body>
</html>

У цьому прикладі наведено три різних способи встановлення кольору за допомогою стилів.

посиланняколір
SEO текст: Навчіться встановлювати кольори посилань на веб-сторінці за допомогою HTML і CSS. Дізнайтеся, як змінити колір всіх посилань або окремих посилань на сторінці. Використовуйте шістнадцятковий код або назви кольорів для створення привабливого дизайну вашого веб-сайту.

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