рассмотрим человекоориентированные возможности по определению позиции изображения:
top |
прикрепить изображение к верхнему краю элемента, |
bottom |
прикрепить изображение к нижнему краю элемента, |
left |
прикрепить изображение к левому краю элемента, |
right |
прикрепить изображение к правому краю элемента, |
center |
отцентрировать изображение (по вертикали или го- |
|
ризонтали). |
Значения употребляются по одиночке или парами, в следующих комбинациях:
top left = left top
top = top center = center top right top = top right
left = left center = center left center = center center
right = right center = center right bottom left = left bottom
bottom = bottom center = center bottom bottom right = right bottom
Общий пример инструкции:
body {
background-image: url("river.png"); background-position: bottom right; background-repeat: no-repeat;
}
3.6. Оформление блоков
CSS предусматривает следующую модель оформления блоков: размер любого блока складывается из ширины и высоты области содержимого, отступов, толщины рамок и величины границ
(рис. 3.4).
65
Рис. 3.4. Модель блока
В область содержимого (самый внутренний прямоугольник) располагается текст, мультимедийные объекты и другие блоки. Размер области содержимого можно регулировать через свойства width и height, которые могут принимать абсолютные или относительные (относительно размера блока-родителя) значения.
Отступ формирует расстояние между областью содержимого и рамкой. Эта область заливается фоном блока. Общее свойство отступа называется padding. Составные свойства: padding-top, pad- ding-bottom, padding-left и padding-right. Из их названий ясно,
какой из отступов они позволяют сделать. Правила подстановки значений аналогично описанному в п. 3.1 в подразделе «Оптимизация объявлений». Возможны как абсолютные, так и относительные (вычисляются от размера области содержимого) значения.
body {padding: 1em 2em 3em 4em }
/* top=1em, right=2em, bottom=3em, left=4em */
Рамка позволяет привнести декоративный элемент в оформление и, конечно, своей шириной влияет на размер блока.
66
Свойства рамки задают размер, цвет и стиль рамки объемлющего прямоугольника. Соответственно их можно разбить на следующие группы:
•размер рамки: border-top-width, border-bottom-width, border-left-width, border-right-width и border-width;
•цвет рамки: border-top-color, border-bottom-color, border-left-color, border-right-color и border-color;
•стиль рамки: border-top-style, border-bottom-style, border-left-style, border-right-style и border-style;
•общие: border-top, border-bottom, border-left, borderright и border.
Размер и цвет рамки определяются аналогично свойствам padding и color.
Стили рамки могут принимать следующие значения:
none нет рамки (влечет присваивание border-width значения 0),
dotted dashed solid
double groove ridge
inset outset
h1 { border-right-style: double }
Общее свойство границы называется margin. Граница позволяет отодвинуть рамку и область содержимого от других блоков и краев обозревателя. Область от границы до рамки всегда прозрачна (через нее виден фон, но свою заливку делать нельзя). Границу нельзя сделать видимой. Составные свойства: margin-top, margin-bottom, margin-left и margin-right. Из их название ясно, какой из отступов они позволяют сделать. Правила подстановки значений описаны в п. 3.1 подраздела «Оптимизация объявлений». Возможны как абсолютные, так и относительные значения.
67