6    Мерни единици

6.1    Мерки за дължина

Видът на мярката за дължина е незадължителен символ('+' или '-' като '+' е този по подразбиране), последван от число(с или без десетична запетая), което от своя страна е последвано от идентификатор за мерни единици(двубуквено съкращение). След поставяне на числото '0', идентификатора на мерни единици е незадължителен.

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

Съществуват два типа мерки за дължина: относителни и абсолютни. Относителните мерки определят дължина, която е относителна спрямо друго свойство, на което е зададена дължина. Стиловите листа, които използват относителни мерки много по-лесно ще бъдат мащабирани от една медия към друга(например от компютърен монитор към лазерен принтер). Процентните мерки(описани по-долу) и ключовите стойности(например 'x-large') предлагат подобни предимства.

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

H1 { margin: 0.5em }      /* em-ове, височината на шрифта на елемента */
H1 { margin: 1ex }        /* x-height, височината на буквата 'x' */
P  { font-size: 12px }    /* пиксели, относителни спрямо платното */

Относителните мерки 'em' и 'ex' са относителни спрямо размера на шрифта на самия елемент. Единственото изключение от това правило в CSS1 е свойството 'font-size', където 'em' и 'ex' стойностите са относителни спрямо размера на шрифта на родителския елемент.

Пикселните мерки, като тези, използвани в последното правило, са относителни спрямо разделителната способност(резолюцията) на платното, т.е. в най-често срещания случай, компютърния екран. Ако гъстотата на пикселите на изходното устройство е много по-различна от тази при компютърен монитор, браузъра трябва да премащабира пикселните стойности. Предложеният пиксел-справка е визуалния ъгъл на един пиксел на дадено устройство с гъстота на пикселите, равна на 90dpi(dots per inch) и разстояние до читателя, равно на една ръка разстояние. За номинална(фиктивна) дължина на една ръка, равна на 28 инча, визуалния ъгъл е равен на приблизително 0.0227 градуса.

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

BODY {
  font-size: 12pt;
  text-indent: 3em;  /* т.е. 36pt */
}
H1 { font-size: 15pt }

В горния пример стойността на свойството 'text-indent' на елементите 'h1' ще бъде 36pt(36 пункта), а не 45pt.

Мерките за абсолютна дължина са полезни, единствено, когато физическите свойства на изходното устройство се знаят. Поддържат се следните абсолютни мерки:

H1 { margin: 0.5in }      /* инчове, 1in = 2.54cm */
H2 { line-height: 3cm }   /* сантиметри */
H3 { word-spacing: 4mm }  /* милиметри */
H4 { font-size: 12pt }    /* пунктове, 1pt = 1/72in */
H4 { font-size: 1pc }     /* пики, 1pc = 12pt */

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

6.2    Процентни мерки

Форматът на процентната стойност е незадължителен символен знак('+' или '-', като '+' е символа по подразбиране), последван от число(с или без десетична запетая), което от своя страна е последвано от символа '%'.

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

P { line-height: 120% }   /* 120% от стойността на свойството 'font-size' на елемента */

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

6.3    Цветови мерни единици

Цветът може да бъде или ключова дума или бройна RGB спецификация.

Препоръчителния списък от ключови думи за имена на цветове е следния: aqua(аква), black(черен), blue(син), fuchsia, gray(сив), green(зелен), lime(цвят-варовик), maroon(кестеняв), navy(светло-син), olive(маслинен), purple(лилав), red(червен), silver(сребрист), teal, white(бял) и yellow(жълт). Тези 16 цвята са взети от Windows VGA палитрата и техните RGB стойности не са дефинирани в тази спецификация.

BODY {color: black; background: white }
H1 { color: maroon }
H2 { color: olive }

При числовите означения на цвят се използва цветовия модел RGB. Всичките примери по-долу задават един и същи цвят:

EM { color: #f00 }              /* #rgb */
EM { color: #ff0000 }           /* #rrggbb */
EM { color: rgb(255,0,0) }      /* целочислена стойност в обхвата 0 - 255 */
EM { color: rgb(100%, 0%, 0%) } /* плаващ обхват от 0.0% до 100.0% */

Формата на RGB стойността в шестнадесетичната бройна система е символа '#', последван от три или шест шестнадесетични знака. Трицифрената RGB система за обозначение(#rgb) се превръща в шестцифрена форма(#rrggbb), чрез копиране на цифрите, а не чрез добавяне на нулеви стойности. Например, #fb0 става #ffbb00. Това гарантира, че белия цвят(#ffffff) може да бъде зададен чрез кратката система за обозначение(#fff) и всички зависимости с дълбочината на цвета на монитора биват премахнати.

Формата на RGB стойността в функционалния тип обозначение е 'rgb(последван от разделен със запетая списък от три числови стойности(или три целочислени стойности в областта от 0 до 255, или три процентни стойности в областта от 0.0% до 100.0%), последвани от символа ')'. Символите за празно място около числовите стойности са позволени.

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

EM { color: rgb(255,0,0) }       /* числа от целочислената област от 0 до 255 */
EM { color: rgb(300,0,0) }       /* стойността 300 се приближава към 255 */
EM { color: rgb(110%, 0%, 0%) }  /* стойността 110% се приближава към 100% */

RGB цветовете са дефинирани в sRGB цветовото пространство[9]. Точността на представяне на тези цветове, може да бъде различна при различните браузъри, но употребата на sRGB осигурява ясна и обективно измерима дефиниция за това, какво трябва да представлява цвета, която може да бъде свързана с международните стандарти[10].

Браузърите могат да поставят ограничения пред себе си при визуализирането на цветове, чрез осъществяване на гама-корекции по тях. sRGB цветовото пространство задава гама стойност, равна на 2.2 под определени зрителни условия. Браузърите настройват цветовете, зададени в CSS, така че в комбинация с естествената гама стойност на изходното устройство, да се получава действаща гама стойност от 2.2. Приложение D обяснява по-подробно този въпрос. Нужно е да се отбележи, че единствено цветовете, зададени чрез CSS се влияят от това; например при изобаженията се очаква да притежават своя-собствена цветова информация.

6.4    URL

Uniform Resource Locator(URL) се идентифицира чрез функционално обозначение:

BODY { background: url(http://www.bg.com/pinkish.gif) }

Форматът на стойността URL е 'url(последван от незадължителен символ за празно място и незадължителна единичен знак за кавички(') или такъв за двойни кавички("), последван от самия url адрес(така, както се дефинира в [11]) , който от своя страна е последван от незадължителен единичен знак за кавички(') или такъв за двойни кавички("), последван от незадължително празно място и символа ')'. Символите за кавички, които не са част от самия url адрес, трябва да бъдат с еднакъв брой.

Кръглите скоби, запетаите, символите за празно място, единичните кавички(') и двойните кавички("), които се срещат в url адреса трябва да бъдат затваряни чрез обратна наклонена черта(backslash, \): '\(', '\)', '\,'.

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

BODY { background: url(yellow) }