5    CSS1 СВОЙСТВА

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

5.1    Система за означаване на стойностите на свойства

В текста по-долу допустимите стойности на всяко свойство са изброени със синтаксис, подобен на следния:

Стойност: N | NW | NE
Стойност: [ <дължина> | дебел | тънък ]{1,4}
Стойност: [<име на семейството> , ]* <име на семейството>
Стойност: <url>? <цвят> [ / <цвят> ]?
Стойност: <url> || <цвят>

Думите, намиращи се между символите "<" и ">" определят типа на стойността. Най-често срещаните типове са <дължина>, <процент>, <url>, <число> и <цвят>; те са описани в глава 6. По-специализираните типове(например <име на семейството> and <стил на рамката>) са описани под съответното свойство.

Другите думи са ключови и трябва да се използват буквално, без кавички. Наклонената черта или слаш(/) и запетаята(,) трябва също да се изобразяват буквално.

Това, че няколко неща са поставени едно до друго, означава че те трябва да се използват в дадения ред. Вертикалната черта(|) разделя алтернативите: трябва да се използва една от тях. Двойна вертикална черта(A || B) означава, че или A, или B, или и двете трябва да се зададат, в какъвто и да е, ред. Квадратните скоби([]) се използват за групиране. Поставянето на думи една до друга е с по-силен приоритет от този на двойната вертикална черта, а двойната вертикална черта е с по-силен приоритет от вертикалната черта. Така "a b | c || d e" е равносилно на "[a b ] | [c || [ d e ]]".

Всеки тип, ключова дума или група, заградена в скоби трябва да бъдат последвани от един от следните модификатори:

• звездичката(*) означава, че предшестващия я тип, дума или група се повтаря нула или повече пъти.
• плюс(+) означава, че предшестващия тип, дума или група се повтарят един или повече пъти.
• въпросителен(?) означава, че предшестващия тип, дума или група не са задължителни.
• двойка числа в кръгови скоби({A,B}) означава, че предшестващия тип, дума или група се повтаря най-малко A и най-много B на брой пъти.

5.2    Шрифтови свойства

Задаването на шрифтови свойства би трябвало да бъде сред най-често срещания начин за употреба на стиловите листа. За съжаление, не съществува добре дефинирана, приемлива навсякъде система за класифициране на шрифтове и термини, които важат за едно семейство от шрифтове, може да не са подходящи за друго. Например 'italic' е всеобщо използван термин, значещ наклонен текст, но наклонения текст може да бъде наречен и Oblique, Slanted, Incline, Cursive или Kursiv. Следователно, това да бъдат разпределени типичните свойства на шрифтовата селекция на определен шрифт, не е прост проблем.

CSS1 дефинира свойствата 'font-family', 'font-style', 'font-variant' и също така 'font-weight', 'font-size', 'font'.

5.2.1    Уеднаквяване на шрифтове

Поради това, че няма общоприета, универсална система за класификация на шрифтовите свойства, подбора на свойства за шрифтовете трябва да се прави внимателно. Свойствата се подбират по точно-определен ред, за да се гарантира, че резултатите от този подборен процес ще са, колкото се може по-еднакви сред различните браузъри(ако се предполага, че на всеки от тях се презентира същата библиотека от шрифтове).

1. Браузърът прави(или установява достъп) до база данни със свързани помежду си CSS свойства за всички шрифтове, за които е наясно. Браузърът може да е наясно за присъствието на шрифт, ако той е бил инсталиран локално или е бил изтеглен от Интернет преди това. Ако съществуват два шрифта с абсолютно еднакви свойства, единия от тях ще бъде игнориран.
2. В даден елемент и за всеки символ от този елемент, браузъра сглобява шрифтовите свойства, които са приложими за този елемент. Използвайки пълния списък със свойства, браузъра използва свойството 'font-family', за да избере тестово шрифтово семейство. Останалите свойства се тестват с това семейство, в зависимост от подборния критерий, описан във всяко свойство. Ако съществуват съвпадения с всички останали свойства, тогава това ще бъде шрифта, който пасва за дадения елемент.
3. Ако след изпълнението на стъпка 2 няма шрифт, зададен чрез 'font-family' свойството, който да пасва и, ако съществуват алтернативни стойности 'font-family' в шрифтовите настройки, се изпълнява стъпка 2 с тези алтернативни стойности на свойството 'font-family'.
4. Ако съществува пасващ шрифт, но той не съдържа графичната визуализация на текущия символ, и ако има следваща, алтернативна настройка 'font-family' в шрифтовите настройки, се повтаря стъпка 2 със следващата алтернативна настройка 'font-family'. Вижте приложение C, където има описание на шифроването на шрифтовете и символите.
5. Ако не съществува шрифт във фамилията, която е избрана в стъпка 2, се използва браузърно-зависимо шрифтово семейство(това, по подразбиране или по default) и се повтаря стъпка 2, използвайки се най-пасващия случай, който може да бъде получен от шрифта по подразбиране.

(Горния алгоритъм може да бъде оптимизиран, за да се избегне повторната проверка на CSS1 свойствата за всеки символ.)

Ето и подборните правила за свойствата от стъпка 2 по-горе:

1. Първо се опитва 'font-style'. 'italic' ще бъде задоволен, ако съществува шрифт в шрифтовата база данни на браузъра, който е обозначен с CSS ключовата дума 'italic'(по-предпочитания вариант) или 'oblique'. Иначе стойностите трябва да бъдат подбрани точно или настройките на шрифтовия стил ще бъдат неуспешни.
2. След това се опитва 'font-variant'.'normal' пасва на шрифт, който не е обозначен като 'small-caps'(малки букви); 'small-caps' пасва(1) на шрифт, обозначен като 'small-caps', (2) шрифт, в който малките букви са синтезирани, или(3) шрифт, в който всички малки букви са заместени от големи букви. Шрифт с малки букви може да бъде синтезиран чрез електронно мащабиране на големите букви от нормален шрифт.
3. Следващото нещо, което се подбира е 'font-weight'. Подборът винаги е успешен.(вижте 'font-weight' по-долу).
4. 'font-size' или настройката за размера на шрифта трябва да бъде подбрана в зависими от браузъра граници на толеранс.(Обикновено, размерите на векторните шрифтове се закръгляват до най-близкия цял пиксел, докато толеранса при растерните шрифтове може да е около 20%.) По-нататъшни изчисления, например чрез 'em' стойностите в другите свойства се базират на стойността, която се използва за 'font-size' свойството, а не тази, която просто е зададена.

5.2.2    'font-family'(шрифтово семейство)

Стойност: [[<име на семейството> | <шрифтов род>],]* [<име на семейството> | <родово семейство>]
Първоначална стойност: Зависи от браузъра
Важи за: всички елементи
Наследимост: Да
Процентни стойности: N/A

Стойността представлява приоритетен списък от имена на шрифтови семейства и/или имена на шрифтови родове. За разлика от повечето от останалите CSS1 свойства, стойностите се разделят със запетая, за да се покаже, че те са алтернативи една на друга:

BODY { font-family: gill, helvetica, sans-serif }

Съществуват два типа стойности в списъка:

<име на семейството>

Името на шрифтовото семейство, което е избрано. В последния пример шрифтовите семейства са "gill" и "Helvetica".

<шрифтов род>

Последната стойност в примера горе е такава на шрифтов род. Дефинирани са следните шрифтови родове(типове):

• 'serif'(серифни шрифтове)(например Times)
• 'sans-serif'(несерифни шрифтове)(например Helvetica)
• 'cursive'(курсивни шрифтове)(например Zapf-Chancery)
• 'fantasy'(например Western)
• 'monospace'(печатни шрифтове)(например Courier)

Дизайнерите на стилови листа се насърчени да прилагат шрифтов род, като последната алтернатива в списъка.

Имената на шрифтовете, които съдържат символи за интервал(празни места) трябва да бъдат поставени в кавички:

BODY { font-family: "new century schoolbook", serif }
  
<BODY STYLE="font-family: 'My own font', fantasy">

Ако кавичките бъдат пропуснати, символите за интервал преди и след името на шрифта ще бъдат игнорирани и каквато и да е последователност от тях, вътре в името на шрифта ще бъде превърната в единичен интервал.

5.2.3    'font-style'

Стойност: normal(нормален) | italic(наклонен) | oblique(полегат)
Начална стойност: normal
Важи за: всички елементи
Наследимост: Да
Процентни стойности: N/A

Свойството 'font-style' може да избира измежду три стойности: нормален(normal)(понякога наричан и "roman или "upright"), наклонен(italic) и полегат(oblique) шрифт от дадено шрифтово семейство.

Стойност 'normal' избира шрифт, който е класифициран като 'normal' в шрифтовата база данни на браузъра, докато 'oblique' избира шрифт, който е обозначен като 'oblique' там. Стойност 'italic' избира шрифт, който е обозначен 'italic' или, ако такъв няма на разположение, такъв със стойност 'oblique'.

Шрифт в шрифтовата база данни на браузъра, който е обозначен с 'oblique' може всъщност да е бил генериран по електронен път чрез наклоняване на нормален шрифт.

Шрифтове, съдържащи в своите имена думите 'oblique', 'slanted' или 'incline' обикновено се обозначават с 'oblique' в шрифтовата база данни на браузъра. Шрифтове, съдържащи Italic, Cursive или Kursiv в своите имена обикновено се обозначават с 'italic'.

H1, H2, H3 { font-style: italic }
H1 EM { font-style: normal }

В горния пример, текста, в 'h1' на който е приложен атрибута 'em' ще се визуализира с нормален шрифт.

5.2.4    'font-variant'

Стойност: normal(нормален) | small-caps(малки букви)
Първоначална стойност: normal
Важи за: всички елементи
Наследимост: Да
Процентни стойности: N/A

Друг тип различие в шрифтовото семейство е т.н. small-caps(малки букви). При small-caps шрифта, малките букви изглеждат по начин, подобен на този на големите, но са с по-малък размер и имат малко по-различни пропорции. Свойството 'font-variant' избира този шрифт.

Ако стойността, която е зададена на свойството е 'normal', бива избран шрифт, който не е small-caps такъв. Ако стойността е 'small-caps', бива избран small-caps шрифт. В CSS1 е допустимо(но не се изисква), small-caps шрифта да бъде създаден чрез заместване на малките букви в нормален шрифт с мащабирани големи букви. В краен случай горните букви ще заместят small-caps шрифта.

Следващия пример води до визуализиране на 'h3' елемент с small-caps шрифт, като на думите също така е приложен атрибутита 'em', чието свойство 'font-style' е установено на 'oblique'.

H3 { font-variant: small-caps }
EM { font-style: oblique }

Може да съществуват също така и други варианти в шрифтовото семейство, като например шрифтове с числа със старовремски стил, small-caps числа, сбити или уголемени букви и т.н. CSS1 не притежава свойства, с чиято помощ те да могат да бъдат избирани.

CSS1 същина: до толкова, доколкото това свойство води до трансформиране на текста в такъв с главни букви, тук важат същите съображения като при свойството 'text-transform'.

5.2.5    'font-weight'(Тежест на шрифтове)

Стойност: normal(нормален) | bold(удебелен) | bolder(много удебелен) | lighter(по-тънък) | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Първоначална стойност: normal
Важи за: всички елементи
Наследимост: Да
Процентни стойности: N/A

Свойството 'font-weight' избира тежестта на шрифта. Стойностите от '100' до '900' образуват подредена последователност, в която всяко число определя тежест, която е поне толкова тъмна, колкото предшестващата я. Ключовата дума 'normal' е синоним на стойност '400', а 'bold' е синоним на '700'. Ключовите думи, различни от 'normal' и 'bold' често биват бъркани с имената на шрифтовете и затова е избран числов вид на списъка от 9 стойности.

P { font-weight: normal }   /* 400 */
H1 { font-weight: 700 }     /* bold */

Свойството 'font-weight' избира тежестта на шрифта. Стойностите от '100' до '900' образуват подредена последователност, в която всяко число определя тежест, която е поне толкова тъмна, колкото предшестващата я. Ключовата дума 'normal' е синоним на стойност '400', а 'bold' е синоним на '700'. Ключовите думи, различни от 'normal' и 'bold' често биват бъркани с имената на шрифтовете и затова е избран числов вид на списъка от 9 стойности.

STRONG { font-weight: bolder }

Дъщерните елементи наследяват съответната изчислена тежест, а не стойността на ключовата дума.

Шрифтовете(шрифтовата информация) обикновено имат едно или повече свойства, чийто стойности са имена, които описват тежестта на шрифта. Не съществува общоприето, универсално значение на имената на тези тежести. Тяхната основна цел е да различават шрифтовете в дадено шрифтово семейство по тъмнота. Употребата им сред шрифтовите семейства е доста разнообразна; например шрифт, който бихте счели за 'bold', може да бъде описан като Regular(нормален), Roman(отново стойност, с която се означава нормалния), Book(книжен), Medium(среден), Semi- или DemiBold, Bold, или Black(черен), в зависимост от това колко черна е нормалната разновидност на шрифта в конструкцията. Поради това, че не е установена стандартна употреба на имената, стойностите на свойството за тежест в CSS1 се задават чрез числов подход, в който стойност '400'(или 'normal') отговаря на нормалната разновидност на шрифта в даденото шрифтово семейство. Името на тежестта, свързваща се с тази разновидност обикновено е Book, Regular, Roman, Normal, и понякога, Medium.

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

• ако шрифтовото семейство вече използва числова скала с девет стойности(като шрифта OpenType, например), тогава шрифтовите тежести трябва да бъдат нанесени чрез директен подход.
• ако съществуват едновременно шрифтове обозначени с думите Medium и един от Book, Regular, Roman или Normal, тогава на Medium се присвоява стойност на тежестта '500'.
• шрифт, обозначен с думата "Bold" в общия случай отговаря на стойност на тежестта '700'.
• ако в шрифтовото семейство съществуват по-малко от девет стойности, алгоритъма по подразбиране за запълване на "дупките" е следния. Ако на стойност '500' не е присвоено нищо, на нея ще бъде присвоен същия шрифт като този, на който е присвоена стойност '400'. Ако за някоя от стойностите '600', '700', '800' или '900' не е присвоено нищо, те ще бъдат присвоени на същия шрифт, като този, за който се отнася следващата присвоена ключова дума за по-тъмен шрифт, ако има такава и съответно следващата присвоена ключова дума за по-светъл шрифт в ако няма такава. Ако някоя от стойностите '300', '200' или '100' остане незададена, тя ще бъде зададена за следващата ключова дума за по-светъл шрифт, ако има такава, докато в противен случай ще бъде присвоена на следващата ключова дума за по-светъл шрифт.

Следващите два примера илюстрират този процес. Да предположим, че са зададени четири стойности за тежест в шрифтовото семейство "Example1", от най-светлата към най-тъмната те са следните: Regular, Medium, Bold, Heavy. В шрифтовото семейство "Example2" пък са дефинирани шест стойности за тежест: Book, Medium, Bold, Heavy, Black, ExtraBlack. Забележете как във втория пример е решено да не може "Example2 ExtraBlack" да се присвоява на нищо.

Достъпни шрифтове   |  Присвояване     |  Запълване на "дупките"
----------------------+---------------+-------------------
"Example1 Regular"    |  400          |  100, 200, 300
"Example1 Medium"     |  500          |
"Example1 Bold"       |  700          |  600
"Example1 Heavy"      |  800          |  900

Достъпни шрифтове  |  Присвояване     |  Запълване на "дупките"
----------------------+---------------+-------------------
"Example2 Book"       |  400          |  100, 200, 300
"Example2 Medium"     |  500          |
"Example2 Bold"       |  700          |  600      
"Example2 Heavy"      |  800          |
"Example2 Black"      |  900          |
"Example2 ExtraBlack" |  (none)       |

Тъй като смисълът на относителните ключови думи 'bolder' и 'lighter' е да затъмнят или изсветлят шрифта в семейството и, защото шрифтовото семейство, може и да не притежава шрифтове с всички специфични специфични стойности за тежест, пасването на 'bolder' се осъществява към следващия по-тъмен шрифт от шрифтовото семейство, който е на разположение на клиента, докато пасването на 'lighter' тежестта се осъществява към следващия по-светъл шрифт на в шрифтовото семейство. За да бъдем точни, значението на относителните ключови думи 'bolder' и 'lighter' е следното:

• 'bolder' избира следващото тежест, което се присвоява на шрифт, който е по-тъмен от наследения такъв. Ако няма такава тежест, 'bolder' просто задава следващата по-тъмна числена стойност(и шрифта остава непроменен), освен ако наследената стойност не е '900', при която получената тежест ще е също '900'.
• 'lighter' действа по подобен начин, но работи в обратната посока: тази стойност избира следващата ключова дума за по-светъл шрифт от наследената такава, освен ако няма такъв шрифт, в който случай се избира следващата по-светла числена стойност(и шрифта остава непроменен).

Няма гаранция, че ще съществува по-тъмен шрифт за всяка от стойностите на свойството 'font-weight'; например, някои шрифтове могат да имат само нормални и удебелени разновидности, други могат да имат осем различни тежести на шрифта. Няма гаранция за това как браузъра ще разпредели шрифтовете от едно шрифтово семейство по тежест. Единственото сигурно е, че шрифт със зададена стойност няма да бъде по-малко тъмен от шрифтовете, в които са използвани по-светли стойности.

5.2.6    'font-size'(размер на шрифта)

Стойност: <абсолютен размер> | <относителен размер> | <дължина> | <процент>
Първоначална стойност: medium(среден)
Важи за: всички елементи
Наследимост: Да
Процентни стойности: относителни спрямо шрифтовия размер на родителския елемент

<абсолютен размер>

Ключовата дума <абсолютен размер> служи като показалец към таблица с шрифтови размери,изчислена и съхранявана от браузъра. Възможните стойности са: [ xx-small | x-small | small | medium | large | x-large | xx-large ]. На компютърния екран се препоръчва мащабен коефициент от 1.5 между съседните показалци; ако 'medium' шрифта е 10pt(10 пункта), 'large' шрифта съответно ще е 15pt(15 пункта). Различните медийни посредници се нуждаят от различни мащабни коефициенти. Също така, браузъра трябва да вземе в предвид и качеството и достъпността на шрифтовете, когато изчислява тази таблица. Таблиците на две различни шрифтови семейства може да се различават една от друга.

<относителен размер>

Ключовата дума <относителен размер> се интерпретира по начин, относителен на таблицата с шрифтовите размери и този на родителския елемент. Възможните стойности са: [ larger | smaller ]. Например, ако на шрифтовия размер на родителския елемент е зададена стойност 'medium', то задаване на стойност 'larger' ще направи размера на шрифта на текущия елемент 'large'. Ако размера на шрифта на родителския елемент не е близък по големина на размер от таблицата, браузъра може да прибавя нови размери в таблицата и също така да закръглява до най-близкия. На браузъра може да се наложи да екстраполира стойности от таблицата, ако числовата стойност надхвърля тази на ключовите думи.

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

Отрицателните стойности не са разрешени.

При всички останали свойства, стойностите за дължина 'em' и 'ex' са свързани с размера на шрифта на текущия елемент. При свойството 'font-size', тези мерки за дължина се отнасят за шрифтовия размер на родителския елемент.

Нужно е да се отбележи, че приложението може да наложи нова интерпретация на зададения размер, в зависимост от контекста. Например, шрифта в една VR сцена може да се изобрази с различен размер поради изкривяване на гледната точка.

Примери:

P { font-size: 12pt; }
BLOCKQUOTE { font-size: larger }
EM { font-size: 150% }
EM { font-size: 1.5em }

Ако се използва препоръчваният коефициент на мащабиране, т.е. 1.5, последните три декларации ще бъдат идентични.

5.2.7    'font'(Шрифт)

Стойност: [ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family>
Първоначална стойност: такава не се дефинира при подобни свойства за "кратък" достъп
Важи за: всички елементи
Наследимост: Да
Процентни стойности: позволени са при стойностите <font-size> и <line-height>

Свойството 'font' е свойство за бърз достъп, с чиято помощ се задават стойностите на свойствата 'font-style' 'font-variant' 'font-weight' 'font-size', 'line-height' и 'font-family' на едно и също място в стиловия лист. Синтаксиса на това свойство е базиран на традиционната типографска кратка система за обозначения, с чиято се задават множество свойства, свързани с шрифтовете.

Вижте предишно дефинираните свойства за определение на разрешени и първоначални стойности. На свойствата, за които не са зададени стойности, се задават техните първоначални стойности.

P { font: 12pt/14pt sans-serif }
P { font: 80% sans-serif }
P { font: x-large/110% "new century schoolbook", serif }
P { font: bold italic large Palatino, serif }
P { font: normal small-caps 120%/120% fantasy }

Процентната стойност(80%) на шрифтовия размер във второто правило се отнася за шрифтовия размер на родителския елемент. В третото правило, процентната стойност, зададена за височината на реда се изчислява чрез размера на шрифта на самия елемент.

В първите три правила по-горе, стойностите за свойствата 'font-style', 'font-variant' и 'font-weight' не са изрично декларирани, което означава, че и на трите се присвоява първоначалната им стойност('normal'). Четвъртото правило задава на свойството 'font-weight' стойност 'bold', на 'font-style' - 'italic' и по мълчалив подход на свойството 'font-variant' се задава стойност 'normal'.

Петото правило настройва стойностите на свойствата 'font-variant'('small-caps'), 'font-size'(120% от размера на шрифта на родителския елемент), 'line-height'(120% от размера на шрифта на елемента) и 'font-family'('fantasy'). От това следва, че ключовата дума 'normal' важи и за останалите две свойства: 'font-style' и 'font-weight'.

5.3    Цветови и фонови свойства

Тези свойства описват цвета(често наричан основен цвят) и фона на елемента(т.е. повърхността, върху която се визуализира съдържанието). Могат да бъдат задавани фонов цвят и/или фоново изображение. Позицията на изображението, това как да се повтаря(ако се повтаря) и дали е неподвижно или се движи в зависимост от положението на платното, могат да бъдат настройвани чрез CSS.

Свойството'color' се наследява по нормалния начин. Фоновите свойства не се наследяват, но фона на родителския елемент ще прозира по подразбиране, защото първоначалната стойност на свойството 'background-color' е 'transparent'.

5.3.1    'color'(цвят)

Стойност: <цвят>
Първоначална стойност: в зависимост от браузъра
Важи за: всички елементи
Наследимост: Да
Процентни стойности: N/A

Това свойство описва текстовия цвят на елемент(т.н. обикновен цвят). Съществуват различни начини да се зададе червен цвят:

EM { color: red }     /* на нормален език */
EM { color: rgb(255,0,0) }     /* RGB стойност от 0 до 255 */

Вижте глава 6.3 където са описани възможните цветови стойности.

5.3.2    'background-color'(фонов цвят)

Стойност: <цвят> | transparent(прозрачен цвят)
Първоначална стойност: transparent(прозрачен цвят)
Важи за: всички елементи
Наследимост: Не
Процентни стойности: N/A

Това свойство задава фоновия цвят на елемент.

H1 { background-color: #F00 }

5.3.3    'background-image'(фоново изображение)

Стойност: <url> | none(без фоново изображение)
Първоначална стойност: none
Важи за: всички елементи
Наследимост: Не
Процентни стойности: N/A

Това свойство задава фоново изображение на елемента. Когато се задава такова, трябва да бъде зададен и фоновия цвят, в случай че изображението не е достъпно(не е на разположение). Когато изображението е достъпно(на разположение), то се полага върху фоновия цвят.

BODY { background-image: url(marble.gif) }
P { background-image: none }

5.3.4    'background-repeat'(повторение на фона)

Стойност: repeat | repeat-x | repeat-y | no-repeat
Първоначална стойност: repeat
Важи за: всички елементи
Наследимост: Не
Процентни стойности: N/A

Ако е зададено фоново изображение, стойността на свойството 'background-repeat' определя по дали и по какъв точно начин изображението ще се повтаря.

Стойност 'repeat' означава, че изображението ще се повтаря и във вертикална и в хоризонтална посока. Стойността 'repeat-x'('repeat-y') води до хоризонтално(съответно вертикално) повторение на изображението, за да се създаде единична ивица от изображения от едната към другата страна(в хоризонтална или вертикална посока). Стойност 'no-repeat' ще рече, че изображението няма да се повтаря.

BODY { 
  background: red url(pendant.gif);
  background-repeat: repeat-y;
}

В примера горе, изображението ще се повтаря по вертикалната ос.

5.3.5    'background-attachment'(прикаченост на фона)

Стойност: scroll | fixed
Първоначална стойност: scroll
Важи за: всички елементи
Наследимост: Не
Процентни стойности: N/A

Ако е зададено фоново изображение, стойността на свойството 'background-attachment' определя дали то ще е неподвижно спрямо платното или ще се движи заедно със съдържанието.

BODY { 
  background: red url(pendant.gif);
  background-repeat: repeat-y;
  background-attachment: fixed;
}

CSS1 същина: Браузърите могат да третират стойността 'fixed' като 'scroll' такава понякога. Въпреки това се препоръчва да интерпретират 'fixed' по правилен начин, поне в HTML и BODY елементите, тъй като няма начин, автора на документа да зададе изображение само за тези браузъри, които поддържат 'fixed' стойността.(Вижте глава 7)

5.3.6    'background-position'(позициониране на фона)

Стойност: [<процентна стойност> | <дължина>]{1,2} | [top | center | bottom] || [left | center | right]
Първоначална стойност: 0% 0%
Важи за: блоковите и заместените елементи
Наследимост: Не
Процентни стойности: относителни спрямо размерите на самия елемент

Ако е било зададено фоново изображение, стойността на свойството 'background-position' определя неговата първоначална позиция.

Ако за стойност е зададена двойката '0% 0%', горния ляв ъгъл на изображението се поставя в горния ляв ъгъл на кутията, която се намира около съдържанието на елемента(а не кутията, която се намира около уплътнението, рамката или полето). Ако за стойност е зададена двойката '100% 100%', долния десен ъгъл на изображението ще бъде разположен в долния десен ъгъл на елемента. При задаване на двойката '14% 84%', точката, която се намира на 14% хоризонтално и 84% вертикално на изображението ще бъде разположена в точката, която се намира на 14% хоризонтално и 84% вертикално в елемента.

Ако за стойност е зададена двойката '2cm 2cm', горния ляв ъгъл на изображението ще бъде поставен на 2 сантиметра вдясно и на 2 сантиметра надолу от горния ляв ъгъл на елемента.

Ако е зададена само една мярка за дължина или процентна стойност, тя ще бъде използвана само за хоризонталната позиция; за вертикалната позиция ще бъде присвоена стойност 50%. Ако са зададени две стойности, първата ще се счита за хоризонтална. Разрешено е комбинирането на мерки за дължина с процентни стойности, например '50% 2cm'. Разрешени са и отрицателните стойности на позициите.

За да се зададе позицията на фоново изображение, за стойности могат да бъдат използвани и ключови думи. Те не могат да бъдат комбинирани с процентни стойности или мерки за дължина. Възможните комбинации от ключови думи и съответните им интерпретации са описани по-долу:

• 'top left' и 'left top' означават същото, като '0% 0%'.
• 'top', 'top center' и 'center top' означават същото, като '50% 0%'.
• 'right top' и 'top right' означават същото, като '100% 0%'.
• 'left', 'left center' и 'center left' означават същото, като '0% 50%'.
• 'center' и 'center center' означават същото, като '50% 50%'.
• 'right', 'right center' и 'center right' означават същото, като '100% 50%'.
• 'bottom left' и 'left bottom' означават същото, като '0% 100%'.
• 'bottom', 'bottom center' и 'center bottom' означават същото, като '50% 100%'.
• 'bottom right' и 'right bottom' означават същото, като '100% 100%'.

Ето и някои примери::

BODY { background: url(banner.jpeg) right top }    /* 100%   0% */
BODY { background: url(banner.jpeg) top center }   /*  50%   0% */
BODY { background: url(banner.jpeg) center }       /*  50%  50% */
BODY { background: url(banner.jpeg) bottom }       /*  50% 100% */

Ако фоновото изображение е неподвижно('fixed') спрямо платното(прочетете за свойството 'background-attachment' по-горе), изображението се разполага спрямо платното вместо спрямо елемента. Например:

f 
  background-image: url(logo.png);
  background-attachment: fixed;
  background-position: 100% 100%;
} 

В примера горе, изображението ще бъде разположено в долния десен ъгъл на платното.

5.3.7    'background'(фон)

Стойност: <фонов цвят> || <фоново изображение> || <повтаряемост на фона> || <прикаченост на фона> || <позиция на фона>
Първоначална стойност: такава не се дефинира при подобни свойства за "кратък" достъп
Важи за: всички елементи
Наследимост: Не
Процентни стойности: такива се позволяват единствено при стойността на свойството <background-position>

Свойството 'background' е свойство за бърз достъп, което служи за задаване на отделните фонови свойства(като 'background-color', 'background-image', 'background-repeat', 'background-attachment' и 'background-position') на едно и също място в стиловия лист.

Възможните стойности на свойството 'background' се определя от множеството от възможни стойности на отделните свойства.

BODY { background: red }
P { background: url(chess.png) gray 50% repeat fixed }

Свойството 'background' винаги задава всички отделни фонови свойства. В първото правило от горния пример, единствено стойността на свойството 'background-color' е зададена и на другите отделни свойства е зададена тяхната първоначална стойност. Във второто правило, всички отделни свойства биват зададени изрично.

5.4    Текстови свойства

5.4.1    'word-spacing'(разстояние между думите)

Стойност: normal | <дължина>
Първоначална стойност: normal
Важи за: всички елементи
Наследимост: Да
Процентни стойности: N/A

Мярката за дължина индикира добавяне към разстоянието между думите по подразбиране. Стойностите могат да бъдат и отрицателни, но съществуват и специфични ограничения при изпълняването на инструкциите. На браузъра е дадена свобода на действие при избора на точния алгоритъм по поставянето на разстояние между думите. То може да бъде повлияно и от т.н. 'justification' подравняване(което е стойност на свойството 'text-align').

H1 { word-spacing: 1em }

В този пример, текущата стойност на разстоянието между думите в елементите 'h1' ще бъде увеличена с '1em'.

CSS1 същина: Възможно е браузърите да интерпретират, каквато и да е стойност на свойството 'word-spacing' като 'normal'.(Вижте глава 7.)

5.4.2    'letter-spacing'(разстояние между буквите)

Стойност: normal | <дължина>
Първоначална стойност: normal
Важи за: всички елементи
Наследимост: Да
Процентни стойности: N/A

Мярката за дължина индикира за добавката на съответното разстояние към това между символите. Стойностите могат да бъдат и отрицателни, но може да съществуват ограничения при съобразяването с тези стойности. Браузърът притежава свобода на действие върху избора на точно определен алгоритъм за оставяне на разстояние между буквите. То може да бъде повлияно и от т.н. justification подравняване(което може да бъде зададено чрез съответната стойност на свойството 'align').

BLOCKQUOTE { letter-spacing: 0.1em }

Тук, разстоянието между символите в елементите 'blockquote' ще бъде увеличено с '0.1em'.

При зададена стойност 'normal', браузъра може да променя разстоянието между буквите, за да осъществи двустранно подравняване на текста. Това няма да се случи, ако свойството на 'letter-spacing' изрично е зададена като стойност мярка за <дължина>:

BLOCKQUOTE { letter-spacing: 0 }
BLOCKQUOTE { letter-spacing: 0cm }

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

CSS1 същина: браузърите могат да интерпретират, която и да е стойност на 'letter-spacing' като 'normal'.(Вижте глава 7.)

5.4.3    'text-decoration'(текстово украшение)

Стойност: none | [ underline || overline || line-through || blink ]
Първоначална стойност: none
Важи за: всички елементи
Наследимост: Не, но трябва да се види разяснението по-долу.
Процентни стойности: N/A

Това свойство описва украшенията, които се добавят към текста на даден елемент. Ако елемента не съдържа текст(например 'img' елемента в HTML) или е празен елемент(например '<EM></EM>'), свойството не указва ефект. Стойност 'blink' кара текста да мига.

Цветоветът или цветовете, с които трябва да се визуализира текстовото украшение, трябва да бъдат зададени чрез стойността на свойството 'color'(защото те ще произлизат от него).

Това свойство не се наследява, но елементите трябва да пасват на своя родителски такъв. Така например, ако един елемент е подчертан, чертата трябва да обхваща и дъщерните елементи. Цвета на линията за подчертаване ще остане същия, дори ако за по-долните елементи са зададени различни стойности на свойството 'color'.

A:link, A:visited, A:active { text-decoration: underline }

Горният пример ще доведе до подчертаване на всички хипервръзки(линкове)(т.е. всички 'a' елементи с зададен атрибут 'href').

Браузърите би трябвало да разпознават ключовата дума 'blink', но поддръжката на ефекта на "мигането" не се изисква от тях.

5.4.4   'vertical-align'(вертикално подравняване)

Стойност: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <процентна стойност>
Първоначална стойност: baseline
Важи за: вътрешноредовите елементи
Наследимост: Не
Процентни стойности: относителни спрямо стойността на свойството 'line-height' на самия елемент

Това свойство оказва влияние върху вертикалното позициониране на елемента. Множеството от ключови думи са относителни спрямо родителския елемент:

'baseline'

подравнява основния ред на елемента(или долната част, ако елемента няма основен ред) с основния ред на родителския елемент.

'middle'

подравнява вертикалната среда на елемента(най-често изображение) със сумата на основния ред и половината от височината на x на родителския елемент

'sub'

прави елемента subscript

'super'

прави елемента superscript

'text-top'

подравнява горната част на елемента с горната част на символите на родителския елемент

'text-bottom'

подравнява долната част на елемента с долната част на символите на родителския елемент

Друго множество от свойства е относително спрямо форматирания ред, от който е част елемента:

'top'

подравнява горната част на елемента с най-високия елемент от реда

'bottom'

подравнява долната част на елемента с най-ниския елемент на реда

При употребата на 'top' и 'bottom' подравняването, могат да възникнат безизходни ситуации, в които зависимостите между елементите сформират цикъл.

Процентните стойности са относителни спрямо стойността на свойството 'line-height' на самия елемент. Те повдигат основния ред на елемента(или долната му част, ако няма основен ред) на зададеното разстояние над основния ред на родителския елемент. Възможна е и употребата на отрицателни стойности. При стойност, например, '-100%', елемента ще се снижи, така че основният му ред да бъде разположен там, където трябва да бъде основния ред на следващия ред. Това позволява осъществяването на прецизен контрол над вертикалното позициониране на елементите(като изображения, които са на мястото на букви), които не притежават основен ред.

Очаква се, че бъдещата версия на CSS ще позволи използването на <мерни единици> като стойност на това свойство.

5.4.5    'text-transform'(трансформиране на текста)

Стойност: capitalize | uppercase | lowercase | none
Първоначална стойност: none
Важи за: всички елементи
Наследимост: Да
Процентни стойности: N/A

'capitalize'

прави първия символ на всяка дума главна буква

'uppercase'

всички букви от елемента стават главни букви

'lowercase'

всички букви на елемента стават малки букви

'none'

неутрализира наследената стойност

Действителното преобразуване(трансформиране) на всяка буква зависи от човешкия език. Вижте [4], за да научите начини, по които да намерите езика, използван за даден елемент.

H1 { text-transform: uppercase }

Примерът горе ще превърне всички 'h1' елементи в текст с главни букви.

CSS1 същина: Браузърите могат да игнорират 'text-transform' свойството(т.е. да го третират неговата стойност като 'none'), за символи, които не са от репертоара на Latin-1 и за елементи в езиците, за които трансформирането се осъществява по различен начин от определения от таблиците за промяна на буквите начин в Unicode[8].

5.4.6    'text-align'(подравняване на текста)

Стойност: left | right | center | justify
Първоначална стойност: в зависимост от браузърите
Важи за: блоковите елементи
Наследимост: Да
Процентни стойности: N/A

Това свойство описва начина, по който ще се подравни текста в елемента. Точния алгоритъм на т.н. justafication или двустранно подравняване, зависи от браузъра и човешкия език.

Например:

DIV.center { text-align: center }

Тъй като свойството 'text-align' се наследява, всички блокови елементи, които се намират вътре в 'div' елемент, на който е зададен 'class = center', ще бъдат центрирани. Нужно е да се отбележи, че подравняването зависи от широчината на елемента, а не тази на платното. Ако стойността 'justify' не се поддържа, браузъра ще осигури нейн заместник. Обикновено стойността-заместник при западните езици е 'left'.

CSS1 същина: Браузърите могат да третират стойност 'justify' като 'left' или 'right', в зависимост от това, дали посоката на писане по подразбиране на елемента е от ляво на дясно или от дясно на ляво, респективно.

5.4.7    'text-indent'(назъбване на текста)

Стойност: <мярка за дължина> | <процентна стойност>
Първоначална стойност: 0
Важи за: блоковите елементи
Наследимост: Да
Процентни стойности: относителни спрямо широчината на родителския елемент

Това свойство определя назъбването, което се появява преди първия форматиран ред. Зададената стойност на 'text-indent' може да бъде и отрицателна, но може да съществуват ограничения при съобразяването с тези стойности и тяхната имплементация(осъществяване). Назъбването не се поставя в средата на елемент, ако той е бил "разкъсан" от друг(като елемента 'br' в HTML).

Например:

P { text-indent: 3em }

5.4.8    'line-height'(височина на реда)

Стойност: normal | <число> | <мярка за дължина> | <процентна стойност>
Първоначална стойност: normal
Важи за: всички елементи
Наследимост: Да
Процентни стойности: относителни спрямо размера на шрифта на самия елемент

Свойството задава разстоянието между основните редове на два съседни реда

Когато е зададена числена стойност(число), за височина на реда се задава произведението от шрифта на текущия елемент и зададената числена стойност. Този случай се различава от този при задаване на процентна стойност с начина, по който се наследява: когато е зададена числова стойност, дъщерните елементи ще наследят самия множител(числото), а не получената стойност(какъвто е и случая с процентите и другите мерки за стойност).

Не е разрешено задаването на отрицателни стойности.

Трите правила, зададени в примера долу, водят до получаване на еднаква височина на реда:

DIV { line-height: 1.2; font-size: 10pt }     /* число */
DIV { line-height: 1.2em; font-size: 10pt }   /* мярка за дължина */
DIV { line-height: 120%; font-size: 10pt }    /* процентна стойност */

Задаване на стойност 'normal' води до задаване на подходяща стойност за свойството 'line-height' за съответния шрифт на елемента. Прието е, че браузъра трябва да възприема стойността 'normal', все едно че е зададена стойност в областта от 1.0 до 1.2.

Вижте глава 4.4, където е описано влиянието на свойството 'line-height' върху форматирането на блоков елемент.

5.5    Свойства на кутиите

Тези свойства задават размера, околността и позицията на кутиите, които представляват елементите. Вижте модела на форматиране(глава 4), където са дадени примери за употребата на свойствата на кутиите.

Свойствата на полето(margin) настройват полето на елемента. Свойството 'margin' задава полетата за всичките четири страни, докато другите свойства на полета, задават полетата само на техните страни, респективно.

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

Свойствата на рамката(border) задават рамката на елемент. Всеки елемент притежава четири рамки, за всяка от неговите страни, които се дефинират чрез тяхната широчина, цвят и стил.

Свойствата 'width' и 'height' задават размера на кутията, докато свойствата 'float' и 'clear' могат да променят позицията на елементите.

5.5.1    'margin-top'(поле отгоре)

Стойност: <мярка за дължина> | <процентна стойност> | auto
Първоначална стойност: 0
Важи за: всички елементи
Наследимост: Не
Процентни стойности: относителни спрямо широчината на най-близкия предшестващ блоков елемент.

Това свойство задава горното поле на елемент:

H1 { margin-top: 2em }

Разрешени са отрицателните стойности, но може да съществуват ограничения при съобразяването с тези стойности по време на имплементацията(осъществяването) им.

5.5.2    'margin-right'(поле отдясно)

Стойност: <мярка за дължина> | <процентна стойност> | auto
Първоначална стойност: 0
Важи за: всички елементи
Наследимост: Не
Процентни стойности: относителни спрямо широчината на най-близкия предшественик-блоков елемент

Това свойство задава полето отдясно на даден елемент:

H1 { margin-right: 12.3% }

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

5.5.3    'margin-bottom'(поле отдолу)

Стойност: <мярка за дължина> | <процентна стойност> | auto
Първоначална стойност: 0
Важи за: всички елементи
Наследимост: Не
Процентни стойности: относителни спрямо широчината на най-близкия предшественик-блоков елемент

Това свойство задава полето отдолу на даден елемент:

H1 { margin-bottom: 3px }

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

5.5.4    'margin-left'

Стойност: <мярка за дължина> | <процентна стойност> | auto
Първоначална стойност: 0
Важи за: всички елементи
Наследимост: Не
Процентни стойности: относителни спрямо широчината на най-близкия предшественик-блоков елемент

Това свойство задава полето отляво на даден елемент:

H1 { margin-left: 2em }

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

5.5.5    'margin'(поле)

Стойност: [ <мярка за дължина> | <процентна стойност> | auto ]{1,4}
Първоначална стойност: такава не се дефинира при подобни свойства за "кратък" достъп
Важи за: всички елементи
Наследимост: Не
Процентни стойности: относителни спрямо широчината на най-близкия предшественик-блоков елемент

Свойството 'margin' е свойство за "кратък" достъп, с чиято помощ се задават стойностите за свойствата 'margin-top', 'margin-right', 'margin-bottom' и 'margin-left' на едно и също място в стиловия лист.

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

BODY { margin: 2em } /* на всички полета се задава стойност 2em */
BODY { margin: 1em 2em } /* на горното и долното поле се задава стойност 1em, 
			    докато на дясното и лявото се задава стойност 2em */
BODY { margin: 1em 2em 3em } /* на горното поле се задава стойност 1em,
				на дясното - 2em, на долното - 3em, на лявото - 2em */

Последното правило от горния пример е равносилно на примера отдолу:

BODY {
  margin-top: 1em;
  margin-right: 2em;
  margin-bottom: 3em;
  margin-left: 2em;        /* стойност-копие на тази, зададена на полето на срещуположната
}			      страна(дясната или margin-right) */

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

5.5.6    'padding-top'(уплътнение отгоре)

Стойност: <мярка за дължина> | <процентна стойност>
Първоначална стойност: 0
Важи за: всички елементи
Наследимост: Не
Процентни стойности: относителни спрямо широчината на най-близкия предшественик-блоков елемент

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

BLOCKQUOTE { padding-top: 0.3em }

Не е разрешено зададените стойности да бъдат отрицателни.

5.5.7    'padding-right'(уплътнение отдясно)

Стойност: <мярка за дължина> | <процентна стойност>
Първоначална стойност: 0
Важи за: всички елементи
Наследимост: Не
Процентни стойности: относителни спрямо широчината на най-близкия предшественик-блоков елемент

Това свойство задава уплътнението отдясно за даден елемент.

BLOCKQUOTE { padding-right: 10px }

Не е разрешено зададените стойности да бъдат отрицателни.

5.5.8    'padding-bottom'(уплътнение отдолу)

Стойност: <мярка за дължина> | <процентна стойност>
Първоначална стойност: 0
Важи за: всички елементи
Наследимост: Не
Процентни стойности: относителни спрямо широчината на най-близкия предшественик-блоков елемент

Това свойство задава уплътнението отдолу за даден елемент.

BLOCKQUOTE { padding-bottom: 2em }

Не е разрешено зададените стойности да бъдат отрицателни.

5.5.9    'padding-left'(уплътнение отляво)

Стойност: <мярка за дължина> | <процентна стойност>
Първоначална стойност: 0
Важи за: всички елементи
Наследимост: Не
Процентни стойности: относителни спрямо широчината на най-близкия предшественик-блоков елемент

Това свойство задава уплътнението отляво за даден елемент.

BLOCKQUOTE { padding-left: 20% }

Не е разрешено зададените стойности да бъдат отрицателни.

5.5.10    'padding'(уплътнение)

Стойност: [ <мярка за дължина> | <процентна стойност> ]{1,4}
Първоначална стойност: такава не се дефинира при подобни свойства за "кратък" достъп
Важи за: всички елементи
Наследимост: Не
Процентни стойности: относителни спрямо широчината на най-близкия предшественик-блоков елемент

Свойството 'padding' е свойство за кратък достъп, чрез което се задават стойностите за свойствата 'padding-top', 'padding-right', 'padding-bottom' и 'padding-left' на едно и също място в стиловия лист.

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

Повърхността на областта на уплътнението се задава чрез свойството 'background':

H1 { 
  background: white; 
  padding: 1em 2em;
} 

Горният пример задава вертикално уплътнение със стойност '1em'(тази стойност се задава съответно за 'padding-top' и 'padding-bottom') и съответно хоризонтално уплътнение със стойност '2em'(тази стойност се задава съответно за 'padding-right' и 'padding-left'). Мерната единица 'em' е относителна спрямо размера на шрифта на елемента: '1em' е равен на размера на шрифта, който се използва в момента.

Не е разрешено зададените стойности да бъдат отрицателни.

5.5.11    'border-top-width'(широчина на горната рамка)

Стойност: thin(тънка) | medium(средна) | thick(дебела) | <мярка за дължина>
Първоначална стойност: 'medium'
Важи за: всички елементи
Наследимост: Не
Процентни стойности: N/A

Това свойство задава широчината на горната рамка на елемента. Широчината на ключовите стойности зависи от браузъра, но е в сила следната зависимост: 'thin' <= 'medium' <= 'thick'.

Широчините, на които отговарят ключовите думи са едни и същи, в рамките на документа:

H1 { border: solid thick red }
P  { border: solid thick blue }

В горния пример, елементите 'h1' и 'p' ще имат една и съща рамка, независимо от размера на шрифта. За да бъдат постигнати относителни широчини на рамките, може да бъде използвана мярката 'em':

H1 { border: solid 0.5em }

Широчините на рамките не могат да бъдат с отрицателна стойност.

5.5.12    'border-right-width'(широчина на дясната рамка)

Стойност: thin | medium | thick | <мярка за дължина>
Първоначална стойност: 'medium'
Важи за: всички елементи
Наследимост: Не
Процентни стойности: N/A

Това свойство задава широчината на дясната рамка на елемента. Ако стойността на свойството не бъде зададена, тя ще бъде равна на тази, зададена на свойството 'border-top-width'(стойността за широчината на горната рамка).

5.5.13    'border-bottom-width'(широчина на долната рамка)

Стойност: thin | medium | thick | <мярка за дължина>
Първоначална стойност: 'medium'
Важи за: всички елементи
Наследимост: Не
Процентни стойности: N/A

Това свойство задава широчината на долната рамка на елемента. Ако стойността на свойството не бъде зададена, тя ще бъде равна на тази, зададена на свойството 'border-top-width'(стойността за широчината на горната рамка).

5.5.14    'border-left-width'(широчина на лявата рамка)

Стойност: thin | medium | thick | <мярка за дължина>
Първоначална стойност: 'medium'
Важи за: всички елементи
Наследимост: Не
Процентни стойности: N/A

Това свойство задава широчината на лявата рамка на елемента. Ако стойността на свойството не бъде зададена, тя ще бъде равна на тази, зададена на свойството 'border-top-width'(стойността за широчината на горната рамка).

5.5.15    'border-width'(широчина на рамката)

Стойност: [thin | medium | thick | <мярка за дължина>]{1,4}
Първоначална стойност: такава не се дефинира при подобни свойства за "кратък" достъп
Важи за: всички елементи
Наследимост: Не
Процентни стойности: N/A

Това е свойство за кратък достъп, чрез което се задават стойностите за свойствата 'border-width-top', 'border-width-right', 'border-width-bottom' и 'border-width-left' на едно и също място в стиловия лист.

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

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

В примерите долу, коментарите показват съответните широчини на горната, дясната, долната и лявата рамка:

H1 { border-width: thin }                   /* thin thin thin thin */
H1 { border-width: thin thick }             /* thin thick thin thick */
H1 { border-width: thin thick medium }      /* thin thick medium thin */
H1 { border-width: thin thick medium thin } /* thin thick medium thin */

За стойност на широчините на рамките не може да бъде задавана отрицателна стойност.

5.5.16    'border-color'(цвят на рамката)

Стойност: <цвят>{1,4}
Първоначална стойност: стойността на свойството 'color'
Важи за: всички елементи
Наследимост: Не
Процентни стойности: N/A

Свойството 'border-color' задава цвета на четирите рамки. Могат да бъдат зададени от една до четири стойности и те се задават за рамките на различните страни, както за свойството 'border-width' по-горе.

Ако не е зададена нито една цветова стойност, ще бъде използвана стойността на свойството 'color' на елемента.

P { 
  color: black; 
  background: white; 
  border: solid;
}

В резултат на правилата от примера горе, рамката ще бъде плътна черна линия.

5.5.17    'border-style'(стил на рамката)

Стойност: none | dotted | dashed | solid | double | groove | ridge | inset | outset
Първоначална стойност: none
Важи за: all elements
Наследимост: Не
Процентни стойности: N/A

Свойството 'border-style' задава стила на четирите рамки. За него могат да бъдат зададени от една до четири стойности, като тези стойности се задават за рамката на различните страни, както при свойството 'border-width' по-горе.

#xy34 { border-style: solid dotted }

В горния пример, хоризонталните рамки ще бъдат 'solid'(плътни) и вертикалните рамки ще бъдат 'dotted'(на точки).

Тъй като първоначалната стойност на стиловете на рамките е 'none', няма да се виждат никакви рамки, освен, ако не бъде зададена стойност за свойството 'border-style'.

Значенията на стиловете на рамките са, както следва:

none

не се изобразява рамка(независимо от стойността, зададена на свойството 'border-width')

dotted

рамката представлява линия на точки, която се изобразява върху фона на елемента

dashed

рамката представлява линия на тирета, която се изобразява върху фона елемента

solid

рамката представлява плътна линия

double

рамката представлява двойна линия, която се изобразява върху фона на елемента. Сборът на двете единични линии и разстоянието между тях е равен на стойността, зададена за свойството <border-width>.

groove

рамката представлява 3D(триизмерна) вдлъбнатина, която се изобразява с цветове, базирани на стойността <цвят>.

ridge

рамката представлява 3D(триизмерна) ивица, която се изобразява с цветове, базирани на стойността <цвят>.

inset

рамката представлява 3D(триизмерна) вмъкната фигура, която се изобразява с цветове, базирани на стойността <цвят>.

outset

рамката представлява 3D(триизмерна) фигура, със структура, противоположна на inset стила, която се изобразява с цветове, базирани на стойността <цвят>.

CSS1 същина: Браузърите понякога може да интерпретират 'dotted', 'dashed', 'double', 'groove', 'ridge', 'inset' и 'outset', като 'solid'.

5.5.18    'border-top'(горна рамка)

Стойност: <border-top-width> || <border-style> || <цвят>
Първоначална стойност: такава не се дефинира при подобни свойства за "кратък" достъп
Важи за: всички елементи
Наследимост: Не
Процентни стойности: N/A

Това е свойство за "кратък" достъп, с чиято помощ се задават стойностите на свойствата за широчина, стил и цвят на горната рамка на даден елемент.

H1 { border-bottom: thick solid red }

Горното правило ще зададе стойности за широчината, стила и цвета на рамката, която се намира под h1 елемента. Пропуснатите стойности, ще бъдат заместени със своите първоначални стойности:

H1 { border-bottom: thick solid }

Тъй като в горния пример цветовата стойност е пропусната, цвета на рамката ще бъде същия като стойността на свойството 'color' на самия елемент.

Трябва да се отбележи, че докато свойството 'border-style' приема максимум четири стойности, това свойство приема само една стилова стойност.

5.5.19    'border-right'(дясна рамка)

Стойност: <border-right-width> || <border-style> || <цвят>
Първоначална стойност: такава не се дефинира при подобни свойства за "кратък" достъп
Важи за: всички елементи
Наследимост: Не
Процентни стойности: N/A

Това е свойство за "кратък" достъп, чрез което се задават стойностите за свойствата широчина, стил и цвят на дясната рамка на елемент. Иначе е еквивалентно на 'border-top' по начин на употреба.

5.5.20    'border-bottom'(долна рамка)

Стойност: <border-bottom-width> || <border-style> || <цвят>
Първоначална стойност: такава не се дефинира при подобни свойства за "кратък" достъп
Важи за: всички елементи
Наследимост: Не
Процентни стойности: N/A

Това е свойство за "достъп", чрез което се задават стойностите на свойствата за широчина, стил и цвят на долната рамка на елемента. Иначе е евквивалентно на 'border-top' по начин на употреба.

5.5.21    'border-left'(лява рамка)

Стойност: <border-left-width> || <border-style> || <цвят>
Първоначална стойност: такава не се дефинира при подобни свойства за "кратък" достъп
Важи за: всички елементи
Наследимост: Не
Процентни стойности: N/A

Това е свойство за "достъп", чрез което се задават стойностите на свойствата за широчина, стил и цвят на лявата рамка на елемента. Иначе е евквивалентно на 'border-top' по начин на употреба.

5.5.22    'border'(рамка)

Стойност: <border-width> || <border-style> || <цвят>
Първоначална стойност: такава не се дефинира при подобни свойства за "кратък" достъп
Важи за: всички елементи
Наследимост: Не
Процентни стойностиs: N/A

Свойството 'border' е свойство за "кратък" достъп, чрез което се задават едни и същи стойности за широчина, цвят и стил на четирите рамки на един елемент. Например, първото правило долу е еквивалентно на четирите правила, които са показани след него:

P { border: solid red }
P {
  border-top: solid red;
  border-right: solid red;
  border-bottom: solid red;
  border-left: solid red
}

За разлика от свойствата за "кратък" достъп 'margin' и 'padding', чрез свойството 'border' не могат да бъдат задавани различни стойности за четирите рамки. За да бъде направено това, трябва да се използват едно или повече от останалите свойства на рамките.

Тъй като свойствата до известна степен притежават еднаква функционалност, реда по който се задават правилата става важен. Вземете в предвид следния пример:

BLOCKQUOTE {
  border-color: red;
  border-left: double
  color: black;
}

В горния пример, цвета на лявата рамка ще бъде черен, докато останалите рамки ще бъдат червени. Това се дължи на задаването на 'border-left' стойностите за широчина, стил и цвят. Тъй като не е зададена стойност за цвета на свойството 'border-left', ще бъде използвана тази от свойството 'color'. Факта, че свойството 'color' се задава след свойството 'border-left' не е важен.

Забележете, че докато свойството 'border-width' приема до четири стойности, това свойство приема само една.

5.5.23    'width'(широчина)

Стойност: <мярка за дължина> | <процентна стойност> | auto
Първоначална стойност: auto
Важи за: блоковите и заместените елементи
Наследимост: Не
Процентни стойности: относителни спрямо широчината на родителския елемент

Това свойство може да бъде задавано при текстови елементи, но е най-полезно, когато се използва за заместени елементи, като изображения, например. Широчината се спазва, дори и с цената на мащабиране на изображението. Когато се мащабира изображението, неговите пропорции се запазват, ако свойството 'height' е установено на стойност 'auto'.

Например:

IMG.icon { width: 100px }

Ако стойностите, зададени на свойствата 'width' и 'height' на определен заместен елемент са 'auto', за тяхната стойност ще се използват съответните същински измерения на елемента.

Не е разрешена употребата на отрицателни стойности.

Вижте модела на форматиране(глава 4) за описание на връзката между това свойство, полето и уплътнението.

5.5.24    'height'(височина)

Стойност: <мярка за дължина> | auto
Първоначална стойност: auto
Важи за: блоковите и заместените елементи
Наследимост: Не
Процентни стойности: N/A

Това свойство може да се използва при текст, но е най-полезно при заместени елементи, като изображения, например. Височината се спазва чрез мащабиране на изображението, ако то е необходимо. При мащабирането, пропорциите на изображението се запазват, ако стойността на свойството 'width' е установена на 'auto'.

Например:

IMG.icon { height: 100px }

Ако стойностите на свойствата 'width' и 'height' на заместен елемент са установени на 'auto', тези свойства ще получат за стойност същинските размери на елемента.

Ако свойството е използвано с текстов елемент, височината може да бъде спазена и с т.н. скролбар(scrollbar).

Не е разрешено задаването на отрицателни стойности.

CSS1 същина: Браузърите може да игнорират свойството 'height'(т.е. да третират стойността му като 'auto'), ако елемента не е заместен такъв.

5.5.25    'float'(поток)

Стойност: left | right | none
Първоначална стойност: none
Важи за: всички елементи
Наследимост: Не
Процентни стойности: N/A

При зададена стойност 'none', елемента ще бъде визуализиран на мястото, където се появява в текста. При зададена стойност 'left'('right') елемента ще бъде поместен вляво(или вдясно) и текста ще обгърне дясната(лявата) страна на елемента. При зададена стойност 'left' или 'right', елемента се третира като блоков(т.е. свойството 'display' се игнорира). Вижте глава 4.1.4 за пълните подробности по въпроса.

IMG.icon { 
  float: left;
  margin-left: 0;
}

Горният пример поставя всички елементи img в 'class=icon' около лявата страна на родителския елемент.

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

5.5.26    'clear'(изчистване)

Стойност: none | left | right | both
Първоначална стойност: none
Важи за: всички елементи
Наследимост: Не
Процентни стойности: N/A

Това свойство определя дали елемента позволява присъствието на плаващи елементи около него. По-точно, стойността на това свойство определя, къде точно не се приема присъствието на плаващи елементи. При задаване на стойност 'left' на свойството 'clear', елемента ще бъде поставен под плаващия елемент от лявата му страна, ако има такъв. При задаване на стойност 'none' на свойството 'clear', плаващите елементи са позволени и от двете страни на елемента. Например:

H1 { clear: left }

5.6    Свойства при класифицирането

Тези свойства класифицират елементите в категории, още повече те задават специфични визуални параметри на елементите.

Свойствата list-style описват начина на форматиране на списъчните елементи(т.е. елементите, за които е зададена стойност 'list-item' на свойството 'display'). Този тип свойства могат да бъдат задавани за всеки елемент и ще се наследяват по нормалния начин, надолу в родословното му дърво. Тези свойства ще оказват ефект единствено на елементите, чиято стойност за свойството 'display' е 'list-item'. Такъв е елемента 'li' в HTML.

5.6.1    'display'(показване)

Стойност: block | inline | list-item | none
Първоначална стойност: block
Важи за: всички елементи
Наследимост: Не
Процентни стойности: N/A

Това свойство описва дали/как се показва елемента на платното(което може да е принтирана/разпечатана страница, компютърен екран и т.н.).

Елемента, стойността на свойството 'display', на който е установена на 'block' отваря нова кутия. Тя се разполага, в зависимост от съседните кутии, според модела на форматиране на CSS. Обикновено, елементи като 'h1' и 'p' са от тип блокови елементи. Стойността 'list-item' е подобна на 'block', като се изключи това, че се добавя маркер за елемент от списък. Елементът 'li' в HTML обикновено притежава тази стойност.

Елемент, за който е зададена стойност 'inline' на свойството 'display' става нова вътрешноредова кутия, която се намира на същия ред като предишното съдържание. Кутията се оразмерява в зависимост от форматирания размер на съдържанието. Ако то представлява текст, кутията може да обхваща няколко реда и на всеки ред ще има кутия. Свойствата поле, рамка и уплътнение са в сила при вътрешноредовите елементи(тези със стойност 'display' установена на 'inline'), но няма да окажат ефект при отделните редове.

Стойност 'none' на свойството 'display' премахва визуализирането на елемента, неговите дъщерни елементи и заобикалящата го кутия.

P { display: block }
EM { display: inline }
LI { display: list-item }
IMG { display: none }

Последното правило премахва визуализирането на изображенията в документа.

Първоначалната стойност на свойството 'display' e 'block', но браузъра обикновено има стойности по подразбиране за всички HTML елементи, в зависимост от предложеното в HTML спецификацията[2] изобразяване на елементите.

CSS1 същина: Браузърите могат да игнорират свойството 'display' и да използват единствено стойностите по подразбиране. (вижте глава 7)

5.6.2    'white-space'(бели пространства)

Стойност: normal | pre | nowrap
Първоначална стойност: normal
Важи за: блоковите елементи
Наследимост: Да
Процентни стойности: N/A

Това свойство задава начина, по който се третират белите пространства в даден елемент: по нормалния начин(стойност 'normal')(при който белите пространства се "сливат"), 'pre' начина(чието поведение е като на 'pre' елемента в HTML) или 'nowrap' начина(при който обгръщането се осъществява чрез елементи br):

PRE { white-space: pre }
P   { white-space: normal }

Първоначалната стойност на свойството 'white-space' е 'normal', но обикновено браузърите притежават стойности по подразбиране за всички HTML елемент, в зависимост от предложения в HTML спецификацията[2] начин за визуализиране на елементите.

CSS1 същина: Браузърите може да игнорират свойството 'white-space' в авторските и читателските стилови листа и вместо това да използват собствени стойности по подразбиране.(вижте глава 7.)

5.6.3    'list-style-type'(тип на стила на списъка)

Стойност: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none
Първоначална стойност: disc
Важи за: елементите, за които е зададена стойност 'list-item' на свойството 'display'
Наследимост: Да
Процентни стойности: N/A

Това стойство се използва, за да се определи външния вид на маркера на елементите от списък, ако стойността на свойството 'list-style-image' е 'none' или, ако изображението, което е посочено в адреса(url) не може да бъде показано.

OL { list-style-type: decimal }       /* 1 2 3 4 5 и т.н. */
OL { list-style-type: lower-alpha }   /* a b c d e и т.н. */
OL { list-style-type: lower-roman }   /* i ii iii iv v и т.н. */

5.6.4    'list-style-image'(изображение на списъка)

Стойност: <url> | none
Първоначална стойност: none
Важи за: елементите, за които е зададена стойност 'list-item' на свойството 'display'
Наследимост: Да
Процентни стойности: N/A

Това свойство задава изображението, което ще бъде използвано като маркер на елементите от списък. Когато изображението е достъпно, то ще замести, маркера, който е зададен чрез свойството 'list-style-type'.

UL { list-style-image: url(http://png.com/ellipse.png) }

5.6.5    'list-style-position'(позициониране на списъка)

Стойност: inside | outside
Първоначална стойност: outside
Важи за: елементите, за които е зададена стойност 'list-item' на свойството 'display'
Наследимост: Да
Процентни стойности: N/A

Стойността на свойството 'list-style-position' определя как се визуализира маркера на списъчните елементи, в зависимост от съдържанието. За пример на форматирането вижте глава 4.1.3.

5.6.6    'list-style'(стил на списъка)

Стойност: [disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none] || [inside | outside] || [<url> | none]
Първоначална стойност: такава не се дефинира при подобни свойства за "кратък" достъп
Важи за: елементи, за които е зададена стойност 'list-item' на свойството 'display'
Наследимост: Да
Процентни стойности: N/A

Свойството 'list-style' е свойство за кратък достъп, чрез което се задават стойностите на свойствата 'list-style-type', 'list-style-image' и 'list-style-position' на едно и също място в стиловия лист.

UL { list-style: upper-roman inside }
UL UL { list-style: circle outside }
LI.square { list-style: square }

Директното задаване на свойството 'list-style' при елементите 'li' може да доведе до неочаквани резултати. Вземете в предвид следния код:

  <STYLE TYPE="text/css">
    OL.alpha LI  { list-style: lower-alpha }
    UL LI        { list-style: disc }
  </STYLE>
  <BODY>
    <OL CLASS=alpha>
      <LI>level 1
      <UL>
         <LI>level 2
      </UL>
    </OL>
  </BODY>

Тъй като спецификата за първото правило(тази, която е дефинира в каскадния ред) на стиловия лист в горния пример ще надделее над второто правило за всички елементи 'li' и ще бъдат използвани само списъчните стилове 'list-alpha'. Следователно е препоръчително да се задава стойност на свойството 'list-type' за елементите от списък:

OL.alpha  { list-style: lower-alpha }
UL        { list-style: disc }

В горния пример, наследимостта ще предаде стойностите 'list-style' от елементите 'ol' и 'ul' на 'li' такивите.

Стойност за url може да бъде комбинирана с всяка друга стойност:

UL { list-style: url(http://png.com/ellipse.png) disc }

В горния пример, стила 'disc' ще бъде използван, когато изображението не е достъпно.