Главная
Блог разработчиков phpBB
 
+ 17 предустановленных модов
+ SEO-оптимизация форума
+ авторизация через соц. сети
+ защита от спама

Работаем с фоном сайта.

Viktor | 24.02.2014 | нет комментариев

Как использовать фоновые изображения.

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

Сегодня мы поговорим о придании цвета фону сайта и о фоновых изображениях для сайта.

Сейчас фон нашего сайта по умолчанию имеет белый цвет. Но для придания сайту индивидуальности можно ведь задать фону любой цвет. Проще всего это сделать переопределив в таблице стилей значения тега body. Цвет фона в CSS (или какого либо элемента) определяется свойством backdround-color: . Задается цвет так же как и в HTML, т.е. либо прописывается название цвета либо его шестнадцатеричное значение смотри таблицу базовых цветов.

Открываем таблицу стилей и прописываем такое правило:

Листинг 3.1.

body {background-color:#0С3445;}

Цвет нашей страницы изменился с белого на темно-синий. Причем изменился как цвет фона, так и цвет самой web-страницы. Чтобы отделить фон от цвета страницы, давайте зададим все тот же белый цвет нашей web-странице. Так как в основе страницы у нас лежат таблицы (табличный дизайн), прописываем в таблице стилей еще одно правило отображения фона внутри таблиц, а именно:

Листинг 3.2.

table {background-color:#ffffff;}

Теперь у нас цвет фона темно-синий, а цвет внутри страницы белый.

Запоминаем, что свойство backdround-color: отвечает за цвет фона элемента. Как вы уже заметили – это свойство можно применять к любым элементам. Например задать цвет фона можно любому абзацу или отдельно взятой ячейке в таблице. Причем как Вы понимаете цвет можно тоже задать любой по Вашему вкусу.

Посмотрите что у нас получилось.

Естественно можно задать одинаковый цвет как фона так и самой web-страницы , в этом случае все сольется и будет смотреться одной монолитной страницей – это уже Ваш дизайнерский вкус.

Следующее важное и интересное свойство применяемое для создания фона на веб-страницах – это background-image:url(bg.jpg). Это свойство позволяет применить в качестве фона графический файл. Здесь мы должны указать url т.е. путь где лежит этот графический файл, который будет использоваться в качестве фона и естественно название самого файла. В данном случае файл bg.jpg лежит в общей папке, поэтому путь указывать не требуется. Полностью это правило выглядит вот так:

Листинг 3.3.

body {background-image:url(bg.jpg);}

Посмотрите, что у нас получилось. С помощью графических файлов можно придавать фону на web-странице очень красивые эффекты.

Что собой представляет фоновый файлик bg.jpg ? Это обычный графический файл размером (в данном случае) 50х50 px (обычно не более 100х100 px) на котором изображена структура кожи. Этот файл по умолчанию автоматически помещается CSS в верхний левый угол web-страницы и так же автоматически размножается : по горизонтали: слева на право и по вертикали: сверху вниз. Хотя можно задать и другие параметры размножения. Размножаясь этот файл заполняет собой всё свободное пространство.

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

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

И теперь листинг файла style.css нашей таблицы стилей CSS имеет вот такой код:

Листинг 3.4.

body {background-image:url(bg.jpg);}

table {background-color:#ffffff;}

p {font-family:Verdana, Arial;
font-size:12px;
color:#000066;
margin:15px;
}

.red {font-family:Verdana, Arial;
font-size:16px;
color:#FF0000;
margin:15px;
font-weight: bold;
}

h2 {color:#FF0000;}

.green {
font-family:Verdana, Arial;
font-size:14px;
color: green;
}

В следующем уроке мы будем учиться делать рамки как для всего сайта, так и для отдельных элементов.

АВТОРСКИЕ ПРАВА
Источник: luksweb.ru
При перепечатке ссылка на источник обязательна
Оставить комментарий

Ваш email не будет опубликован. Обязательные поля помечены (обязательно)

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Форум phpBB, русская поддержка форума phpBB
Рейтинг@Mail.ru 2008 - 2014 © BB3x.ru - русская поддержка форума phpBB