рамки и границы

Как сделать паспарту?

Паспарту называется картонная рамка для фотографии или рисунка. Использование паспарту зрительно увеличивает изображение, привлекает к нему внимание и делает картину более эффектной. Конечно, на веб-странице нет нужды имитировать подобную рамку, поэтому паспарту в данном случае будем называть цветную прямоугольную область вокруг изображения. На рис. 1 продемонстрирована фотография с паспарту.

Пример паспарту

Рис. 1. Пример паспарту

Как добавить подчеркивание к заголовку?

Подчеркивание для блочных элементов вроде тега <h1> можно проводить двояко. Например, линию под текстом устанавливать на всю ширину блока, независимо от объема текста. А также подчеркивание делать только у текста. Далее рассмотрим оба варианта.

Как убрать пунктирную рамку вокруг ссылок?

В некоторых браузерах, частности Firefox, при активации ссылок вокруг них добавляется пунктирная рамка. Она предназначена для привлечения внимания и демонстрации текущего фокуса (рис. 1).

Пунктирная линия вокруг ссылки

Рис. 1. Пунктирная линия вокруг ссылки

Тем не менее, некоторые разработчики хотели бы убрать эту рамку, чтобы сделать сайт однообразным в различных браузерах. Для этого следует к селектору A добавить стилевое свойство outline со значением none (пример 1).

Как с помощью стилей задать цвет линии, созданной с помощью тега <hr>

Цвет линии, добавленной на веб-страницу через тег <hr>, по умолчанию отображается серого цвета и с эффектом объема. Такой вид линии не всегда подходит к дизайну сайта, поэтому понятно желание разработчиков изменить цвет и другие параметры линии через стили. Однако браузеры неоднозначно подходят к этому вопросу, из-за чего придется использовать сразу несколько стилевых атрибутов. В частности, браузер Internet Explorer для цвета линии применяет свойство color, а браузеры Firefox и Opera — background-color. Но это еще не все, при этом обязательно следует указать толщину линии (свойство height) отличной от нуля и убрать рамку вокруг линии, задавая значение none у свойства border. Собирая все параметры воедино для селектора HR, получим универсальное решение для популярных браузеров.

Как добавить рамку к изображению?

Для добавления рамки вокруг картинки применяется стилевое свойство border, которое следует добавлять к селектору IMG. В качестве значения одновременно указывается толщина границы, ее стиль и цвет. Например, для создания сплошной рамки толщиной два пиксела красного цвета необходимо записать IMG {border: 2px solid #ff0000;}.

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

Когда рисунок помещается внутрь контейнера <a>, то он становится ссылкой и вокруг него автоматически добавляется тонкая цветная рамка. Чтобы от нее избавиться, добавьте свойство border со значением none к селектору IMG, как показано в примере 1.

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

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

Как сделать, чтобы цвет рамки вокруг изображения-ссылки менялся при наведении на него курсора мыши?

За изменение стиля элемента при наведении на него указателя мыши отвечает псевдокласс :hover. Для управления стилем ссылок этот псевдокласс добавляется к селектору A через двоеточие.

Границы между фреймами

Влад Мержевич

Граница между фреймами отображается по умолчанию и, как правило, в виде трехмерной линии. Чтобы ее скрыть используется атрибут frameborder тега <frameset> со значением 0. Однако в браузере Opera граница хоть и становится в этом случае бледной, все же остается. Для этого браузера требуется добавить framespacing="0".

Изображение в качестве ссылки

Влад Мержевич

Кроме текста, в качестве ссылок можно использовать и рисунки. Изображение в этом случае надо поместить между тегами <a> и </a>, как показано в примере 1.

Страницы