Властивості кольору

Влад Мержевич

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-repeatrepeat
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. Встановлення кольору елемента за його назвою

<!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=utf-8">
  <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. Встановлення кольору елемента за шістнадцятковим значенням 

<!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=utf-8">
  <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. Встановлення кольору елемента за шістнадцятковим значенням 

<!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=utf-8">
  <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. Колір фону та фонове зображення

<!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=utf-8">
  <title>Колір фону</title>
  <style type="text/css">
   BODY { 
    background-color: #98560F; /* Колір фону */
    background-image: url(images/bg.jpg); /* Шлях до фонового зображення */
   }
  </style>
 </head>
 <body>
  <p>Lorem ipsum dolor sit amet...</p>
 </body>
</html>

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

Приклад 5. Повторюваність фонового зображення

<!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=utf-8">
  <title>Фон</title>
  <style type="text/css">
   BODY { 
    background-image: url(images/gradient.png); /* Шлях до фонового зображення */
    background-color: #b9c79a; /* Колір фону */
    background-repeat: repeat-x; /* Повторення фону по горизонталі */
   }
  </style>
 </head>
 <body>
  <p>Lorem ipsum dolor sit amet...</p>
 </body>
</html>

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

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

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

<!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=utf-8">
 <title>Фон</title>
  <style type="text/css">
   BODY { 
    background-attachment: fixed; /* Фіксуємо фон */
    background-image: url(images/home.png); /* Шлях до фонового зображення */
    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 фіксує фон, щоб він залишався нерухомим під час прокрутки вмісту вікна браузера.

колірфон
SEO текст: Навчальний матеріал про використання CSS для кольорів тексту та фону на веб-сторінках. Дізнайтеся, як встановити кольори за назвою, шістнадцятковим значенням та за допомогою RGB. Оптимізуйте вигляд вашого веб-сайту з використанням кольорів та фонових зображень з CSS.

Часті запитання