Як змінити колір фону

Як змінити колір фону

Якщо виникає необхідність змінити дизайн сайту, то дуже ймовірно, що доведеться міняти колір фону сторінок, адже це фундамент, який об’єднує всі елементи оформлення. Розглянемо — як зробити це з мінімальними зусиллями.

Інструкція

  1. Колір фону сторінок вашого сайту може бути встановлений кількома способами. Один з них задає значення кольору засобами HTML (HyperText Markup Language — «мова розмітки гіпертексту»). У html-коді кожної сторінки є блок, який починається з тега і закінчується — всередині нього, власне, і знаходиться опис вмісту сторінки. У відкриваючому тезі цього блоку є можливість вказати колір фону сторінки. Робиться це розміщенням в ньому атрибута bgcolor. Наприклад, так:

    <body bgcolor=»Blue»>

    Тут заданий синій колір для фону цієї сторінки. У мові HTML передбачено деяку кількість квітів, що вказуються за назвами — можна, наприклад, атрибуту bgcolor задати колір DarkViolet або Gold. Але набагато частіше використовують шістнадцяткові коди кольорів. Тоді цей же тег буде записаний так:

    <body bgcolor=»#0000FF»>

    Тобто, щоб змінити колір фону сторінки, заданий цим способом, вам треба відкрити код сторінки, знайти в ньому тег body і виправити значення атрибута bgcolor. Якщо ви маєте у своєму розпорядженні файл цієї сторінки, то зробити це можна звичайним текстовим редактором — Блокнотом. Якщо ж використовуєте будь-яку систему управління сайтом, то можете це робити прямо в онлайн-редакторі сторінок панелі адміністрування вашого сайту.
  2. Однак управління кольором фону документів засобами HTML зараз застосовується не часто. Набагато ймовірніше, що на вашому сайті для цього використовується CSS (Cascading Style Sheets — «каскадні таблиці стилів»). CSS — це мова, спеціально призначений для опису зовнішнього вигляду документа, на відміну від HTML, для якого це лише одна з другорядних завдань. Блоки CSS можуть бути включені повністю в код сторінки, а можуть міститися в окремому файлі з розширенням, наприклад, styles.css. У другому випадку в коді сторінки буде посилання на зовнішній файл, яка може виглядати так:

    <style type=»text/css» media=»all»> @ import «styles.css»; </ style>

    А в першому випадку між тегами <style type=»text/css» media=»all»> і </ style> буде опис стилю документа. І в ньому, вам теж треба буде знайти ту частину опису стилів, яка відноситься до основного тіла документа — body. Але в CSS це буде називатися не «тегом» а «селектором», і виглядати має, наприклад, так:

    body {

    background-color: Blue;

    text-align: center;

    color: White;

    }

    Тут нас цікавить параметр background-color — він визначає колір фону сторінки. У наведеному зразку заданий синій колір фону. І в SCC для визначення кольору дійсні ті ж правила, що в HTML — є деяка кількість іменованих відтінків кольорів (наприклад — FloralWhite), але краще користуватися шістнадцятковими значеннями. Наприклад, FloralWhite в шістнадцятковому написанні буде виглядати як # FFFAF0.

    Іноді колір фону задається в перемикачі background:

    body {

    background: Blue;

    text-align: center;

    color: White;

    }

    Або так:

    body {

    background: Blue url (img / image.jpg) no-repeat;

    text-align: center;

    color: White;

    }

    В останньому зразку крім кольору, задано відображати в тлі сторінки і картинку image.jpg з папки img.

    Тобто, щоб змінити колір фону сторінки, поставлене з використанням CSS, вам треба:

    А — відкрити код сторінки, знайти в ньому тег style і визначити чи знаходиться опис стилів сторінки в окремому файлі або воно викладено прямо тут. Якщо в окремому файлі — треба відкрити його.

    Б — у коді SCC потрібно знайти перемикач body, а в ньому параметр background або background-color і поміняти значення кольору на потрібне вам.

    Як і HTML-код, код CSS можна редагувати у звичайному блокноті або онлайн-редакторі сторінок панелі адміністрування сайту.

Корисні поради

Визначити шістнадцятковий код потрібного вам відтінку кольору можна як за допомогою програм (наприклад — ColorImpact, Ruler), так і використовуючи інтернет-ресурси.