Сокращенные свойства и уникальные значения
Не для всех свойств используются цвета и величины. Для некоторых есть специальные значения, уникальные в своей функциональной области. Хорошим примером этого является свойство border, которое я использовал в некоторых примерах, чтобы нарисовать рамку вокруг элемента. Свойство border указывается с использованием трех значений, например, таких:
border: thin solid black;Первое значение – это ширина рамки, второе значение – это стиль рамки, и последнее значение – это цвет рамки. В таблице 3-14 показаны значения, которые можно использовать для определения ширины рамки.
Таблица 3-14: Значения для ширины рамки
| Значение | Описание |
<length> |
длина, выраженная в единицах измерения CSS, таких как em, px, или cm |
<perc>% |
процент от значения width области, вокруг которой будет нарисована рамка |
thinmediumthick |
значения ширины, которые определяются в разных браузерах по-своему, однако эти значения представлены по возрастающей (тонкий, средний, толстый) |
В таблице 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 позволяет вникнуть в детали и установить уникальные свойства для очень точных манипуляций, а также использовать сокращенные свойства, когда связанные между собой значения одинаковы.
