Стильові властивості кольору і фону

Категорії статей: CSS ; 16.04.2010

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

Колір тексту

Колір тексту можна задати властивістю color, значення можна вказувати різними способами. Колір можна задати або назвою - red, white, black, або можна вказувати в числовому вигляді значення RGB. Значення RGB кольору можна вказувати в шістнадцятковій системі числення або в десятковій системі числення. В будь-якому разі вказується інтенсивність складових кольору - червоного, зеленого і синього. У шістнадцятковій системі числення значення RGB записується у вигляді символу "#", і слідуючих за ним три або 6 символів шістнадцяткової системи. Причому запис з трьох символів при обробці браузером перетвориться в послідовність з шести, дублюванням символів кожної складової, наприклад, значення #8DA відповідатиме значенню #88DDAA. Значення кожної складової при записі з шести символів може набувати значень від 00 (складова відсутня) до FF (максимальне інтенсивність). Значення кожної складової при записі з трьох символів може набувати значень від 0 до F. Наведу приклади

Код
div{ color: #FFFFFF; }
div{ color: #FFF; /* відповідає значенню #FFFFFF */ }
p { color:#44AAFF; }
p { color:#A0F; /* відповідає значенню #AA00FF */ }

В десятковій системі числення запис складається з рядка "rgb", за яким в скобочках через кому записуються значення інтенсивностей складових кольору. Значення кожної складової може набувати значень від 0 до 255. Наприклад

Код
div{ color: rgb(0,100,255); }
p { color: rgb(55,200,0); }

Наведу ще один приклад

Код
...
p { color:red; }
...
<p>
текст буде червоного кольору
</p>
<div style="color:#0000FF ;">
текст буде синього кольору
</div>

Управління фоном

Як фон елементу HTML-документа можна задати колір або яке-небудь зображення. По замовчуванню у всіх блоків встановлений прозорий фон, тобто буде видний фон блоку що знаходиться під поточним блоком (за великим рахунком не лише фон але і весь вміст блоку що знаходиться під ним).

Колір фону

Задати колір фону можна властивістю background-color, як значення повинні виступати або колір, або ключове слово "transparent", яке робить фон прозорим. Наприклад

Код
body { background-color: green; }
div{ background-color: #22AACC; }

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

Як фон можна встановити зображення властивістю background-image. Властивість background-image повинна приймати або url-адрес зображення, або значення "none", яке вказує, що зображення не використовується як фон. Наприклад

Код
body { background-image: url("fon.gif"); }
div{ background-image: none; }


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

Властивість background-repeat може приймати наступні значения

  • repeat - фонове зображення повторюється по горизонталі і по вертикалі;
  • no-repeat - фонове зображення не повторюється, показується зображення лише один раз;
  • repeat-x - фонове зображення повторюється по горизонталі;
  • repeat-y - фонове зображення повторюється по вертикалі.
Приведу приклади

Код
body { background-image: url("fon.gif"); background-repeat: repeat; }
div{ background-image: url("images/fon_div.jpg"); background-repeat: no-repeat; }

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

  • fixed - фонове зображення фіксується, і не переміщатиметься при прокрутці вмісту елементу;
  • scroll - фонове зображення прокручуватиметься разом з вмістом елементу (значення по замовчуванню).
Наприклад

Код
body { background-image: url("fon.gif"); background-repeat: repeat; background-attachment: fixed; }
div{ background-image: url("images/fon_div.jpg"); background-repeat: repeat-x;
background-attachment :scroll; }


Также є цікава властивість background-position, яке задає початкове положення фонового зображення. Дана властивість визначає первинне положення фонового зображення, незалежно від того чи буде воно повторюватися чи ні. Припустимо, якщо властивістю background-repeat заборонено повторення фонового зображення (no-repeat), то властивістю background-position можна задати положення зображення в елементі, в якому він відображуватиметься без повторення. Якщо ж встановлено повторення зображення у всіх або в якомусь одному напрямі (наприклад, горизонтальному), то властивістю background-position можна встановити положення зображення відносно якого йтиме повторення зображення.
У властивості background-position потрібно вказати позицію фонового зображення по горизонталі і вертикалі. Це можна зробити ключовими словами, абсолютними координатами або відсотками від розмірів елементу. Для визначення позиції по горизонталі в якості ключових слів можна використовувати наступні: left, center, right, які відповідно вирівнюють фонове зображення по лівому краю , середині і правому краю елемента. Для визначення положення по вертикалі, в якості ключових слів потрібно використовувати наступні: top, center і bottom, які відповідно вирівнюють фонове зображення по верху елемента, по центру і по низу. При встановлені положення фонового зображення у відсотках або в абсолютних одиницях, відлік ведеться від лівого верхнього кута елементу.
По замовчуванню background-position приймає значення відповідне позиції left top.
Наведу приклади

Код
body { background-image: url("fon.gif"); background-repeat: repeat;
background-position: center bottom; }
div{ background-image: url("images/fon_div.jpg"); background-repeat: no-repeat;
background-position: 50px 150px; }

Як ми можемо бачити, параметрів управління фоном досить багато, і щоб не вказувати кожну властивість окремо, можна використовувати можливість скороченого запису у вигляді однієї властивості background.
У властивості background можна вказувати значення: background-color, background-image, background-repeat, background-attachment, background-position. Наприклад, замість перерахування всіх властивостей

Код
body {background-color:#a93; background-image: url("fon_body.gif"); background-repeat: repeat-у;
background- attachment: scroll, background-position: right center; }

Можно записати таким чином

Код
body {background: #a93 url("fon_body.gif") repeat-у scroll right center; }

Відповідно значення по замовчуванню можна не вказувати.

По зовнішнім джерелам

Залишити коментар

Перепечатка любых материалов © 2013 без разрешения автора запрещена. | 3.75MB | 0.19Sec ad Google