Цвят на фона и текста в CSS

Много важен момент в CSS са цветът и фонът.

Цветът в CSS се определя по същия начин както в html, като се използва стойност (например #f9f9f5) или име на цвят (жълто, сиво, зелено).

Как да използвате цветове в CSS

Съдържание Основните свойства на CSS, които определят цвета на текста, цвета на фона и разположението на фоновото изображение са:

Сега за всеки от тях по-подробно:

цвят

Показва основния цвят на определен елемент:

h1h2p

В резултат на това заглавията на сайта

сиво и текст

цвят на фона

Показва цвета на фона на определени елементи (заглавия, абзаци, връзки, клетки на таблица и др.) Например, ако искате да промените цвета на фона на целия документ, трябва да зададете това свойство на елемента BODY.

Цветът на фона на страницата ще бъде бял и цветът на текста в заглавката

ще бъде синьо на жълт фон.

фоново изображение

Необходим за запълване на фона с изображение. За целта се използва пътят (URL) към изображението.

фоново повторение

С помощта на свойствотоbackground-repeat можете да добавите малък фрагмент от изображението, който запълва целия фон. Това става чрез повтаряне на фрагмент от изображението, започвайки от горния ляв ъгъл вертикално и хоризонтално. Резултатът е пълен фон. Има само четири стойности:background-repeat: repeat ; repeat horizontally and verticalbackground-repeat: repeat-x ; repeat horizontallybackground-repeat: repeat-y ; repeat verticalbackground-repeat: no-repeat ; не повтаряйте бъде

Изображението ще се повтори хоризонтално до цялата височина на прозореца.

фонов файл

Ако има фоново изображение, определя дали то ще се превърта заедно със съдържанието на страницата. Има две стойности:scroll - фонът се превърта заедно със съдържанието на страницата;fixed - фонът е фиксиран, съдържанието на страницата се превърта.

Пример за неподвижен фон:

Достатъчно е да промените стойността наfixed наscroll и фонът ще стане подвижен. По принцип, ако изобщо не посочите тази стойност, тогава фонът ще се превърта заедно със съдържанието в съответствие с превъртането.

background-position

Изисква се за определяне на позициите на фоновото изображение. Стойностите могат да бъдат в проценти, пиксели или ключови думи. Обратното броене започва от горния ляв ъгъл на страницата, където се намира изображението по подразбиране. Първо се задава координатата по оста X, след това по оста Y. Фигурата показва примери за позициониране (точка вместо изображение и под нея - приблизителни координати):

background-repeat

Също така позицията може да бъде уточнена със следните думи:left - ляво,right - дясно,center - център,top - горе,bottom - долу

цвят

Пример за позиции, използващи думи:

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

Пример в пиксели:

Пример за процент:

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

фон

Може да се използва за съкращаване на записи на стойност на всички изброени преди това свойства.Важно е да следвате следната последователност:

1 -цвят-на-фона 2 -изображение-на-фон 3 -повтаряне на фона 4 -прикачен файл-на-фон 5 -background-position

Например всичко това:

bodyF4F4F4 ;background-image :url('kartinka.jpg') ;background-repeat: no-repeat;background-attachment: превъртане;background-position: горе вляво; >

Може да се съкрати така:

Стойностите на свойствата се изписват разделени с интервал. Ако някоя от стойностите е пропусната, тя ще се счита по подразбиране.