Создание сайтов в Москве

Как уже упоминалось, каскадные таблицы стилей были задуманы для наиболее эффективного задания внешнего вида содержимого HTML-элементов, который они принимают в окне браузера. А что же, как не цветовое оформление является основной визуальной характеристикой. Для каждого отображаемого HTML-элемента может быть указано два цвета: цвет фона и цвет переднего плана. На переднем плане отображается информативное содержимое элемента, проще говоря — текст. В CSS2 цвет текста задается единственным, предназначенным для этих целей свойством color. Цвет указывается одним из стандартных, определенных в CSS2 способов: ключевым словом или RGB-функцией, например:

p { color: olive }
b { color: rgb (255,0,0) }

Цвета в CSS указываются так же, как и в html. Т.е. можно указывать шестнадцатиричное значение, например #ff3355, либо же название цвета (red, green, blue и др.)

Основными свойствами цвета и фона в CSS являются:

* color
* background-color
* background-image
* background-repeat
* background-attachment
* background-position
* background

Рассмотрим каждое свойство подробнее:
Свойство COLOR
Задает основной цвет(цвет переднего плана) того или иного элемента. Например, если мы хотим сделать цвет всех заголовков первого уровня красным, то таблица стилей будет выглядеть так:
H1 {
color: red ;
}

Свойство BACKGROUND-COLOR
Задает фоновый цвет элемента. В отличие от html, в котором фоновый цвет можно использовать только для страницы или ячейки таблицы(т.е. имеющих атрибут bgcolor ) в CSS , фоновый цвет можно задавать для чего угодно: для таблиц, заголовков, параграфов, ссылок и др.
Например, чтобы изменить фоновый цвет всей страницы, нужно задать это свойство элементу BODY - т.к. именно он отвечает за тело документа , т.е. за всю страницу.
BODY {
background-color :#FFEE8C;
}
Точно так же, можно было бы задать фоновый цвет и для других объектов.

Свойство BACKGROUND-IMAGE
Данное свойство используется для задания фонового изображения. Использовать можно не только для всей страницы но и для таблиц, ячеек, рамок и т.д.
BODY {
background-color : #FFEE8C ;
background-image : url(ris1.png) ;
}

Как видите, в качестве значения свойства, указывается путь к изображению, но немного не так как в html. В начале пишется URL а затем сразу, Без пробелов!!! в круглых скобках vtcnj положение картинки. Если она находится в той же папке, то пишем просто название картинки, как в примере выше.

Свойство BACKGROUND-REPEAT
Фоновое изображение по-умолчанию повторяется начиная с верхнего левого угла, как по вертикали , так и по горизонтали, , пока не заполнит весь экран. При помощью свойства background-repeat можно контролировать эти повторения.
Это свойство может принимать четыре значения:
Background-repeat: repeat-x ;

повторение по горизонтали
Background-repeat: repeat-y ;

повторение по вертикали
Background-repeat: repeat ;

по вертикали и по горизонтали(значение по-умолчанию)
Background-repeat: no-repeat ;

не повторяется
Это очень полезное свойство, и аналогов ему в html нет.
Пример записи стиля:
BODY {
background-image : url(ris1.png) ;
background-repeat: repeat-x;
}
Если вы вообще не укажете это свойство, то будет использоваться его значение по умолчанию, т.е. фоновое изображение будет повторяться как по вертикали, так и по горизонтали.

Свойство BACKGROUND-ATTACHMENT
При наличии фонового рисунка, это свойство устанавливает, будет ли фоновое изображение прокручиваться с содержимым страницы, или будет заблокировано, т.е. неподвижно. Может принимать два значения:
SCROLL - фон прокручивается вместе с содержимым;
FIXED - фон строго зафиксирован.

BODY {
background-image : url(ris1.png) ;
background-repeat: no-repeat;
background-attachment: scroll ;
}

BODY {
background-image : url(ris1.png) ;
background-repeat: no-repeat;
background-attachment: fixed ;
}

Значение по умолчанию - scroll , т.е. если вообще не писать это свойство, то фон будет прокручиваться вместе с содержимым, как в первом примере.

Свойство BACKGROUND-POSITION
Задает позицию фонового изображения. Значения можно задавать в процентах, в единицах длины и при помощи ключевых слов. Отсчет как обычно ведется из левого верхнего угла браузера, где и располагается фоновое изображение по умолчанию.
В начале указываем координату по горизонтали (по оси Х), затем через пробел координату по вертикали (по оси Y ). Координату можно задавать в процентах от ширины окна браузера, также в пикселях.
Также положение можно задавать специальными словами:
left - лево, right - право, center -центр, top - верх, bottom - низ .

Примеры стилей:

BODY {
background-image : url(ris1.png) ;
background-repeat: no-repeat;
background-position: top right;
}

BODY {
background-image : url(ris1.png) ;
background-repeat: no-repeat;
background-position: 300px 500px ;
}

BODY {
background-image : url(ris1.png) ;
background-repeat: no-repeat;
background-position: 75% 25%;
}

Сокращенная форма записи - BACKGROUND

Свойство BACKGROUND служит для сокращенной записи всех выше расмотренных свойств.
Порядок свойств этого элемента таков:
background-color_background-image_background-repeat_background-attachment _background-position
Т.е. просто записывается пять значений свойств через пробел.
BODY {
background: #ffee8c url(ris1.png) no-repeat fixed top right ;
}