HTML та CSS для початківців (Частина 31): Кольори та фони

За допомогою властивості color описується колір переднього плану (колір тексту) елементів. Вказівка кольорів можлива за допомогою різних варіантів. Класично використовуються шістнадцяткові значення. Ці значення завжди починаються з решітки. Потім зазвичай йдуть трійка цифрових і/або буквених пар. Ці пари вказують на червоний, зелений і синій кольори. Отже, вказівка кольорів завжди відбувається за наступною схемою:

RRGGBB

Вказівка #ffffff викликає білий колір. Якщо використовуєте #000000, то показується чорний колір. В "розумних" HTML-редакторах є відповідні вибори кольорів.

За допомогою можна визначити шістнадцяткові коди. Крім того, на багатьох веб-сайтах (наприклад, http://www.farbtabelle.net/) є відповідні ось такі огляди кольорів.

У CSS є можливість скороченого запису шістнадцяткових значень кольорів. Цей принцип, проте, не застосовується до всіх кольорів. Він дійсно працює лише тоді, коли одне значення складається з трьох однакових пар. Типовими прикладами є визначення кольорів для чорного та білого. Зазвичай їх записують так:

.schwarz {
   color: #000000;
}
.weiss {
   color: #ffffff;
}

Ця синтаксична конструкція також може бути скороченою.

.schwarz {
   color: #000;
}
.weiss {
   color: #fff;
}

У CSS також дозволені значення RGB. Тут вказуються десяткові значення від 0 до 255, які відокремлюються комами. Порядок вказівок кольорів відповідає порядку шістнадцяткових кольорів.

a { 
color: rgb(100%, 100%, 100%); 
background: rgb(0, 0, 0); 
}

Як показує приклад, можливі також відсоткові вказівки, що на практиці зустрічаються рідко.

Ще одним варіантом для визначення кольорів є ключові слова кольорів. Ось декілька прикладів:

• black

• red

• blue

• yellow

• white

• green

Відповідне визначення може виглядати так:

p { 
 color: white; 
 background: black; 
}

Майте на увазі, що з CSS3 палітра доступних кольорових ключових слів була значно розширена. CSS3 в цьому випадку прийняла назви кольорів з SVG-специфікації. Огляд доступних назв кольорів можна знайти за посиланням http://www.w3.org/TR/SVG/types.html#ColorKeywords.

Визначення фону

У випадку з властивістю background зазвичай зазначаються наступні можливі значення, які будуть детально представлені в наступних посібниках:

• фонова-прикріплення

• background-color

• background-image

• background-position

• background-repeat

Вказівки різних параметрів розділяються пропусками з трима різними символами. Порядок вказівок не має значення. Не всі значення обов'язково потрібно вказувати.

Приклад:

p { 
    background: transparent
    url(logo.jpg)
    scroll repeat 0% 0%; 
 }

Кольори фону

Для надання елементу фонового кольору використовується властивість background-color.

div { 
   background-color: #009999;
}

В якості значення вказується бажаний колір.

Фонові зображення

background-image визначає зображення в якості фону. Якщо ця властивість зазначена в зовнішньому CSS-файлі, відносні шляхи вказують на теку, в якій знаходиться CSS-файл.

• none – без фонового зображення

• URI – шлях до зображення

Тут також приклад:

<div style="background-image:url(hinten.jpg); margin:20px; padding:20px">
    Willkommen auf PSD-Tutorials.de!
</div>

Проте у використанні фонових зображень будьте обережні. Трохи яскраві фонові зображення не сприяють зручності читання тексту.





Звісно, є веб-сайти, де важлива лише зовнішність. Тут можна працювати з більш яскравими фонами.

Прокручувані фони

У випадку з більш довгими елементами фонове зображення прокручується під час прокручування сторінки. За допомогою background-attachment це можна запобігти.

• fixed – прокручується разом

• scroll – фонове зображення залишається на місці і пристосовується до вікна браузера (порталу).

Зазвичай властивість background-attachment використовується в поєднанні з background-image.

Приклад:

div.fest {
    background-image: url(background.gif); 
    background-repeat: no-repeat;
 }

Позиція тла

Завдяки властивості background-repeat визначається позиція, з якої починається тло. Точкою посилання є елемент, для якого визначено графіку.

• Відсоткове значення - одне або два значення, які визначають відстань графіки від верхнього лівого кута елемента. У випадку двох значень перше означає горизонтальну відстань, друге - вертикальну відстань. Точкою посилання не є верхній лівий кут графіки, а точка всередині графіки, яка також вказується значеннями x / y.

• Довжинна відстань - визначає відстань графіки від її лівого верхнього кута до лівого верхнього кута елемента. Допускаються одне або два значення. Якщо вказано два значення, перше визначає горизонтальну відстань, друге - вертикальну відстань.

Крім цього, можливі також наступні ключові слова:

• left - горизонтально лівостороннє

• center - центровано

• right - горизонтально правостороннє

• top - вертикально зверху

• bottom - вертикально знизу

Ось приклад того, як це може виглядати:

p { 
   background-position: 8em top; 
}

Повторювані тла

Чи як тло повторюється, якщо воно менше за відображену область, можна визначити за допомогою background-repeat.

• repeat - тло повторюється вертикально та горизонтально по всій області елемента.

• repeat-x - графіка повторюється тільки горизонтально.

• repeat-y - графіка повторюється тільки вертикально.

• no-repeat - графіка не повторюється.

Також приклад до цього:

body { 
   background-repeat: repeat-y; 
}

У цьому випадку графіка повторюється тільки вертикально.

Якщо використовувати repeat-y, повторення відбуватиметься виключно горизонтально.





Цей посібник показав, наскільки потужний CSS є в галузі кольорів та зображень.