Підручник css для початківців 1
У цьому розділі ми поговоримо про те, як за допомогою CSS привласнити колір елементу і його фону, а так само про те, як використовувати малюнок як фон елемента і управляти його положенням.
Перед тим як перейти безпосередньо до навчання, проведу короткий екскурс на тему: "Кольори в Інтернеті"
Колір в CSS може бути заданий трьома методами:
- Іменним значенням, наприклад: red - червоний.
- Значенням кольору RGB. наприклад: RGB (255,0,0) - знову таки червоний.
- Шістнадцятковим значенням кольору RGB. наприклад: # ff0000 - все той же червоний.
З іменним значенням кольору все зрозуміло black - чорний, green - зелений, olive - оливковий і т.д. (Повну палітру базових фарб, тобто квітів для яких зарезервовані іменні значення, дивіться тут.)
Однак зі зрозумілих причин не для всіх відтінків кольорів зарезервовано індивідуальне ім'я. Коли виникає необхідність у використанні будь-якого "нестандартного" кольору необхідно визначити його значення RGB, (Red, Green. Blue) поєднання червоного, зеленого і синього кольору в числовому вираженні. Кожен відтінок з основних кольорів в системі RGB може виражатися в числі від 0 до 255.
Наприклад, чорний колір буде мати значення 0,0,0 тобто відсутність будь-якого кольору. білий - значення 255,255,255 теоретично якщо змішати основні кольори повинен вийде білий, а ось наприклад класичний синій колір має значення 0,0,255 тобто на "мольберті" присутній тільки синій. На малюнку наочно показано, що відбувається з фарбами якщо їх змішати, так змішуючи відтінки основних кольорів можна домогтися будь-якого кольору з видимого спектру.
Однак в більшості випадків "веб фарби" мають шестнадцатеричное вираз десяткового значення RGB.
У шістнадцятирічному обчисленні цифри від 10 до 15 замінені латинськими буквами і числовий ряд набуває такого вигляду:
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F.
Числа більше 15ти в шістнадцятковій системі утворюються шляхом об'єднання двох і більше чисел в одне. Так наприклад, числу 255 в десятковій системі відповідає число FF в шістнадцятковій системі.
Значить, для того щоб висловити потрібний відтінок в шістнадцятковому вигляді, нам знадобитися три пари чисел, де перша пара - значення червоного кольору, друга пара значення зеленого і третя пара синього кольору. Так, наприклад, той же класичний синій в шістнадцятковому вираженні буде виглядати так: # 0000FF. Октоторп перед числом ставиться для вказівки того що дане число є шістнадцятковим, наприклад в числі # 808000 немає латинських букв однак зі знаком решітки зрозуміло що воно шестнадцатеричное і висловлює собою оливковий колір.
І ще. висловлюючи колір в шістнадцятковому вигляді можна обійтися трьома числами, які потім будуть дублюватися, наприклад запис #DAF буде скороченою формою #DDAAFF.
Фух. затягнув я з водною частиною давайте ж нарешті вчити CSS ..
Для того, що б перефарбувати текст, будь-якого, елемента в потрібний нам колір необхідно скористатися властивістю color і присвоївши йому потрібне значення - власне колір.
Як уже сказано вище колір в CSS може бути заданий наступними методами:
- # Ff0000 - шістнадцяткове значення кольору RGB.
- red - іменне значення кольору.
- RGB (255,0,0) - значення кольору RGB.
А ось властивість background-color - визначає колір фону елемента.
Колір фону може мати наступні значення:
- # Ff0000 - шістнадцяткове значення кольору RGB.
- red - іменне значення кольору.
- RGB (255,0,0) - значення кольору RGB.
- transparent - прозорий фон. (за замовчуванням)
Для будь-якого елементу можна привласнити фонове зображення за допомогою CSS властивості: background-image.
Можливі значення background-image:
- url - шлях до файлу із зображенням.
- none - зображення відсутній. (за замовчуванням)
Для того щоб зробити якусь картинку фоном для елемента необхідно вказати до неї шлях згідно наступного синтаксису url (шлях до файлу / ім'я файлу). Шлях до файлу вказується в тому випадку, якщо малюнок знаходиться в іншій папці.
У прикладі нижче в якості основного фону (елемент body) використовується одне графічне зображення, а для блоку div інше, можливість використання різних фонових зображень для різних елементів сторінки дозволяє вирішувати практично будь-які дизайнерські задуми.
Якщо малюнок не заповнює собою весь фон елемента, то він викладається "плиткою".
Зафіксувати фонове зображення дозволяє властивість background-attachment. яке може приймати одне з двох значень:
- fixed - фіксований фон.
- scroll - рухливий фон (за замовчуванням).
Як вже говорилося вище, якщо малюнок не заповнює собою весь фон елемента, то він повторюється і викладається "плиткою". Властивість background-repeat - регулює повторення фонового зображення.
- no-repeat - заборонити повторення, показати тільки одне зображення.
- repeat - повторювати зображення (за замовчуванням).
- repeat-x - повторювати тільки по горизонталі.
- repeat-y - повторювати тільки по вертикалі.
За допомогою CSS властивості background-position - можна управляти позицією фонового зображення в елементах де воно задано за допомогою background-image.
Позицію фонового зображення, а точніше його верхнього лівого кута, можна задати у відсотках, пікселях, а також будь-яких інших одиницях виміру CSS, за допомогою двох значень, де перше значення буде відступом від лівого краю елемента, а друге значення відступом від верхньої межі елемента .
Наприклад, запис: background-position: 200px 100px; буде означати, що фонове зображення буде зміщено по горизонталі на 200 пікселів від лівої межі елемента і по вертикалі на 100 пікселів від верхньої межі елемента.
Так само можна використовувати наступні значення:
по горизонталі:- left - розташувати зліва.
- center - розташувати по центру.
- right - розташувати праворуч.
- top - розташувати зверху.
- center - розташувати по центру.
- bottom - розташувати знизу.
Ну і на довершення глави трохи про базову властивості background.
Будучи базовим властивістю, background може одночасно приймати ті чи інші значення від його дочірніх властивостей:
- background-attachment
- background-color
- background-image
- background-position
- background-repeat
Всі ці властивості ми розглянули вище, так що вдаватися в подробиці немає сенсу ..
Потрібні значення дочірніх властивостей вказуються через пробіл, в будь-якому порядку і в міру необхідності.
При використанні зображення в якості фону за допомогою властивості background-image заодно заливайте фон альтернативним кольором за допомогою background-color. Так якщо, з якихось причин, не завантажиться фонове зображення або ж користувач умисно відключить в настройках браузера завантаження малюнків, фон елемента не залишиться "голим".