УРОКИ CSS для начинающих. Базовый курс.


Урок 8. Как задать фоновый цвет и фоновое изображение.

Изучая HTML, мы задавали фоновый цвет и фоновый рисунок, с помощью атрибутов bgcolor="#CCCCCC" и background="img/fon.jpg", прописывая их в теге body.

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

Уроки css для начинающих
Рис. 9

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

Откройте файл стилей.

Для тега body в одном из уроков мы определили следующий стиль шрифта и текста:

body{
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size : 12px;
text-align : left;
}

Фоновый цвет прописывается также для тега body с помощью свойства background-color и какого-либо значения цвета. Цвет можно задавать как в виде кода (например, #008000), так и непосредственно названием цвета (Blue, Black, Red и т. п.).

Добавьте в тег body код, чтобы получилось следующее:

Листинг 8.1

body{
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size : 12px;
text-align : left;
background-color : Olive;
}

Сохраните файл, откройте страницу сайта в браузере. Получилась страница с таким фоном (Olive):

Уроки css для начинающих
Рис. 10

Чтобы задать фоновый рисунок, применяют свойство background-image. В качестве значения к этому свойству пишут url и далее полный путь к изображению, которое хотят сделать фоновым: url (img/fon.jpg). То есть, путь прописывают таким же образом, как и вставляя рисунки на страницу сайта.

Перейдите в файл стилей и дополните код, чтобы получилось следующее:

Листинг 8.2

body{
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size : 12px;
text-align : left;
background-color : Olive;
background-image : url(img/fon.jpg);
}

Сохраните файл, перейдите к странице сайта в браузере и обновите. Должна получиться страница с выбранным фоновым рисунком:

Уроки css для начинающих
Рис. 11

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

Успехов. До встречи на следующем уроке>>>>>>>

Важно! Те уроки по CSS, что выложены на нашем сайте - это очень далеко не всё, что следует знать по каскадным таблицам стилей. К тому же, web-технологии постоянно развиваются! Поэтому рекомендую скачать бесплатно видеоуроки по CSS, в которых вы найдёте много нового, соответствующего современным стандартам сайтостроения.

P. S. Подпишитесь на безплатную рассылку Вокруг Сайта и получайте на свой электронный адрес новые уроки по созданию сайта.

SmartResponder.ru
Ваше имя: *
Ваш e-mail: *

Оставьте свой отзыв о статье:



Введите цифровой код с картинки*:

осторожно, мошенник!

Эта информация поможет сохранить вам деньги >>>

Рассылки

"Вокруг Сайта"
подпишитесь и получайте на свой e-mail уроки, книги, статьи, скрипты, а также подарки и скидки на товары, продаваемые с сайта

SmartResponder.ru
Ваше имя: *
Ваш e-mail: *

"PHP-песочница"
- PHP для начинающих: уроки с подробным анализом скриптов, необходимых для вашего сайта:

PHP-песочница
Подписаться письмом

Скачать видео

Разделы Сайта