3 Урок. Працюємо з фоном сайту.
У преведущем уроці ми навчилися створювати правила в таблиці стилів і прив'язувати ці правила до певних тегам і елементам, надаючи тим самим певний вид цих елементів.
Зараз фон нашого сайту за замовчуванням має білий колір. Але для додання сайту індивідуальності можна адже задати фону будь-який колір. Найпростіше це зробити перевизначивши в таблиці стилів значення тега body. Колір фону в CSS (або будь-якого елементу) визначається властивістю backdround-color. Здається колір так само як і в HTML, тобто або прописується назва кольору або його шістнадцяткове значення дивись таблицю базових квітів.
Відкриваємо таблицю стилів і прописуємо таке правило:
Колір нашої сторінки змінився з білого на темно-синій. Причому змінився як колір фону, так і колір самої web-сторінки. Щоб відокремити фон від кольору сторінки, давайте задамо все той же білий колір нашої web-сторінці. Так як в основі сторінки у нас лежать таблиці (табличний дизайн). прописуємо в таблиці стилів ще одне правило відображення фону всередині таблиць, а саме:
Тепер у нас колір фону темно-синій, а колір всередині сторінки білий.
Запам'ятовуємо. що властивість backdround-color: відповідає за колір фону елемента. Як ви вже помітили - це властивість можна застосовувати до будь-яких елементів. Наприклад задати колір фону можна будь-якого абзацу або окремо взятої осередку в таблиці. Причому як Ви розумієте колір можна теж поставити будь-яке за Вашим смаком.
Природно можна задати однаковий колір як фону так і самої web-сторінки. в цьому випадку все зіллється і буде виглядати однієї монолітної сторінкою - це вже Ваш дизайнерський смак.
Наступне важливе і цікаве властивість застосовується для створення фону на веб-сторінках - це background-image: url (bg.jpg). Це властивість дозволяє застосувати в якості фону графічний файл. Тут ми повинні вказати url тобто шлях де лежить цей графічний файл, який буде використовуватися в якості фону і природно назва самого файлу. В даному випадку файл bg.jpg лежить в загальнодоступному місці, тому шлях вказувати не потрібно. Повністю це правило виглядає ось так:
Подивіться, що у нас вийшло. За допомогою графічних файлів можна надавати фону на web-сторінці дуже красиві ефекти.
Що собою являє фоновий файлик bg.jpg. Це звичайний графічний файл розміром (в даному випадку) 50х50 px (зазвичай не більше 100х100 px) на якому зображена структура шкіри. Цей файл за умовчанням автоматично поміщається CSS в верхній лівий кут web-сторінки і так само автоматично розмножується. по горизонталі: зліва на право і по вертикалі: зверху вниз. Хоча можна задати і інші параметри розмноження. Розмножуючись цей файл заповнює собою весь вільний простір.
В якості фонового зображення можна застосовувати будь-які графічні файли (картинки, фотографії тощо). На просторах інтернету можна знайти безліч колекцій різних фонових зображень. Трохи пізніше ми з вами навчимося робити такі фонові зображення самостійно.
Наприклад мені більше подобається другий варіант нашого фонового зображення і надалі ми будемо працювати з цим варіантом.
І тепер лістинг файлу style.css нашої таблиці стилів CSS має ось такий код:
Добрий день, властивість "background-color" у вашій версії notepad ++ замінено на "background" - мучився 2 години :( А взагалі сайт норм!
Дякую за ваші уроки, дуже пізнавальні. Але у мене питання. Все ніби раніше (в попередніх уроках) виходило, але в цьому почалися проблеми. Я намагався сам розібратися, але нічого, потім вже проста вставив ваш Лістинг 3.4 в свій файл, але парне. Фон як не змінювався так і не змінюється. В чому може бути причина?
Величезне спасибі за урок! А як зробити фон нерухомим, щоб тільки сторінка прокручувалась?
уроки HTML
CSS уроки
статті
Інструменти
Шаблони сайтів
книги
прикраси
Сайт від А до Я
Заробити в інтернеті
Обман в Інтернеті
Охорона праці
МОДУЛЬНІ КАРТИНИ
PHP УРОКИ
послуги
скрипти
SEO
jQuery
Спеціальна оцінка умов праці (Соуто) - АРМ
Платіжні системи Інтернету
УРОКИ ФОТОШОП
секретний розділ
З нами зробити сайт
зможе навіть Дитина!
"Сайт від А до Я"
Дізнатися зараз >>>
Хочете заробити?
2-х рівнева
Партнерська програма!
Приєднуйтесь.
Модульна картина: Розкіш червоного оксамиту
Модульна картина абстракція: Енергія сонця
Модульна картина: Сині троянди
Модульна картина: Водоспад
Модульна картина: Орхідеї
Реєстрація доменів
ТОВ "ПК" ЛюксСтрой "
Якщо Вам сподобався
наш сайт, встановіть
Нашу посилання. і
Отримайте подарунки.