CSS (ЦСС) имеет несколько опций для определения цвета контента и фоновых областей на web-странице. Эти опции по работе с цветом не только заменяют аналогичные в простом ШТМЛ, но и дают массу новых возможностей. Например, традиционный путь для разработки цветной области, заключается в применении таблицы. Стили позволяют отказаться от подобного использования таблиц предлагая более простые и удобные варианты управления цветом.
В табл. 1 перечислены свойства элементов, предназначенных для задания цвета.
Свойство | Значение | Описание | Пример |
---|---|---|---|
color | Цвет |
Устанавливает цвет контента | P { color: #330000 } |
background-color | Цвет transparent |
Цвет фона | BODY { background-color: #6699FF } |
background-image |
URL none |
Фоновый рисунок | BODY { background-image: url (bg.gif) } |
background-repeat | repeat repeat-x repeat-y no-repeat |
Повторяемость фонового рисунка | BODY { background-image: url (bg.gif) background-repeat: repeat-y } |
background-attachment | scroll fixed |
Прокручиваемость фона вместе с файлом | BODY { background-image: url (bg.gif) background-attachment: fixed } |
background-position | Проценты Пикселы top center bottom left right |
Начальное положение фонового рисунка | BODY { background-position: left top } |
Цвет, используя CSS (ЦСС), можно задавать тремя способами.
Браузеры поддерживают некоторые цвета по их названию (пример 1).
Пример 1. Установка цвета элемента по его названию
Цвет можно устанавливать по его шестнадцатеричному значению, как и в обычном ШТМЛ (пример 2).
Пример 2. Установка цвета элемента по шестнадцатеричному значению
Также допустимо использовать сокращенную запись, вроде #fc0. Она означает, что каждый символ дублируется, в итоге получим #ffcc00.
Можно определить цвет используя значения красной, зеленой и синей составляющей в десятичном исчислении. Значение каждого из трех цветов может принимать значения от 0 до 255. Также можно задавать цвет в процентном отношении (пример 3).
Пример 3. Установка цвета элемента по шестнадцатеричному значению
Цвет фона определяется значением параметра background-color, а изображение, которое используется в качестве фона, задается параметром background-image. Значением по умолчанию для цвета фона является transparent, который устанавливает прозрачный фон. Для установки фонового рисунка используется абсолютный или относительный адрес к файлу. Рекомендуется задавать одновременно фоновый рисунок и цвет фона, который будет использоваться в случае недоступности файла Имаги.
Пример 4. Цвет фона и фоновое изображение
Если задано фоновое изображение, то свойство background-repeat определяет его повторяемость и способ, как это делать. Допустимыми значениями являются repeat (повторяемость по вертикали и горизонтали), repeat-x (по горизонтали), repeat-y (по вертикали) и no-repeat (только один рисунок, без повторения), как показано в примере 5.
Пример 5. Повторяемость фонового рисунка
В данном примере фоновый рисунок повторяется по вертикали.
Положение фона определяется параметром background-position. У него два значения, положение по горизонтали (может быть — right, left, center) и вертикали (может быть — top, bottom, center). Положение можно, также, задавать в процентах, пикселах или других абсолютных единицах (пример 6).
Пример 6. Положение фона
В данном примере фон будет помещен в правый нижний угол страницы. Если нужно определить рисунок в левом верхнем углу, то надо задать следующий вид: background-position: left top.
Параметр background-attachment: fixed фиксирует фон, чтобы он оставался неподвижным при прокрутке содержимого окна браузера.
Copyright © 2009-2022 | По всем вопросам: donmobi@mail.ru
О нашем Internet проекте | Наши планы | Контент нашего сайта | Есть ошибки... | Технологии | Поддержать проект