Кольори

Русский перевод: Цвета

CSS дає можливість використання 16777216 кольорів. Вони можуть бути представлені ім’ям, rgb-значенням (red/green/blue, тобто червоний/зелений /синій) або hex-кодом.

1. red
Теж саме, що і:

1
rgb(255,0,0)

Що аналогічно цьому:

1
rgb(100%,0%,0%)

Цьому:

1
#ff0000

І цьому:

1
#f00

У нашому розпорядженні 17 допустимих наперед визначених імен для кольорів. Цей список включає в себе: aqua (аква, колір морської хвилі), black (чорний), blue (синій), fuchsia (фуксія, тобто пурпурово-рожевий), gray (сірий), green (зелений), lime (лайм), maroon (коричнево-малиновий), navy (темно-синій), olive (оливковий), orange (помаранчевий), purple (фіолетовий), red (червоний), silver (срібний), teal (синьо-зелений), white (білий) і yellow (жовтий).

Допустимим кольором є transparent (прозорий).

Три значення rgb можуть приймати значення від 0 до 255, де 0 – це найнижчий рівень (наприклад, немає червоного), а 255 – найвищий рівень (наприклад, повністю червоний). Ці значення також можуть бути представлені у вигляді відсотків.

Hexadecimal (hex) – це шістнадцяткова система числення. Ми звичайно використовуємо десяткову систему числення (base-10, значення від 0 до 9). У шістнадцятковій же системі використовується 16 значень: від 0 до f.

Дизайнер, що використовує шістнадцяткову систему, позначає колір 3 або 6 знаками, перед якими ставиться символ решітки (#). У загальному вигляді, 3-х значна версія – це стисла версія 6-и значної (#f00 стає #ff0000, а #c96 перетворюється на #cc9966 і т.п.). Розшифровувати легше 3-х значну версію (перший символ означає червоний колір, другий – зелений, третій – синій, також як і в системі rgb), проте 6-и значна система дає більше можливості та контролю для вибору конкретного кольору.

‘color’ та ‘background-color’

Ви можете застосовувати кольори, використовуючи color і background-color (пам’ятайте, що треба використовувати американську англійську, а не британську, тобто не можна написати “colour”, тільки ” color”).

Синій фон і жовтий текст можна представити таким кодом:

h1 {
    color: yellow;
    background-color: blue;
}

Ці кольори можуть виглядати дещо грубо, тому, можливо, ви захочете відредагувати код в CSS-файлі, щоб трохи змінити відтінки:

body {
    font-size: 0.8em;
    color: navy;
}

h1 {
    color: #ffc;
    background-color: #009;
}

Після збереження файлу CSS, поновіть сторінку в браузері. Ви помітите, що перший заголовок (елемент h1) стане жовтого кольору на синьому фоні.

Властивості color і background-color можуть застосовуватися до більшості елементів HTML, включаючи body, що змінить кольори сторінки та її вмісту.

← Псевдокласи | Зовнішні таблиці стилів →