6.1 Jednostki miary

Format zapisu jednostek miary składa się z opcjonalnego znaku plus („+”) lub minus („-”), po którym następuje cyfra lub liczba (z przecinkiem lub bez przecinka) oraz określnik jednostki w postaci dwuliterowego skrótu. Określnik jednostki jest opcjonalny po cyfrze 0. Pomiędzy poszczególnymi członami nie może być spacji.

Dla niektórych własności dostępne są jednostki ujemne, ale ich zastosowanie może przyczynić się do nadmiernej komplikacji modelu formatowania, a także mogą wystąpić pewne ograniczenia implementacyjne. W przypadku braku obsługi jednostek ujemnych, powinny one być zaokrąglone do najbliższych obsługiwanych wartości.

Wyróżnia się dwa typy jednostek miary: jednostki względne i jednostki absolutne. Jednostki względne określają wielkość w odniesieniu do innych jednostek. Arkusze stylów zaprojektowane przy użyciu jednostek względnych łatwiej się skalują przy przenoszeniu z jednego medium na inne (np. z ekranu monitora do druku laserowego). Jednostki procentowe (opisane poniżej) i słowa kluczowe (np. x-large) posiadają podobne zalety.

Obsługiwane są następujące jednostki względne:

H1 { margin: 0.5em }      /* em oznacza, że margines będzie miał taki sam
                             rozmiar jak połowa wielkości czcionki tego
                             elementu */
H1 { margin: 1ex }        /* x-height, ~ wysokość litery x */
P  { font-size: 12px }    /* piksele - zależne od obszaru roboczego */

Jednostki względne em i ex zależne są od rozmiaru czcionki zastosowanej dla danego elementu. Jedynym wyjątkiem od tej reguły w CSS1 jest własność font-size, której wartości wyrażone przy pomocy jednostek względnych em lub ex odnoszą się do rozmiaru czcionki elementu rodzica.

Jednostki pikselowe, które zostały użyte w ostatniej regule, są zależne od rozdzielczości obszaru roboczego - najczęściej ekranu monitora. Jeżeli różnica pomiędzy rozdzielczością urządzenia wyjściowego i typową rozdzielczością monitora jest bardzo duża, to aplikacja kliencka powinna dokonać przeskalowania rozmiaru pikseli. Sugerowany piksel odniesienia to kąt z jakiego można zobaczyć jeden piksel na urządzeniu o rozdzielczości 90dpi i przy odległości od ekranu na wyciągnięcie ręki. Przy założeniu, że typowa długość ręki to około 70 cm, kąt widzenia wynosi 0,0227 stopnia.

Elementy dziecka dziedziczą wartość wyliczoną, a nie wartość względną:

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

W powyższym przykładzie wartość własności text-indent dla elementu H1 wynosi 36pt, a nie 45pt.

Jednostki absolutne przydatne są tylko w sytuacji, gdy znany jest rodzaj medium wyjściowego. Obsługiwane są następujące jednostki absolutne:

H1 { margin: 0.5in }      /* cale, 1 cal = 2.54cm */
H2 { line-height: 3cm }   /* centymetry */
H3 { word-spacing: 4mm }  /* millimetry */
H4 { font-size: 12pt }    /* punkty, 1pt = 1/72 cala */
H4 { font-size: 1pc }     /* picas (kwadraty), 1pc = 12pt (więcej) */

Jeżeli zastosowana jednostka nie jest obsługiwana, klient powinien dokonać próby zaokrąglenia. Pozostałe obliczenia dotyczące poszczególnych wartości powinny być wykonywane z uwzględnieniem już zaokrąglonej wartości.

6.2 Jednostki procentowe

Format zapisu wartości przy użyciu jednostek procentowych składa się z opcjonalnego znaku + lub - (+ jest znakiem domyślnym), bezpośrednio po którym następuje liczba lub cyfra (z przecinkiem lub bez przecinka) z towarzyszącym jej znakiem %.

Wartości procentowe zawsze zależne są od innych wartości, np. od jednostek długości. Dla każdej własności, dla której dozwolone są wartości procentowe, określono także wartość, do której ten procent się odnosi. Najczęściej jest nią wartość rozmiaru czcionki elementu, do którego ta wartość się odnosi:

P { line-height: 120% }   /* 120% wartości własności font-size */

Elementy dziecka dziedziczą od rodzica wartość uzyskaną w wyniku dokonania nizebędnych obliczeń, a nie wartość procentową. Zasada ta dotyczy wszystkich dziedziczonych własności CSS 1, dla których zdefiniowano wartość procentową.

6.3 Jednostki kolorów

Są dwa sposoby definiowania kolorów: przy pomocy słów kluczowych lub wartości RGB.

Lista sugerowanych słów kluczowych przedstawia się następująco: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, oraz yellow. Wszystkie te słowa pochodzą z 16 kolorowej palety Windows VGA i brak ich odpowiedników w postaci RGB w tej specyfikacji.

* Aby sprawdzić znaczenie danego słowa kluczowego należy najechać na nie kursorem i chwilę zaczekać.

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

Model RGB bazuje na kilku sposobach numerycznej prezentacji kolorów. Wszystkie poniższe przykłady definiują ten sam kolor:

EM { color: #f00 }              /* #rgb */
EM { color: #ff0000 }           /* #rrggbb */
EM { color: rgb(255,0,0) }      /* liczby całkowite w przedziale 0 - 255 */
EM { color: rgb(100%, 0%, 0%) } /* liczby zmiennoprzecinkowe
                                   w przedziale 0.0% - 100.0% */

Format wartości RGB w notacji szesnastkowej (heksadecymalnej) składa się ze znaku #, bezpośrednio po którym następują trzy lub sześć znaków alfanumerycznych. Notacja trzyznakowa (#rgb) jest przekształcana w notację sześcioznakową przy pomocy duplikacji poszczególnych znaków (a nie dodawania zer). Na przykład: wartość #fb0 zostanie przekształcona na wartość #ffbb00. Dzięki tej metodzie kolor biały (#ffffff) można krótko zapisać w postaci #fff oraz można uniknąć zależności od dostępnej głębi kolorów.

Format zapisu wartości RGB w notacji funkcjonalnej składa się z łańcucha rgb(, po którym następuje lista trzech wartości numerycznych oddzielonych przecinkami (mogą to być, albo liczby całkowite ze zbioru 0-255, albo wartości procentowe ze zbioru 0.0% - 100.0%) oraz zamknięcia nawiasu okrągłego - ). Wokół wartości numerycznych mogą występować białe znaki.

Wartości spoza dozwolonego zbioru powinny być zaokrąglane do najbliższej dozwolonej wartości. Wszystkie trzy reguły w poniższym przykładzie są równoważne:

EM { color: rgb(255,0,0) }       /* zbiór liczb całkowitych 0 - 255 */
EM { color: rgb(300,0,0) }       /* zaokrąglone do 255 */
EM { color: rgb(110%, 0%, 0%) }  /* zaokrąglone do 100% */

Kolory RGB zdefiniowano w przestrzeni kolorów sRGB [9]. Wierność odwzorowywania tych kolorów może być różna u różnych klientów, ale zastosowanie tej przestrzeni zapewnia jednoznaczność i obiektywną definicję koloru, o który chodzi, z możliwością odniesienia się do standardów międzynarodowych [10].

Aplikacje klienckie mogą ograniczyć się do zastosowania korekcji gamma do określonych kolorów.Przestrzeń sRGB określa, w określonych warunkach, współczynnik gamma na poziomie 2.2. Aplikacje klienckie dostosowują kolory określone przez CSS w taki sposób, że w połączeniu z naturalnym współczynnikiem gamma urządzenia, efektywny współczynnik gamma wynosi 2.2. Więcej szczegółów na ten temat znajduje się w Dodatku D. Należy pamiętać również, że powyższym zasadom nie podlegają obrazy graficzne.

6.4 URL

Notacja funkcjonalna służąca do określania adresów URL (ang. Uniform Resource Locator) jest następująca:

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

Format zapisu wartości URL składa się z łańcucha url(, po którym następuje opcjonalny biały znak oraz znak apostrofu lub cudzysłowu, a dopiero po nim właściwy adres URL (patrz [11]). Całość zamknięta jest okrągłym nawiasem ). Znaki cudzysłowów, które nie należą do adresu URL muszą występować parami.

Nawiasy okrągłe, przecinki, białe znaki, apostrofy oraz cudzysłowy w adresach URL muszą być zapisywane przy użyciu lewego ukośnika: (, ), ,.

Adresy niepełne interpretowane są względem lokalizacji arkusza stylów, a nie dokumnetu, do którego został on dołączony.

BODY { background: url(yellow) }

Niniejszy dokument jest tłumaczeniem rekomendacji W3C Cascading Style Sheets, level 1. Tłumaczenie to nie ma statusu dokumentu normatywnego i może zawierać błędy wynikające z tłumaczenia. Tylko dokument znajdujący się na stronie W3C pod adresem http://www.w3.org/TR/REC-CSS1 ma charakter normatywny.

Copyright © 2004 W3C^® (MIT, ERCIM, Keio), Wszystkie prawa zastrzeżone. W3C stosuje następujące zasady dotyczące odpowiedzialności cywilnej, znaku towarowego, używania dokumentu i licencji oprogramowania.