HTML и CSS за начинаещи (Част 31): Цветове и задни планове.

Чрез свойството color се определя цветът на форграунда (цвета на текста) на елементите. Определянето на цветовете е възможно по много различни начини. Класически се използват шестнадесетични стойности. Тези стойности винаги започват с кръгла диеза. Следва три двойки числа и/или букви обикновено. Те представляват червено, зелено и синьо. Цветовете се определят винаги по следния начин:

RRGGBB

Указването на #ffffff предизвиква появата на бял цвят. Ако се използва #000000, черният цвят се показва. В "разумните" HTML редактори има съответни селектори на цветове.

Цветовете могат да бъдат заредени чрез hex кодове. Освен това има множество уебсайтове (например http://www.farbtabelle.net/), които предлагат справки за цветовете.

В CSS има възможност за съкращаване на записа на шестнадесетични цветове. Това обаче не може да се приложи за всички цветови стойности. Принципът работи само, когато стойността се състои от три еднакви двойки. Типични примери са дефинициите на цветовете за черно и бяло. Обикновено те се записват по следния начин:

.schwarz {
   color: #000000;
}
.weiss {
   color: #ffffff;
}

Този синтаксис може също да се съкрати.

.schwarz {
   color: #000;
}
.weiss {
   color: #fff;
}

В CSS са разрешени също RGB стойности. Тук се посочват десетичните стойности от 0 до 255, които се разделят със запетаи. Подредбата на цветовете съответства на тази на шестнадесетичните цветове.

a { 
color: rgb(100%, 100%, 100%); 
background: rgb(0, 0, 0); 
}

Както показва примерът, са възможни процентни стойности, които обаче рядко се срещат в практиката.

Освен това има ключови дефиниции за цветове. Някои примери включват:

• black

• red

• blue

• yellow

• white

• green

Едно съответно дефиниране може да изглежда по следния начин:

p { 
 color: white; 
 background: black; 
}

Отбележете, че с CSS3 палитрата от налични цветови ключови думи е значително разширена. CSS3 е взел цветовите имена от спецификацията на SVG. Списък с наличните цветови имена може да бъде намерен на http://www.w3.org/TR/SVG/types.html#ColorKeywords.

Дефиниране на фон

При background става дума за съчетаване на следните възможни стойности, които ще бъдат подробно представени по-надолу в този урок:

• background-attachment

• background-color

• background-image

• background-position

• background-repeat

Отделните стойности се записват с интервали между тях. Редът, в който това се случва, е незначителен. Не е необходимо да се предоставят всички стойности.

Един пример:

p { 
    background: transparent
    url(logo.jpg)
    scroll repeat 0% 0%; 
 }

Фонови цветове

За задаване на фонов цвят на елемент се използва свойството background-color.

div { 
   background-color: #009999;
}

Като стойност се посочва желания цвят.

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

background-image определя графика като фон. Ако това свойство се записва във външен CSS файл, относителните пътеки се отнасят за директорията, в която се намира CSS файла.

• none – няма фонова графика

• URI – път към графиката

Един пример:

<div style="background-image:url(hinten.jpg); margin:20px; padding:20px">
    Добре дошли в PSD-Tutorials.de!
</div>

Но бъдете внимателни при използването на фонови изображения. Твърде забележимите фонови изображения наистина не улесняват четливостта на текстовете.





Разбира се, има уебсайтове, на които само визията е важна. Тук определено може да се работи с по-забележими фонове.

Подвижни фонове

При по-дълги елементи фоновото изображение се придвижва, докато се превърта страницата. С background-attachment това може да бъде предотвратено.

• fixed – придвижва се заедно

• scroll – фоновото изображение стои неподвижно и е насочено към прозореца на браузъра (вижпорт).

Свойството background-attachment обикновено се използва в комбинация с background-image.

Един пример:

div.fest {
    background-image: url(background.gif); 
    background-repeat: no-repeat;
 }

Позицията на фона

Чрез свойството background-repeat се определя къде трябва да започне фона. Относителна точка е елементът, за който е дефинирана графиката.

• Процентно изчисление – един или два стойности, които определят разстоянието на графиката от горния ляв ъгъл на елемента. При двойни стойности първата е хоризонталното разстояние, втората - вертикалното. Относителна точка не е горния ляв ъгъл на графиката, а точка вътре в нея, която също се указва чрез x / y-стойности.

• Дължина - определя разстоянието на графиката от нейния ляв горен ъгъл до лявия горен ъгъл на елемента. Позволени са една или две стойности. При двойни стойности първата определя хоризонталното разстояние, а втората - вертикалното отместване.

Възможни са също и следните ключови думи:

• left – хоризонтално ляво

• center – центрирано

• right – хоризонтално дясно

• top – вертикално горе

• bottom – вертикално долу

Тук е един пример как може да изглежда това:

p { 
   background-position: 8em top; 
}

Повтарящи се фонови изображения

Дали и как се повтаря фонов графичен обект, когато той е по-малък от показаната област, се определя с background-repeat.

• repeat – фоновата графика се повтаря хоризонтално и вертикално, за да запълни елемента.

• repeat-x – графиката се повтаря само хоризонтално.

• repeat-y – графиката се повтаря само вертикално.

• no-repeat – графиката не се повтаря.

Ето и един пример:

body { 
   background-repeat: repeat-y; 
}

В този случай графиката се повтаря само вертикално.

Ако ползвате repeat-y, повторението ще бъде само хоризонтално.





Този урок показа как CSS може да бъде мощен и в областта на цветовете и картините.