Як прибрати рамку посилання

Як прибрати рамку посилання

Якщо ви займаєтеся будівництвом веб-сайтів, то обов’язково повинні враховувати налаштування відображення сторінок в браузерах відвідувачів. Зокрема, картинки, поміщені всередину тегів посилань, браузери за замовчуванням обводять синьою рамкою шириною в одну точку (піксель). Це слід враховувати як при завданні розмірів елементів сторінки, так і при визначенні їх колірного оформлення. Є альтернативний варіант вирішення завдання — засобами HTML і CSS змусити браузери не відображати рамку.

Інструкція

  1. Якщо для вашого варіанти оформлення сторінки буде достатньо прибрати рамку в однієї конкретної картинки з посиланням або всього в декількох, то буде досить додати в їх теги атрибут border з нульовим значенням. З такою добавкою HTML-код картинок з посиланнями може виглядати, наприклад, так:

    <a href=»http://kakprosto.ru»> <img src=»linkedImage.gif» border=»0″ /> </ a>

    Можна скористатися і атрибутів style — ці варіанти рівнозначні. З атрибутом style і нульовим значенням border, зазначеним у ньому, той же код буде виглядати так:

    <a href=»http://kakprosto.ru»> <img src=»linkedImage.gif» style=»border: 0px;» /> </ a>

    При використанні атрибуту style нульове значення (0px) можна замінити на текстове «none» (без лапок).
  2. Якщо потрібно запобігти появі рамки у абсолютно всіх картинок з посиланнями, розміщених в сторінці, то простіше зробити це в одному місці HTML-коду. Для цього в заголовну частину документа (між тегами <HEAD> і </ HEAD>) слід помістити опис стилів сторінки з загальним для всіх посилань правилом. Записати це правило можна так:

    a img {border: none;}

    Його треба помістити всередину тега, який повідомляє браузеру, що тут розміщено опис стилів на мові CSS:

    <style type=»text/css»>

     a img {border: none;}

    </ Style>
  3. Якщо ви використовуєте в сторінці JavaScript-сценарії, які виконують будь-які дії при натисканні по текстовому посиланню без переходу на іншу сторінку, то після клацання в деяких браузерах і навколо текстового посилання залишається аналогічна пунктирна рамка. Щоб запобігти і це несанкціонована зміна вашого дизайну, додайте в CSS-блок опису стилів відповідне правило для текстових посилань:

    <style type=»text/css»>

     a {outline: none;}

    </ Style>