Цвет и фон
Правила визуализации цвета
Цветовые значения (далее обозначаются как «цвет») могут зада- ваться либо шестнадцатеричным числом со значением от 00 до FF с префиксом "#" вида "#rrggbb", определяющим RGB-код цвета (большинство воспринимаемых человеком цветом можно получить смешиванием основных трех цветов – красного, зеленого и синего, соответственно в формуле цвета rr = количество красного в цвете, gg = количество зеленого в цвете и bb = количество синего в цвете), либо одним из 16 символических имен, приведенных в табл. 3.4. CSS допускает использование краткой формы RGB-кодов вида "#rgb"; при этом краткая форма преобразуется в полную повторе- нием цифр, а не добавлением нулей. Иными словами, код #fa1 со- ответствует полному коду #ffaa11. Кроме того, RGB-код цвета мо- жет быть задан в десятичной и процентной системах счисления конструкцией rgb(r,g,b), где r, g и b принимают значения в диапазо- не от 0 до 255 или от 0% до 100%.
Базовые цвета HTML
Таблица 3.4
|
black (#000000) (0, 0, 0) |
silver (#C0C0C0) (192, 192, 192) |
gray (#808080) (128, 128, 128) |
white (#FFFFFF) (255, 255, 255) |
|
maroon (#800000) (128, 0, 0) |
red (#FF0000) (255, 0, 0) |
purple (#800080) (128, 0, 128) |
fuchsia (#FF00FF) (255, 0, 255) |
|
green (#008000) (0, 128, 0) |
lime (#00FF00) (0, 255, 0) |
olive (#808000) (128, 128, 0) |
yellow (#FFFF00) (255, 255, 0) |
|
navy (#000080) (0, 0, 128) |
blue (#0000FF) (0, 0, 255) |
teal (#008080) (0, 128, 128) |
aqua (#00FFFF) (0, 255, 255) |
Цвет текста
Цвет текста задает свойство color. Нижеследующие декларации задают один и тот же красный цвет для содержания элемента em:
em {color:red } /* название цвета */ em {color:#f00 } /* #rgb */
em {color:#ff0000 } /* #rrggbb */
em {color:rgb(255,0,0) } /* целые в диапазоне 0 до 255
*/
em {color:rgb(100%,0%,0%) } /* действительные в диапазоне от
0.0% до 100.0% */
Управление фоном
Общее свойство background позволяет определить стиль фона как для документа в целом (рекомендуется использовать тег
<body>), так и отдельных элементов. Последовательность указания значений роли не играет. Можно указывать не все значения. Фон элемента распространяется на всю занимаемую элементом область.
Рассмотрим составные свойства, значения используются и в общем свойстве.
Фон элемента может задаваться либо цветом (background- color), либо изображением (background-image, background-repeat и background-position).
Свойство background-color оформляется аналогично свойству
color:
em {background-color:red }
Свойство background-image указывает обозревателю адрес изо- бражения, которое необходимо использовать как фон элемента при отображении:
Свойство background-repeat указывает условия повтора изо-
бражения с помощью следующих значений:
repeat изображение повторяется по горизонтали и вертикали, repeat-x изображение повторяется только по горизонтали, repeat-y изображение повторяется только по вертикали,
no-repeat изображение не повторяется: отображается только одна его копия.
Свойство background-position задает позицию фонового изо-
бражения при отображении. Его можно определять как в абсолют-
ных, так и относительных велечинах (процентах). Тем не менее
рассмотрим человекоориентированные возможности по определе-
нию позиции изображения:
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.4. Оформление блоков
CSS предусматривает следующую модель оформления блоков: размер любого блока складывается из ширины и высоты области содержимого, отступов, толщины рамок и величины границ (рис. 3.4).
Рис. 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 */
Рамка позволяет привнести декоративный элемент в оформле-
ние и, конечно, своей шириной влияет на размер блока.
Свойства рамки задают размер, цвет и стиль рамки объемлюще- го прямоугольника. Соответственно их можно разбить на следую- щие группы:
• размер рамки: 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, border- right и border.
Размер и цвет рамки определяются аналогично свойствам pad- ding и color.
Стили рамки могут принимать следующие значения:
none нет рамки (влечет присваивание border-width значе-
ния 0),
dotted пунктирная рамка (выводится точками),
dashed штриховая рамка (выводится короткими отрезками),
solid сплошная рамка (выводится сплошной линией стоит по умолчанию),
double двойная рамка (выводится двойной сплошной линией),
groove рамка изображается в виде трехмерной выемки,
ridge противоположность groove. Рамка изображается в виде трехмерного выступа,
inset рамка изображается в виде трехмерной врезки,
outset противоположность inset. Рамка изображается в виде трехмерного вырезки.
h1 { border-right-style: double }
Общее свойство границы называется margin. Граница позволяет отодвинуть рамку и область содержимого от других блоков и краев обозревателя. Область от границы до рамки всегда прозрачна (че- рез нее виден фон, но свою заливку делать нельзя). Границу нельзя сделать видимой. Составные свойства: margin-top, margin-bottom, margin-left и margin-right. Из их название ясно, какой из отступов они позволяют сделать. Правила подстановки значений описаны в п. 3.1 подраздела «Оптимизация объявлений». Возможны как абсо- лютные, так и относительные значения.
Источник: Филиппов С.А. Основы современного веб-программирования: Учебное пособие. М.: НИЯУ МИФИ, 2011. – 160 с.