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

Засобами тегів HTML прибрати підкреслення у посилань не є можливим. Тому для цієї мети використовуються каскадні таблиці стилів (Cascading Style Sheets, CSS).

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

Підкреслення ховається за допомогою стильової властивості text-decoration: none, який додається до селектора A, як показано в прикладі 1.

Приклад 1. Прибирання підкреслення у посилання

<pre>
<!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 {
    text-decoration: none; /* Прибирає підкреслення для посилань */
   } 
   A:hover { 
    text-decoration: underline; /* Додаємо підкреслення при наведенні курсору на посилання */
    color: red; /* Посилання червоного кольору */
   } 
  </style>
 </head>
 <body> 
   <p><a href="text.html">Наведи сюди курсор, побачиш результат</a></p>
 </body>
</html>
</pre>

В даному прикладі при наведенні курсору на посилання, вона стає підкресленим і червоною.

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

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

%d блогерам подобається це: