Рамки, имеющие стиль

Начнем со стилей рамок – самого важного их параметра – не потому, что они управляют представлением рамки (хотя, конечно, они это делают), но потому, что без стиля рамки вообще не будут отображены. CSS определяет 10 отдельных отличных от inherit стилей для свойства border-style, включая применяемое по умолчанию значение none. Значение hidden эквивалентно значению none, за исключением случая применения к таблицам, когда оно призвано разрешить конфликт рамок.

Самый непредсказуемый стиль рамки – double (двойной). Он определяется как ширина двух линий плюс пробел между ними и эквивалентен значению border-width (обсуждаемому в следующем разделе). Однако спецификация CSS не говорит о том, должна ли одна линия быть толще другой, или они должны быть одинаковыми, или пробел между ними должен быть уже или шире линий. Решение всех этих вопросов остается за агентом пользователя, и автор не может влиять на этот процесс. Значение свойства color всех рамок, – gray, благодаря чему проще увидеть все визуальные эффекты. Вид рамки всегда зависит в некоторой мере от ее цвета, хотя представление может меняться в зависимости от агента пользователя. Различные варианты визуального представления рамки со стилем inset.


Итак, предположим, требуется задать стиль рамки для изображений, находящихся внутри непосещенной гиперссылки. Им можно было бы присвоить значение outset, тогда бы они выглядели как ненажатая кнопка:

a:link img {border-style: outset;}

Цвет рамки основывается на значении свойства color элемента. В данных обстоятельствах, скорее всего, это будет синий (хотя этого не видно на печати), потому что изображение содержится в гиперссылке, а основной цвет гиперссылок обычно синий. При желании можно изменить этот цвет на silver вот так:

a:link img {border-style: outset; color: silver;}

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

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела CSS на эту тему:
Абсолютные значения и поля
Задание рамки одним свойством
Несколько стилей
Основные блоки элементов
Отрицательные и свернутые поля

Вернуться в раздел: CSS / 8. Отступы, рамки и поля