CSS має кілька опцій для визначення кольору тексту і фонових областей на веб-сторінці. Ці опції по роботі з кольором не тільки замінюють аналогічні в простому HTML, але і дають масу нових можливостей. Наприклад, традиційний шлях для створення кольорової області, полягає в застосуванні таблиці. Стилі дозволяють відмовитися від подібного використання таблиць пропонуючи більш прості та зручні варіанти керування кольором.
У таблиці перераховані властивості елементів, які призначені для завдання кольору.
| Властивість | Значення | NC | IE | Op | Опис | Приклад |
| color |
Колір |
4+
|
3+
|
3+ | Встановлює колір тексту | P { color: #330000 } |
| background-color | Колір transparent |
4+
|
4+
|
3+ | Колір фону | BODY { background-color: #6699FF } |
| background-image |
URL none |
4+
|
4+
|
3+ | Фонове зображення | BODY { background-image: url (bg.gif) } |
| background-repeat | repeat repeat-x repeat-y no-repeat |
4+
|
4+
|
3+ | Повторюваність фонового малюнка | BODY { background-image: url (bg.gif) background-repeat: repeat-y} |
| background-attachment | scroll fixed |
6
|
4+
|
4+
|
Прокручиванність фону разом з документом | BODY { background-image: url (bg.gif) background-attachment: fixed } |
| background-position | Відсотки Пікселі top center bottom left right |
6
|
4+
|
3+
|
Початкове положення фонового малюнка | BODY { background-position: left top } |
NC – Netscape Communicator, IE – Microsoft Internet Explorer, Op – Opera; 4+ означає, що властивість підтримується в браузері 4 версії і вище.
Установка кольору
Колір, використовуючи CSS, можна задавати трьома способами.
- За його назвою
- За шістнадцятирічним значенням
Колір можна встановлювати за його шістнадцятирічним значенням, як і у звичайному HTML.P { color: #F9E71A; background-color: #98560F } - За допомогою RGB
Можна визначити колір використовуючи значення червоної, зеленої та синьої складової в десятковому численні. Значення кожного з трьох кольорів може набувати значення від 0 до 255. Також можна задавати колір у відсотковому відношенні.P { color: RGB(249, 231, 16); background-color: RGB(85%, 24%, 5%) }
Браузери підтримують деякі кольори за їх назвою. Повний список кольорів наведений у статті Назви кольорів.
P { color: navy; background-color: yellow }
Установка кольору фону та фонового малюнка
Колір фону визначається значенням параметра background-color, а зображення, яке використовується в якості фону, задається параметром background-image. Значенням за замовчуванням для кольору фону є transparent, який задає прозорий фон. Для вказівки фонового малюнка використовується абсолютна чи відносна адреси до файлу. Рекомендується задавати одночасно фоновий малюнок і колір фону, який буде використовуватися у разі недоступності файлу зображення.
BODY { background-color: #98560F; background-image: url(/images/bg.gif) }
Якщо задано фонове зображення, то властивість background-repeat визначає його повторюваність і спосіб, як це робити. Припустимими значеннями є repeat (повторюваність по вертикалі і горизонталі), repeat-x (по горизонталі), repeat-y (по вертикалі) і no-repeat (тільки один малюнок, без повторення).
BODY { background-image: url(/images/bg.gif); background-repeat: repeat-y }
У прикладі фоновий малюнок повторюється по вертикалі.
Положення фону визначається параметром background-position. У нього два значення, положення по горизонталі (може бути – right, left, center) і вертикалі (може бути – top, bottom, center). Положення можна, також, задавати у відсотках, в пікселах або інших абсолютних одиницях.
BODY { background-attachment: fixed; background-image: url(mybg.gif);
background-repeat: no-repeat;
background-position: right bottom }
У прикладі фон буде поміщений в правий нижній кут сторінки. Якщо потрібно визначити малюнок у лівому верхньому куті, то треба задати наступний вигляд: background-position: left top.
Параметр background-attachment: fixed фіксує фон, щоб він залишався нерухомим під час прокручування вмісту вікна браузера.
Примітка:
Позиціонування фону і його фіксація не працює в браузері Netscape 4.
***
Це переклад статті.
Рецепти HTML