Как убрать рамку вокруг изображений-ссылок

По умолчанию, вокруг изображений-ссылок браузер может показывать рамку.
Естественно, это может портить вид, например, вашего меню, которое состоит из этих изображений-ссылок. Но не все так печально! Можно убрать эту рамку просто и быстро.

В данной статье я расскажу Вам как это сделать при помощи языка стилей CSS (CascadingStyleSheets), а точнее при помощи его css-свойства border.

Пример избавления от рамки

Допустим, у нас есть следующий HTML-код:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN»

 «http://www.w3.org/TR/html4/loose.dtd»>

<html>

<head>

<style type=»text/css»>

 

</style>

  <title>Сайт мебельной фабрики</title>

</head>

<body>

   <a href=»index.php»><img src=»index.png» alt=»Главная«></a>

   <a href=»about.php»><img src=»about.png» alt=»О нас«></a>

   <a href=»contacts.php»><img src=»contacts.png» alt=»Контакты«></a>

</body>

</html>

Что мы видим в коде?

В коде есть 3 изображения-ссылки.

Наша задача сделать так, чтобы в браузере не показывалась рамка вокруг этих изображений-ссылок, то есть нам нужно ее убрать.

Для этого присвоим значение 0px свойству border и применим правило к селектору img:

 

img{border:0px}

Вот полный HTML-код страницы:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN»

 «http://www.w3.org/TR/html4/loose.dtd»>

<html>

<head>

<style type=»text/css»>

img{border:0px}

</style>

  <title>Сайт мебельной фабрики</title>

</head>

<body>

   <a href=»index.php»><img src=»index.png» alt=»Главная«></a>

   <a href=»about.php»><img src=»about.png» alt=»О нас«></a>

   <a href=»contacts.php»><img src=»contacts.png» alt=»Контакты«></a>

</body>

</html>

Проблема решена! Теперь рамка вокруг изображений-ссылок показываться не будет.

Устанавливайте рамки вокруг изображений только там где это действительно нужно.

Удачи!

Запись опубликована в рубрике CSS.
Теги: , , , . Добавьте в закладки постоянную ссылку.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>