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

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

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

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

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="red" vlink="#cecece" alink="#ff0000" bgcolor="black">
  <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: black; /* Цвет фона веб-страницы */
   } 
   A {
    color: red; /* Цвет ссылок */
   }
   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="black">
  <p><a href="content.html" style="color: white">Содержание сайта</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>

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

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *

%d bloggers like this: