Колір фону в css, як створити сайт з нуля
Дуже часто мені задають питання - як змінити колір фону, шрифт заголовка, як зробити посилання підкресленою або змінити вид сайдбара. Справді, буває таке, що обрана тема в цілому влаштовує, але хотілося б внести в вид сайту невеликі зміни. А то і взагалі - повністю змінити шаблон, зробивши його унікальним та індивідуальним.
Я думаю, цієї інформації моїм Новомосковсктелям не вистачає, тому хочу ввести нову рубрику, в якій буду вчити людей технічну сторону. Коротко, у справі і на практичних прикладах. Загалом, в господарстві такі знання однозначно знадобляться.
Всі перераховані вище питання вирішуються за допомогою CSS. Серед файлів вашого шаблону є файл style.css. Якщо ви його відкриєте, то побачите довгий незрозумілий код. Складним і страшним він здається тільки на перший погляд. Якщо ви дізнаєтеся трохи більше про CSS, то переконаєтеся, що все дуже просто і дуже цікаво.
CSS (Cascading Style Sheets - Каскадні таблиці стилів) - це спеціальна мова, на якому можна описати дизайн сайту. Ту ж функцію може виконувати html, але у нього набагато менше можливостей, він більш громіздкий і менш гнучкий, складний в управлінні.
Не буду вдаватися в теорію і розповідати, звідки і як з'явився CSS, ми не курсову роботу пишемо. Нам потрібно навчитися працювати з ним, тому відразу переходимо до практики - кольором фону в CSS.
Розберемося, що ми написали, зверху вниз:
- відкриває тег вказує на початок html-документа (сторінки)
- відкриває тег вказує на початок «шапки» сторінки
- в теги
- закриває тег - шапка закінчена
- далі визначено колір фону сторінки. Зовсім вже розжовувати не буду, припускаю, що з html ви хоч трохи знайомі.
- відкриває тег - початок тіла сторінки
- в теги укладений заголовок сторінки - цей заголовок, на відміну від title, видно
- закриває тег - тіло документа закінчено
- закриває тег - закінчений весь документ
Збережіть файл і відкрийте його в браузері. Ви побачите сторінку чудесного зеленого кольору. Цей колір ми і задали в п'ятому рядку за допомогою звичайного html. Тепер зробимо те ж саме, тільки вже з допомогою CSS. В CSS колір фону можна задати так:
Де body - це елемент, до якого будемо застосовувати властивість (в даному випадку тіло сторінки)
background-color - це властивість, яке застосовуємо (тут це колір фону)
# 113a03b - значення властивості. Тут це код кольору.
Подальше завдання - якимось чином зв'язати документ зі стилями. Найзручнішим і поширеним способом є підключення зовнішнього файлу стилів.
1. Відкриваємо створений раніше файл style.css і прописуємо в ньому наш фон:
2. Відкриваємо на редагування file.html і трохи змінюємо код:
Уявіть, що ваш сайт з 20 (або 50, або 100) сторінок написаний повністю на html, без застосування CSS. У цьому випадку, щоб змінити колір фону, вам доведеться редагувати окремо кожну сторінку, що досить клопітно. CSS набагато спрощує завдання, дозволяючи працювати відразу з безліччю файлів одночасно. Змінивши в файлі style.css код кольору, ви моментально змініть фон відразу на всіх сторінках.
Колір фону заданий в самій нижній сходинці (інші властивості поки розглядати не будемо). Змініть у себе цифровий код кольору і збережіть файл (тільки запам'ятайте, який колір був раніше, щоб відкинути редагування). Ви побачите, що на всіх сторінках вашого сайту колір фону змінився. Круто, правда?
В рамках цієї статті я не стала вдаватися в зовсім вже ази. Якщо ж ваша матчастину безнадійно кульгає, то в блозі seostop.ru ви можете її підтягнути - дізнатися, як створити свій сайт в звичайному блокноті або спеціальною програмою, поповнити свої знання html або php або дізнатися щось новеньке про просування.