Главная страница   /   3.8. Сокращенные свойства и уникальные значения (Pro jQuery

Pro jQuery

Pro jQuery

Адам Фриман

3.8. Сокращенные свойства и уникальные значения

Не для всех свойств используются цвета и величины. Для некоторых есть специальные значения, уникальные в своей функциональной области. Хорошим примером этого является свойство border, которое я использовал в некоторых примерах, чтобы нарисовать рамку вокруг элемента. Свойство border указывается с использованием трех значений, например, таких:

border: thin solid black;

Первое значение – это ширина рамки, второе значение – это стиль рамки, и последнее значение – это цвет рамки. В таблице 3-14 показаны значения, которые можно использовать для определения ширины рамки.

Таблица 3-14: Значения для ширины рамки
Значение Описание
<length> длина, выраженная в единицах измерения CSS, таких как em, px, или cm
<perc>% процент от значения width области, вокруг которой будет нарисована рамка
thin
medium
thick
значения ширины, которые определяются в разных браузерах по-своему, однако эти значения представлены по возрастающей (тонкий, средний, толстый)

В таблице 3-15 показаны возможные значения для стиля рамки

Таблица 3-15: Значения стиля рамки
Значение Описание
none рамка не будет нарисована
dashed рамка будет нарисована штрихами
dotted рамка будет нарисована пунктирной линией
double рамка будет нарисована двумя параллельными линиями с пространством между ними
groove рамка будет выглядеть вдавленной в страницу
inset рамка будет выглядеть такой, как будто содержимое вдавлено в страницу
outset рамка будет выглядеть такой, как будто содержимое выступает над страницей
ridge рамка будет выглядеть выступающей над страницей
solid рамка будет нарисована непрерывной линией

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

Рисунок 3-15: Стили рамки

Свойство border – это также хороший пример сокращенного свойства. Такие свойства позволяют установить значения для нескольких связанных свойств одним объявлением. Это обозначает, что одно свойство border , как оно было описано ранее, эквивалентно 12 объявленным свойствам, как показано в листинге 3-17.

Листинг 3-17: Индивидуальные свойства рамки

border-top-color: black;
border-top-style: solid;
border-top-width: thin;
border-bottom-color: black;
border-bottom-style: solid;
border-bottom-width: thin;
border-left-color: black;
border-left-style: solid;
border-left-width: thin;
border-right-color: black;
border-right-style: solid;
border-right-width: thin;

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