<< Назад к списку статейДата добавления: 2010-04-25
Автор: 2RaV

Создаем рамку для изображений

После прочтения статьи о Создании круглых уголков рамки мне пришло пару писем с вопросами: А как создать рамку для изображений на сайте ?
Постараюсь здесь ответить на этот вопрос.


Для добавления рамки вокруг картинки применяется стилевой атрибут border. В качестве значения одновременно указывается толщина границы, ее стиль и цвет. Например, для создания сплошной рамки толщиной 3 пикселя зеленого цвета необходимо записать в файле со стилями (css)

IMG {border: 3px solid #00FF00;}.


Результат данного примера
пример изображения с рамкой

Не обращайте внимание на серую рамку вокруг изображения, это уже применяются стили данного сайта.


HTML код примера:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Страница</title>
<style type="text/css">
IMG {
{border: 3px solid #00FF00;}
</style>
</head>
<body><p><img src="img/webmaster/ramka_izobr.jpg" width="184" height="166" alt="пример" /></p>
</body>
</html>

Добавление рамки к определенным рисункам

Иногда не требуется, чтобы все рисунки и изображения были оформлены в рамке, а только определенные рисунки. Для этого используйте ниже приведенный код.

HTML код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Страница</title>
<style type="text/css">
IMG.ramka{
{border: 3px solid #00FF00;}
</style>
</head>
<body><p><img src="img/webmaster/ramka_izobr.jpg" width="184" height="166" alt="пример" /></p>
<p><img class="ramka" src="img/webmaster/ramka_izobr.jpg" width="184" height="166" alt="пример" /></p>
</body>
</html>

Результат данного примера
картинка в рамке
В приведенном коде, рамка будет добавляться к рисункам с параметром class="ramka".

<< Еще статьи