CSS. Фоновый цвет и изображения (Урок 6)

Изучив на прошлом занятии рамки и блоки, мы переходим к большой и интересной теме о фоне CSS. Эти свойства (background-color и background-image) довольно часто используются в css, так что внимательно изучите урок. C помощью этих свойств вы легко сможете устанавливать понравившиеся вам фоны вашего сайта или даже установить фоновую картинку.

Начнем с того, что каждый блок может иметь свой фоновый цвет или изображение. Изначально фон не задан, поэтому наш блок как-бы прозрачен. Давайте зададим фоновый цвет тегу «body».

body {
font: 14px Tahoma;
color: #333333;
border: 2px solid #111111;
padding: 15px;
margin: 0 auto;
width: 1000px;
background-color: #f6f6f6;
}

 css

 

Теперь давайте зададим красный фон нашему блоку с заголовком Н1.

#header {
text-align: center;
padding: 40px;
margin: 20px auto;
width: 550px;
background-color: #сс0000;
}

css

 

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

css

Создадим новый документ с шаблоном html и файл style.css, не забудьте также прописать пути к этому файлу (см. Урок CSS № 1). В новом документе css для начала пропишем серый фоновый цвет для «body».

body {
background-color: #c3c3c3;
}

css

 

Вот мы видим, что фоновый цвет «body» стал серым. Теперь в html документе внутри тега «body» нам нужно создать по центру блок «div» с id=»main» и отступами сверху и снизу.

...
<body>
<div id="main">
</div>
<body>
...

Теперь в таблице стилей нашему блоку div зададим фиксированную высоту и ширину, положение, а также временно дадим ему золотистую рамку

#main {
outline: 1px solid #FAA21A;
width: 800px;
height: 421px;
margin: 29px auto; (29px - снизу и сверху, auto - справа и слева)
}


css

Теперь наша задача поставить на фон этого блока изображение. Оно находится по этой ссылке.  Сохраните изображение, нажав правой клавишей мыши «сохранить как» в папку «images», которую  нужно создать рядом с папкой «css».

css

После этого, мы через свойство «background-image»  прописываем на фон картинку. При этом не забудьте, что местоположение картинки указывается относительно папки css:  (../image/bg.jpg). То есть браузер сначала должен выйти из папки  css и зайти в папку image.

#main {
outline: 1px solid #FAA21A;
width: 800px;
height: 421px;
margin: 29px auto;
background-image: url (../images/bg.jpg);
}

css

 

Далее в нашем блоке div нам нужно написать текст.

...
<body>
<div id="main">
<H1>Company: EvCorporation</H1>
</div>
</body>

css

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

#main {
text-align: center;
padding-top: 182px;
font: 36px Verdana;
}

css

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

Удачи вам! До скорых встреч на страницах блога VyacheslavDanilov.ru


Вам также понравится...

Смотри и удивляйся:
Десерт

*посмотреть еще ролик можно обновив страницу в браузере

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *