2013
23
Окт

Рамки к изображению



Пресса и чашка кофе

Фотографии, используемые в качестве иллюстраций к статье можно оформить рамкой. Рамку можно добавить в графическом редакторе или с помощью стилей CSS. В HTML можно задать рамку, определенной толщины, вокруг изображения с помощью атрибута border, значение которого задается в пикселях. Одновременно указываются значения: толщина рамки, её стиль и цвет.


Рамка вокруг изображения


<style> img { border: 3px solid #63C;/*ширина стиль цвет*/ } </style> <p><img src="img/chashka.jpg" alt="Утренняя пресса" width="100" height="101"></p>

Пример:

Утренняя пресса

При таком обозначении рамка будет добавляться ко всем изображениям на странице. Для выбранных рисунков, необходимо создать стилевой класс с применением определенных тегов <img>.

<style> .frame { border: 3px solid #63C; } </style>

Изменение цвета рамки


По умолчанию рамка вокруг изображения не отображается за исключением случая, когда рисунок является ссылкой. Если изображение является ссылкой, рамка добавляется автоматически, толщина ее один пиксел, а цвет рамки совпадает с цветом ссылок. Чтобы убрать рамку, следует задать параметр border="0" у тега <img>.

Используя изображения-ссылки, тег <img> хранится внутри контейнера <a>. Для изменения цвета рамки при посещении ссылки, используем псевдокласс : visited.


<style> a img { border: 3px solid #63C; /* Рамка вокруг ссылок */ } a:visited img { border: 3px solid #6C3; /* Рамка вокруг посещенных ссылок */ } </style> <p><a href="http://www.valvas.ru/"><img src="img/chashka.jpg" alt="Утренняя пресса" width="100" height="101"></a></p>

Пример:

Утренняя пресса     Утренняя пресса

Цвет рамки вокруг не посещенной и посещенной ссылки