Приложение: Правила CSS: Фон и цвет

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

Цвет и цвет фона

Цвет фона определяет фоновый цвет для указанного элемента, в то время как цвет используется для того, чтобы определить цвет переднего плана (обычно это означает цвет текста).

Как указывать цвета

Вы можете указывать значения цвета следующими способами:

• Указывать названия цветов (red, yellow, и т.д.) Обратите внимание, что всеми платформами признаются только 16 цветов с «известными».названиями.
• Как шестнадцатеричные значения вида #XXYYZZ; например color: #ccffcc.
• Тремя цифрами, определяющими значения красного, зеленого и синего (RGB), вида #XYZ; например color:#cfc.
• Как три процентных значения, определяющие значения красного, зеленого и синего (RGB); например color: rgb(50%,10%,3%).
• Как три числовых значения, определяющие красный, зеленый и синий (RGB) цвета; например color: rgb(200,100,55).

Примечание: при задании цвета в виде шестнадцатиричного значения (второй способ) можно указывать произвольный цвет вида #ABCDEF, например #0F93A6. При задании цвета вида #XXYYZZ можно спокойно указывать его в сокращенном (#XYZ) формате, этот формат поддерживается всеми часто используемыми браузерами [Черный Кот].

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

Для совместимости с устаревшими браузерами лучше определять цвета вторым способом. Не заключайте значения цвета в кавычки.

Если Вы хотите, чтобы элемент не имел цвета, определите значение цвета «transparent».

Определение цвета переднего плана (цвета текста)

селектор {
color: значение цвета;
}

Пример:

P {
color: #ff3300;
}

Определение цвета фона

селектор {
background-color: значение цвета;
}

Пример:

P {
background-color: red;
}

Определение фонового изображения

селектор {
background-image: url(путь к изображению);
}

Пример:

body {
background-image: url(../images/somepic.gif);
}

Будьте осторожны с синтаксисом! URL изображения в кавычки не заключается.

Установки повторения фонового изображения

селектор {
background-repeat: значение;
}

Пример:

body {
background-repeat: repeat;
}

Возможные значения: repeat (графический элемент повторяется вертикально и горизонтально – значение по умолчанию); no-repeat (графический элемент не повторяется вообще – полезно, если вы используете одно крупное изображение); repeat-y (повторяет графический элемент по вертикали); и repeat-x (повторяет графический элемент по горизонтали).

Позиционирование фонового изображения

селектор {
background-position: горизонтальная позиция вертикальная позиция;
}

Пример:

body {
background-position: 100px 50px;
}

В вышеуказанном примере фон располагается на расстоянии 10 пикселей от левого и правого краев и на расстоянии 50 пикселей от верхнего и нижнего краев.

Это свойство полезно использовать, например, если у вас есть фоновое изображение и вы хотите, чтобы фоновый цвет формировал «границу» вокруг этого изображения. При указании значений можно использовать следующие единицы измерения: px, pt, pct %, или em. В качестве альтернативного задания позиционирования можно использовать ключевые слова, определяя сначала горизонтальное и, затем, вертикальное позиционирование. Например left center или center right.

Фиксация фонового изображения

селектор {
background-attachment: значение;
}

Пример:

body {
background-attachment: fixed;
}

Возможные значения: fixed, scroll.

Сокращенный синтаксис свойств фона

селектор {
background: background-color background-image background-repeat background-attachment background-position;
}

Пример:

body {
background: #ff0000 url(../images/picture.gif) repeat-x fixed left top;
}

Определять все значения не обязательно, но обязательно перечислять их в указанном порядке.