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

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


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


 

Інструкція

1. Якщо для вашого варіанту оформлення сторінки буде досить прибрати рамку у однієї конкретної картинки з посиланням або всього у декількох, то буде досить додати в їх теги атрибут border з нульовим значенням. З такою добавкою HTML- код картинок з посиланнями може виглядати, наприклад, так:<a href=/><img src= linkedImage.gif border= 0 /></a>Можна скористатися і атрибутам style - ці варіанти рівнозначні. З атрибутом style і нульовим значенням border, вказаним в нім, той же код виглядатиме так:<a href=/><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>

 



Матеріали по темі