Сокращенная форма определения рамок

К сожалению, сокращенные варианты задания свойств, такие как bor-der-color и border-style, не всегда так уж полезны, как может показаться. Предположим, вам захотелось применить толстую серую сплошную рамку ко всем элементам h1, но только снизу. Ограничившись уже рассмотренными свойствами, для задания такой рамки придется потратить немало времени. Вот два примера:

h1 {border-bottom-width: thick; /* вариант #1 */
border-bottom-style: solid;
border-bottom-color: gray;}
h1 {border-width: 0 0 thick; /* вариант #2 */
border-style: none none solid;
border-color: gray;}

Ни один из них не является на самом деле удобным, поскольку приходится набирать значительный объем текста. К счастью, есть лучшее решение:

h1 {border-bottom: thick solid gray;}

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

h1 {border-left: 3px solid gray;
border-right: black 0.25em dotted;
border-top: thick silver inset;
border-bottom: double rgb(33%,33%,33%) 10px;}

Как видите, порядок значений не важен.


Следующие три правила обеспечат совершенно аналогичную рамку:

h1 {border-bottom: 3px solid gray;}
h2 {border-bottom: solid gray 3px;}
h3 {border-bottom: 3px gray solid;}

Некоторые значения можно опустить и позволить вступить в силу значениям по умолчанию, как здесь:

h3 {color: gray; border-bottom: 3px solid;}

Поскольку цвет рамки не объявлен, вместо него подставляется значение по умолчанию (основной цвет элемента). Только помните, что если стиль рамки пропустить, то его стандартное значение none обеспечит ее отсутствие. Напротив, если задать только стиль, рамка будет. Скажем, надо лишь, чтобы стиль верхней рамки был dashed, и требуется оставить для ее ширины значение по умолчанию medium, а цвет должен быть таким же, как цвет текста самого элемента. В подобном случае подойдет следующая разметка:

p.roof {border-top: dashed;}

Также надо отметить, что, поскольку каждое из этих свойств применяется только к определенной стороне рамки, не существует никакой возможности тиражирования значений – это не имело бы никакого смысла. Здесь может быть только по одному значению каждого типа, т. е.


только одно значение ширины, только одно значение цвета, только один стиль рамки. Так что не пытайтесь объявить более одного типа значения:

h3 {border-top: thin thick solid purple;} /* два значения ширины--НЕВЕРНО */

В подобном случае все выражение будет недействительным, и агент пользователя полностью проигнорирует его.

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

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

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