16.4.Свойства на каскадните  стилови таблици (css)

В някои от разгледаните в този параграф свойства на css се използуват следните мерни единици:

- Дължина:- px - пиксели;
                   - ex - височина на буквата х;
                   - pt - пункт(типографска единица за размера на шрифта 1 pt = 1/72 инча);
                   - pc - пики(1 pc = 12 pt);
                   - in  - инч(1 инч  = 2,54 sm)
                   - sm - сантиметър;
                   - mm - милиметър.
- Проценти - знак за процент след числото.
- Цветове - име на цвят или шестнадесетични числа за RGB (Приложение 1);
- URL - абсолютен или относителен адрес.

Имената на свойствата на стиловете се състоят от една, а най-често от две или три думи, разделени с тире.

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

Групите или категорите от свойства в стиловите таблици са следните: backgrоund, font, list, border, margin и padding.

Има и такива свойства, които не се включват в нито една категория.

При задаването на стойности на такива свойства те не могат да се групират с други свойства в един селектор.

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

В таблица 16.1 са показани групата свойства  backgrоund (фон на HTML документа).

Със стилови таблици може да се задава фон или във вид на цвят, или с изображения.

Фонът може да се задава както за цялата страница, така и за отделни обекти на страницата.

Пример за задаване своиства от класа background

Разполагането на фоновото изображение може да се зададе с числа в % (вместо в абсолютни единици, например в рх). В този случай горният ляв ъгъл ще се зададе с двойката числа : 0%,0%, а долният десен ъгъл:-100%,100%.

В даден селектор за таг свойствата от групата background могат да се задават, като след името на свойството се записва неговата стойност

Например:

H1{background - color :red; background-image:emblema.gif; background-repeat:repeat-x; background-attachment:fixed; background-position:0%,0%}

Тъй като всички свойства принадлежат към групата background техните стойности могат да се задават без да се записват имената на свойствата.

Селекторът от предидущия пример, в този случай, ще изглежда по следния начин:

H1{background:red emblema.gif repead fixed 0%0%}

Следващите няколко групи свойства  са свързани с обкръжението на даден обект празни полета (margin), свободно пространство между рамката и съдържанието (padding).

От тез групи своиства ще разгледаме категорията рамка (border).

Свойствата на категория рамка (border)  и техните стойности са показани в табл.16.2

 За свойството border-width могат да се задават една, две, три или четири стойности.

При една стойност - всички части на рамката са с една и съща ширина.

При две стойности - първата се отнася за горната и долната, а втората за лявата и дясната части.

При три стойности - първата се отнася за горната част, втората за лявата и дясната част, а третата - за долната част и рамката.

При четири стойности - първата се отнася за горната част, втората - за лявата част, третата - за дясна част и четвъртата - за долната част.

Следния пример показва използването на някои от своиствата на клас border

Кода, с който са зададени своиствата на рамката е:

<TABLE WIDTH="60%" HEIGHT="80" ALIGN="CENTER" STYLE="border-color:#ff0000; border-style:double; border-width:4 8 15 20" >

Свойствата от категорията шрифта (font)  и текста (text) са приведени в таблица 16.3.

Свойствата на списъци (list) са посочени в таблица 16.4

Пример за използване на стилове в списък може да видите ТУК.

Със стилови таблици могат да се постигат най-различни ефекти. Като пример ще посочим използването на атрибут style= в тага <BODY...>

Атрибута има следия вид:

style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#FFbbbb', startColorstr='#aaaaff', gradientType='1');"

Натиснете ТУК за да видите резултата.

В заключение на тази глава ще отбележим, че съчетавнето на стилови таблици с други технологии, например със скриптове (глава 17) заначително разширява възможностите за оформяне на Web страници с динамично именящи се и интерактивни елементи.