При створенні веб-сторінок колірне рішення є, мабуть, одним з найбільш важливих параметрів, які впливають на їх (сторінок) сприйняття і легкість для читання. І в сьогоднішній замітці ми розповімо, як задавати кольори різних елементів за допомогою каскадних таблиць стилів - CSS.

Для початку треба поговорити про те, які одиниці вимірювання використовуються при завданні кольору. Стандартним методом визначення кольорів на сайтах є RGB, де три числа визначають "кількість" червоного, зеленого і синього в остаточному кольорі - дуже схоже на те, як це робиться в телевізорі. Існують чотири способи вказати потрібний колір за допомогою цифр:

RGB означає Red, Green, Blue P {color: # 0F0}
P {color: # 00FF00}
P {color: rgb (0,255,0)
P {color: rgb (0%, 100%, 0%)

Всі ці приклади ставлять одне і те ж зелений колір. У першому випадку використовуються три шістнадцятиричних числа. Кожне з цих чисел вказує інтенсивність відповідного складового кольору, причому "розширення" цього числа до стандартної форми RRGGBB відбувається за допомогою дописування цього ж числа (а не нуля!). Тобто колір # ABC перетворюється не в # A0B0C0, а в # AABBCC. Другий рядок показує "стандартний" спосіб вказівки кольору, де інтенсивність кожного з складових квітів кодується за допомогою двох шістнадцятирічних цифр.

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

По можливості варто і зараз використовувати безпечну палітру - ще залишилися старі ноутбуки та кишенькові комп'ютери У недавні часи, коли комп'ютери (а точніше, відеокартки) були не дуже потужними, досить актуальною була "палітра безпечних кольорів". Справа в тому, що якщо ви створили якийсь колір на своєму комп'ютері, то він може виглядати зовсім не так на іншому - якщо у цього "іншого" комп'ютера менша глибина кольору. Це абсолютно зрозуміло - якщо у вашого комп'ютера картка підтримує 24-бітний колір (понад 16 мільйонів кольорів), а у відвідувача вашого сайту, скажімо, ноутбук з 8-бітної карткою (256 кольорів), то багато кольору просто фізично не зможуть бути точно передані. Такі кольори будуть за спеціальними алгоритмами перераховані в найбільш близькі до них, але те, що є "найбільш близьким" з точки зору комп'ютера, може виявитися дуже далеким для людини.

Для того щоб не відбувалося цього неприємного перетворення кольорів, на сайтах можна використовувати "безпечну палітру", що складається з 216 кольорів (256 кольорів 8-бітного кольору мінус кольору, зарезервовані системою і розрізняються в різних ОС). У такій палітрі кожен складовий колір кратний 33, тобто може дорівнювати 00, 33, 66, 99, CC або FF. А сама палітра виглядає так:

Підведіть курсор до потрібного кольору, щоб побачити значення

..

..

..

..

..

..

. .

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

. .

..

..

..

..

. .

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

. .

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

. .

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

. .

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

.

.

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

. .

..

..

..

..

. .

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

. .

..

..

..

..

..

..

..

..

..

Крім зазначення кольору за допомогою цифр, є ще 16 стандартних назв квітів, які теж можна використовувати:

black

silver

gray

white

maroon

red

purple

fuchsia

green

lime

olive

yellow

navy

blue

teal

aqua

Насправді, деякі браузери розуміють набагато більше назв (наприклад, Netscape" знає "близько 140 кольорів), але ці 16 кольорів стали стандартом.

CSS дає більше можливостей по налаштуванню кольору і фону, ніж HTML Тепер, коли з визначенням квітів ми розібралися, пора переходити, власне, до CSS. Два найголовніших атрибуту, які можуть використовуватися з будь-якими елементами, називаються color і background-color - вони визначають колір елемента і колір його фону відповідно. При визначенні фону можна, крім кольору, використовувати ключове слово transparent, яке позначає прозорий фон (саме прозорий є фоном за замовчуванням). Вказівка ??фонового кольору за допомогою CSS дає набагато більше можливостей, ніж використання "чистого" HTML - ви можете вказати фоновий колір для окремого абзацу або дажеслова!

Крім кольору, в якості фону можна вказати і якусь картинку. Робиться це за допомогою атрибуту background-image. При вказівці картинки слід враховувати, що часткову адресу файлу буде вважатися щодо розташування CSS-файлу, а не щодо документа! Наприклад, якщо документи у вас на сервері лежать в директорії/www, а CSS-файли - в/www/css, то вказівка:

background-image: url (img/fon.gif");

буде шукати картинку/www/css/img/fon.gif". Можна в якості адреси картинки вказувати і її URL:

background-image: url (http://www.mysite.ru/img/fon.gif");

кешувати, кешувати і ще раз кешувати! Таке написання може виявитися дуже корисним - якщо до вашого сайту можна отримати доступ за різними адресами (наприклад, http://mysite.ru і http://www.mysite.ru), то явна вказівка ??адреси картинки прискорить завантаження документів і знизить навантаження на сервер за рахунок кешування цієї картинки (зрозуміло, ефект буде тим помітніше, чим більше відвідувачів обслуговує сервер, і чим більше картинок використовується).

Вказуючи картинку в якості фону якогось елементу, тобто змив заодно вказати і колір фону & mdash ; це допоможе зберегти стиль сторінки, якщо у відвідувача, наприклад, відключено завантаження картинок, або з якихось причин картинка не зможе докачати. ??

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

Також можуть пригодитися атрибути background-attachment та background-position. Перший атрибут визначає, чи буде фонова картинка рухатися при прокручуванні документа (значення scroll - використовується за замовчуванням) або буде залишатися нерухомою (значення fixed). Другий - дозволяє задати зсув картинки щодо лівого і верхнього країв елемента-батька. Наприклад,

background-position: 10px 20px;

змістить картинку на 10 пікселів вправо і 20 вниз. Крім того, можна використовувати ключові слова для вирівнювання картинки - top, center і bottom для вирівнювання по вертикалі, і left, center і right для вирівнювання по горизонталі.

Скорочена запис зручніше ... Існує і скорочений запис для визначення фону елемента, що задається за допомогою атрибуту background. Порядок перерахування властивостей в цьому записі не важливий; крім того, ви можете без побоювання пропускати властивості, для яких хочете залишити значення за умовчанням. Наприклад:

background: no-repeat url (img/fon.gif") # 0F0 fixed;

Ось, здається, і все. Сподіваюся, що ця стаття зробить вас ще більш "просунутим" користувачем, здатним розібратися з CSS "на вищому рівні".

Посилання по темі

  • Що таке каскадні таблиці стилів (CSS )
  • CSS: одиниці виміру
  • CSS: визначаємо елементи
  • CSS: визначаємо блоки

Статьяполучена: hostinfo.ru

Детальніше »