Фон страницы css

Приветствую вас, мои дорогие и уважаемые посетители сайта sokolskoe.blogspot.ru. В этом очередном уроке, мы будем разбираться со следующими интересными возможностями css, а именно делать фон страницы css. 

Технология CSS, позволяет нам придавать своему сайту индивидуальный, неповторимый фон, этот фон на странице можно делать как простым каким нибудь цветом, так и изображением, но обо всём по порядку.

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

Самое первое и элементарное чего мы научимся делать, это создавать простой цветной фон страницы, для этого нам надо написать простинькое правило для тэга "body". Из уроков по "html" , вы уже должны знать за что отвечает этот тег, но для закрепления материала я напомню, тэг "боди", отвечает за то, что находится на странице и в том числе за то, какой у неё фон. Смотрим и учимся на примере ниже:

body {background-color:f6f6f6;}

В файле "style.css", из данного выше примера, мы видим что появилось новое неизвестное правило "background-color".

background-color:f6f6f6; - Прописывая этот элемент, вы придаёте цвет всей хтмл странице, в данном случае был использован цвет "f6f6f6" это означает, что на странице будет светло серый фон.

Придавать фон из простого цвета на странице мы научились, далее посмотрим как делается фон из изображения:

body {background-image:url(bg3.gif);

Давайте разберём это правило по полочкам:

background-image - Означает что фон будет состоять из изображения.

url(bg3.gif) - Адрес местонахождения изображения, а в скобочках прописывается название самого изображения и через точку соответственно его расширение.
Вот видите как всё на самом деле просто.

Фон можно делать не только странице, но и остальным элементам, абзацам, рамкам, отдельным классам, короче всему.

Смотрите как можно создать фон отдельному абзацу, сначала мы прописываем название тэга для которого предназначается данное правило, а затем придумываем любое название класса, вот так:

.new {background-color:red; color:white;}

Разберём сие правило более подробно:

background-color:red; - Из предыдущих примеров нам понятно что это простое придание фона.

red; - Так тремя буквами прописывается красный цвет, это тоже самое если бы мы написали вот так "FFCCCC".

color:white; - Так прописывается цвет для текста.

white; - Белый цвет, можно прописать и так: "FFFFFF".

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

<p class=" new "> Абзац в html странице. </p>

В итоге у нас получился на странице белый абзац на красном фоне.

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