колір

CSS має кілька опцій для визначення кольору тексту і фонових областей на веб-сторінці. Ці опції по роботі з кольором не тільки замінюють аналогічні в простому HTML, але і дають масу нових можливостей. Наприклад, традиційний шлях для створення кольорової області, полягає в застосуванні таблиці. Стилі дозволяють відмовитися від подібного використання таблиць пропонуючи більш прості і зручні варіанти управління кольором.

У табл. 1 перераховані властивості елементів, призначених для завдання кольору.

Табл. 1. Управління кольором фону і тексту
властивість значення опис приклад
color

колір

Встановлює колір тексту P {color: # 330000}
background-color колір
transparent 		Колір фону BODY {background-color: # 6699FF}
background-image
URL
none 		фоновий малюнок BODY {background-image: url (bg.gif)}
background-repeat repeat
repeat-x
repeat-y
no-repeat 		Повторюваність фонового малюнка BODY {background-image: url (bg.gif) background-repeat: repeat-y}
background-attachment scroll
fixed 		Прокручіваемость фону разом з документом BODY {background-image: url (bg.gif) background-attachment: fixed}
background-position відсотки
пікселі
top
center
bottom
left
right 		Початкове положення фонового малюнка BODY {background-position: left top}

установка кольору

Колір, використовуючи CSS, можна задавати трьома способами.

1. За його назвою

Браузери підтримують деякі кольори по їх назві (приклад 1).

Приклад 1. Встановлення кольору елемента по його назві

Дійсний HTML
Дійсний CSS
<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd">
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text / html; charset = windows-1251">
<Title> Колір </ title>
<Style type = "text / css">
P {
color: navy; / * Колір тексту * /
background-color: yellow; /* Колір фону */
}
</ Style>
</ Head>
<Body>
<P> Lorem ipsum dolor sit amet ... </ p>
</ Body>
</ Html>

2. За шістнадцятиричним значенням

Колір можна встановлювати по його шістнадцятиричним значенням, як і в звичайному HTML (приклад 2).

Приклад 2. Встановлення кольору елемента по шістнадцятиричним значенням

Дійсний HTML
Дійсний CSS
<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd">
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text / html; charset = windows-1251">
<Title> Колір </ title>
<Style type = "text / css">
H1 {color: # fc0; }
P {
color: # F9E71A;
background-color: # 98560F;
}
</ Style>
</ Head>
<Body>
<H1> Lorem ipsum </ h1>
<P> Lorem ipsum dolor sit amet ... </ p>
</ Body>
</ Html>

Також допустимо використовувати скорочений запис, на кшталт # fc0. Вона означає, що кожен символ дублюється, в результаті отримаємо # ffcc00.

3. За допомогою RGB

Можна визначити колір використовуючи значення червоної, зеленої та синьої компоненти в десятковому численні. Значення кожного з трьох кольорів може набувати значень від 0 до 255. Також можна задавати колір у відсотковому відношенні (приклад 3).

Приклад 3. Установка кольору елемента по шістнадцятиричним значенням

Дійсний HTML
Дійсний CSS
<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd">
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text / html; charset = windows-1251">
<Title> Колір </ title>
<Style type = "text / css">
P {
color: RGB (249, 231, 16);
background-color: RGB (85%, 24%, 5%);
}
</ Style>
</ Head>
<Body>
<P> Lorem ipsum dolor sit amet ... </ p>
</ Body>
</ Html>

Установка кольору фону і фонового малюнка

Колір фону визначається значенням параметра background-color, а зображення, яке використовується в якості фону, задається параметром background-image. За замовчуванням кольору фону є transparent, який встановлює прозорий фон. Щоб установити зображення використовується абсолютний або відносний адресу до файлу. Рекомендується задавати одночасно фоновий малюнок і колір фону, який буде використовуватися в разі недоступності файлу зображення.

Приклад 4. Колір фону і фонове зображення

Дійсний HTML
Дійсний CSS
<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd">
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text / html; charset = windows-1251">
<Title> Колір фону </ title>
<Style type = "text / css">
BODY {
background-color: # 98560F; /* Колір фону */
background-image: url ( '/ images / bg.gif'); / * Шлях до фонового малюнку * /
}
</ Style>
</ Head>
<Body>
<P> Lorem ipsum dolor sit amet ... </ p>
</ Body>
</ Html>

Якщо задано фонове зображення, то властивість background-repeat визначає його повторюваність і спосіб, як це робити. Допустимими значеннями є repeat (повторюваність по вертикалі і горизонталі), repeat-x (по горизонталі), repeat-y (по вертикалі) і no-repeat (тільки один малюнок, без повторення), як показано в прикладі 5.

Приклад 5. Повторюваність фонового малюнка

Дійсний HTML
Дійсний CSS
<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd">
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text / html; charset = windows-1251">
<Title> Фон </ title>
<Style type = "text / css">
BODY {
background-image: url ( '/ images / bg.gif'); / * Шлях до фонового малюнку * /
background-repeat: repeat-y; / * Повторення фону по вертикалі * /
}
</ Style>
</ Head>
<Body>
<P> Lorem ipsum dolor sit amet ... </ p>
</ Body>
</ Html>

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

Положення фону визначається параметром background-position. У нього два значення, положення по горизонталі (може бути - right, left, center) і вертикалі (може бути - top, bottom, center). Положення можна, також, задавати у відсотках, пікселах або інших абсолютних одиницях (приклад 6).

Приклад 6. Положення фону

Дійсний HTML
Дійсний CSS
<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd">
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text / html; charset = windows-1251">
<Title> Фон </ title>
<Style type = "text / css">
BODY {
background-attachment: fixed; / * Фіксуємо фон * /
background-image: url ( 'mybg.gif'); / * Шлях до фонового малюнку * /
background-repeat: no-repeat; / * Скасовуємо повторення фону * /
background-position: right bottom; / * Положення фону * /
}
</ Style>
</ Head>
<Body>
<P> Lorem ipsum dolor sit amet ... </ p>
</ Body>
</ Html>

В даному прикладі фон буде поміщений у правий нижній кут сторінки. Якщо потрібно визначити малюнок у лівому верхньому кутку, то треба задати такий вигляд: background-position: left top.

Параметр background-attachment: fixed фіксує фон, щоб він залишався нерухомим при прокручуванні вмісту вікна браузера.

Copyright що кредитують © www.htmlbook.ru