Колір тла та тексту в CSS

Дуже важливим моментом у CSS є колір та тло.

Колір CSS вказується так само, як і в html, за допомогою значення (наприклад #f9f9f5) або назви кольору (yellow, grey, green).

Як використовувати кольори в CSS

Зміст Основними властивостями CSS, що визначають колір тексту, колір фону та розташування фонових малюнків, є:

Тепер про кожного з них докладніше:

color

Позначає основний колір певного елемента:

h1h2p

У результаті на сайті заголовки

сірого, а текст

background-color

Позначає колір фону певних елементів (заголовки, параграфи, посилання, осередок таблиць і т.д.) Приміром, якщо треба змінити колір фону всього документа, слід задати цю властивість елементу BODY.

Колір фону сторінки буде білим, а колір тексту в заголовку.

буде синім на жовтому фоні.

backgroud-image

Необхідно заливати фон за допомогою зображення. Для цього використовується шлях (URL) до зображення.

background-repeat

За допомогою властивостіbackground-repeat можна додати невеликий фрагмент зображення, який заповнити весь фон. Це відбувається за рахунок повторення фрагмента зображення, починаючи з верхнього лівого кута по вертикалі та горизонталі. У результаті виходить повноцінний фон. Існує всього чотири значення:background-repeat: repeat ;> повторення по горизонталіbackground-repeat: repeat-y ; повторення по вертикаліbackground-repeat: no-repeat ; не повторювати

Зображення буде повторюватися по горизонталі на всю висоту вікна.

background-attachment

За наявності фонового зображення визначає, чи воно прокручуватиметься разом із вмістом сторінки. Бувають два значення:scroll - фон прокручується разом із вмістом сторінки;fixed - фон нерухомий, прокручується вміст сторінки.

Приклад нерухомого фону:

Досить змінити значенняfixed наscroll, і тло стане рухомим. Взагалі, якщо зовсім не вказувати це значення, то фон прокручуватиметься разом із вмістом відповідно до scroll.

background-position

Необхідний визначення позицій фонового зображення. Значення можуть бути у відсотках, пікселях або за допомогою ключових слів. Відлік починається з верхнього лівого кута сторінки, де зображення розташоване за замовчуванням. Спочатку задається координата по осі Х, потім по осі Y. На малюнку наведено приклади позиціонування (точка замість зображення, а під нею - зразкові координати):

background-repeat

Також положення можна задати такими словами:left - ліво,right - право,center - центр,top - верх,bottom - низ

background-repeat

Приклад позицій за допомогою слів:

bodybackground-repeat: no-repeat;background-position : center left; >

Приклад у пікселях:

Приклад у відсотках:

bodybackground-repeat: no-repeat;background-position : 40% 20%; >

background

Можна використати для скорочення записів значень усіх перерахованих вище властивостей.Важливо дотримуватися такої послідовності:

1 -background-color 2 -background-image 3 -background-repeat 4 -background-attachment 5 -background-position

Наприклад, все це:

bodyF4F4F4 ;background-image :url('kartinka.jpg') ;background-repeat: no-repeat;background-attachment: scroll;background-position: top left; >

Можна скоротити таким чином:

Значення властивостей записуються через пропуск. Якщо якесь із значень пропустити, воно вважатиметься за умовчанням.