www html, html уроки, html теги, css, верстка
Уроки книги по css и html урокам вопросы и ответы Помощь сайту дизайн-студия Шутовой Елены
Главная страница > Уроки > Имаги > Рамка вокруг Имаги

Рамка вокруг Имаги

контентовая версия  

Изображение, добавляемое на web-страницу, можно поместить в рамку различной ширины. Для этого служит параметр border тега <IMG>. По умолчанию рамка вокруг Имаги не отображается за исключением случая, когда рисунок является ссылкой. Цвет рамки в этом случае совпадает с цветом контента, заданным с помощью стиля или параметра text тега <BODY> (пример 1).

Пример 1. Добавление рамки вокруг Имаги

Валидный код
<!DOCTYPE ШТМЛ PUBLIC "-//W3C//DTD ШТМЛ 4.01 Transitional//EN" "http://www.w3.org/TR/ШТМЛ4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Рамка и рисунок</title>
</head>
<body text="#00ff00">
<p><img src="sample.gif" width="200" height="222" border="2" alt="Рамка зеленого цвета толщиной 2 пиксела"></p>
</body>
</html>

Браузеры неодинаково отображают данный пример. Так, Файер фох и Опера покажет зеленую рамку, а Internet Эксплорер черную (рис. 1).

Рис. 1. Рамка в браузере Opera

Рис. 1. Вид рамки вокруг рисунка в браузере Опера

Если изображение является ссылкой, рамка добавляется автоматически, толщина ее один пиксел, а цвет рамки совпадает с цветом ссылок.

Чтобы убрать рамку, следует задать параметр border="0" у тега <IMG> (пример 2).

Пример 2. Удаление рамки вокруг Имаги

Валидный код
<!DOCTYPE ШТМЛ PUBLIC "-//W3C//DTD ШТМЛ 4.01 Transitional//EN" "http://www.w3.org/TR/ШТМЛ4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Рамка и рисунок</title>
</head>
<body>
<p><a href="sample.ШТМЛ"><img src="sample.gif" width="50" height="50" border="0" alt=""></a></p>
</body>
</html>

Можно также использовать CSS (ЦСС), чтобы убрать рамку для всех рисунков, которые являются ссылками. Для этого применяется стилевой параметр border cо значением none (пример 3).

Пример 3. Использование CSS (ЦСС)

Валидный код
<!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=windows-1251">
<title>Рамка и рисунок</title>
<style type="text/CSS (ЦСС)">
A IMG {
 border: none; /* Убираем рамку вокруг рисунков-ссылок */
}
</style>
</head>
<body>
<p><a href="sample.ШТМЛ"><img src="sample.gif" width="50" height="50" alt=""></a></p>
</body>
</html>

Конструкция A IMG определяет конконтент применения стилей — только для тега <IMG>, который находится внутри контейнера <A> и является, тем самым, ссылкой.

Аналогично, с помощью стилей можно и установить цвет рамки вокруг картинки. Для этого также используется атрибут border, но в качестве его значения выступает толщина границы, ее стиль и цвет (пример 4).

Пример 4. Изменение цвета рамки с помощью стилей

Валидный код
<!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=windows-1251">
<title>Рамка и рисунок</title>
<style type="text/CSS (ЦСС)">
A IMG {
 border: 1px /* Толщина рамки */
 solid /* Сплошная рамка */
 red; /* Цвет рамки */
}
</style>
</head>
<body>
<p><a href="sample.ШТМЛ"><img src="sample.gif" width="50" height="50" alt=""></a></p>
</body>
</html>

В данном примере вокруг Имаги-ссылки добавляется граница красного цвета толщиной один пиксел.

Статья опубликована: 06.09.2009 Последнее обновление: 07.02.2009
Поиск по сайту
Имаги
Разделы
Теги по теме

INPUT
Тег INPUT является одним из разносторонних элементов формы и позволяет создавать разные элементы интерфейса и обеспечить взаимодействие с пользователем.

CSS (ЦСС) по теме

border
Параметр позволяет одновременно установить толщину, стиль и цвет рамки вокруг элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному атрибуту.

Copyright 2009 Все права защищены

О нашем Internet проекте | Наши планы | Контент нашего сайта | Есть ошибки... | Технологии | Поддержать проект