|
CSS предоставляет множество инструментов для
работы с фоном, которые позволяют создать действительно уникальный и
гармоничный для вашего сайта фон.
В CSS цвет чаще
всего указывается с помощью:
-
шестнадцатеричного (HEX) значения - например "#ff0000";
-
RGB значения
- например "rgb(255,0,0)";
-
имени цвета
- например "red".
Примечание:
в параграфе вебучебника CSS "Значений Цветов", Вы найдете полный список
допустимых значений цветов.
Основными свойствами цвета и фона в CSS
являются:
color - задает основной цвет;
background-color -
устанавливает цвет фона элемента;
background-image -
устанавливает фоновое изображение для элемента;
background-repeat -
устанавливает, как фоновое изображение будет повторяться;
background-attachment
- устанавливает, будет ли изображение зафиксированным, или оно будет
прокручиваться вместе со страницей;
background-position
- устанавливает положение для фонового изображения;
background - устанавливает все фоновые
свойства в одном объявлении.
Свойство
COLOR
Задает основной цвет (цвет переднего плана)
того или иного элемента. Например, если мы хотим сделать цвет всех
заголовков первого уровня красным, а цвет текста параграфов зеленым, то
таблица стилей будет выглядеть так:
Пример:
H1
{
color:
red
;
}
P
{
color:
green
;
}
нажмите чтобы увидеть результат
Свойство
Background–color
Background–color – заполняет элемент цветом. Значение color –
задает цвет элемента, а значение transparent – задает прозрачный фон.
Пример:
{
background-color : #FFEECC ;
}
H1 {
color: red ;
background-color :green ;
}
P {
color: blue ;
}
нажмите чтобы увидеть результат
Свойство
Background–image
Background–image – позволяет использовать изображение в
качестве фона.
none – фоновое изображение не используется.
url – позволяет задать путь к изображению.
Пример
(для сайта
webuchebniki.narod.ru):
nn {
background-image:url('images/images.jpg');
}
нажмите
чтобы увидеть результат
Фоновое
изображение - повторение по
горизонтали или по
вертикали
По умолчанию, свойство background-image повторяет изображение как по
горизонтали, так и по вертикали.
Некоторые изображения должны повторяться только по горизонтали или только по
вертикали.
Если изображение повторяется только по горизонтали (repeat-x),то фон будет
выглядеть лучше:
Пример:
{
background-image:url('images/images.jpg');
background-repeat:repeat-x;
}
нажмите чтобы увидеть результат
|