Задание рамки одним свойством

Теперь обратимся к самому краткому формату задания свойств рамок: border. Преимущество данного свойства состоит в его исключительной компактности, хотя она и вводит некоторые ограничения. Прежде чем заняться этим, давайте посмотрим, как работает свойство border. Если вы хотите, чтобы все элементы h1 имели толстую серебряную рамку, все очень просто:

h1 {border: thick silver solid;}

Значения применяются ко всем четырем сторонам рамки. Эту альтернативу, конечно, надо предпочесть следующему варианту:

h1 {border-top: thick silver solid;
border-bottom: thick silver solid;

border-right: thick silver solid;
border-left: thick silver solid;} /* аналогично предыдущему примеру */

Недостаток свойства border – стиль, ширина и цвет могут быть заданы только глобально. Иначе говоря, значения border будут применяться ко всем четырем сторонам рамки. Для того чтобы рамка элемента была разной с каждой стороны, задавая ее, придется применять другие свойства. Конечно, можно использовать каскад:

H1 {border: thick silver solid;
border-left-width: 20px;}

Второе правило переопределяет значение ширины для рамки слева, назначенное первым правилом, заменяя таким образом thick на значение 20px.


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

h4 {border-style: dashed solid double;}
h4 {border: medium green;}

Здесь во втором правиле не задан стиль рамки, т. е. будет подставлено значение по умолчанию none, а у элементов h4 вообще не будет рамки.

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

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

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