CSS vahidləri

Bu məqalədə CSS-də istifadə edilən vahidlərlə tanış olacağıq. Vahidlər adətən məsafə və rəngləri təyin etmək üçün istifadə edilir.

Vahidləri dörd qrupa ayıra bilərik: uzunluq vahidləri, faiz vahidləri, rəng vahidləriURL vahidləri

Uzunluq Vahidləri
CSS-də təyin olunan 8 uzunluq vahidi vardır. Bunların üçü nisbi (relative) uzunluqlar və qalan beşi mütləq (absolute) uzunluqlardır.
 
Nisbi Uzunluqlar
Bu vahidlər digər uzunluq vahidlərinə görə nisbidir. Səhifələrimizin ölçüsünün dəyişdiyi və ya çap olunduğu vəziyyətlərdə bu uzunluq vahidlərini istifadə etməyimiz bizə üstünlük gətirəcəkdir.

em: Ana (əsas) elementin şrift boyunun (font-size) dəyərinə görə hesablanaraq tapılır. Yəni body elementində fərz edilən yazı tipi böyüklüyünə bağlı olaraq böyümə-kiçilmə göstərən ölçülərdir. em fərz edilən şrift böyüklüyündə və şrift ailəsində (font-family) olan "M" hərfinin genişliyini əsas götürür.

ex: Elementin "x" hərfinin yüksəkliyidir. Təyin edilmiş olan şriftin kiçik "x" dəyəri yüksəkliyidir.

px: piksel dəyəri. Əgər monitorunuza kifayət qədər yaxından baxsanız, çox kiçik nöqtələrdən ibarət olduğunu görərsiniz. Buradakı hər nöqtə bir pikseldir. Bu da hər monitora görə fərqli dəyər deməkdir.
 
Mütləq Uzunluqlar
Bu uzunluqlar gerçək həyatda istifadə edilən vahidlərdir.

in: Düym (inch). 1 inch=2,54 sm-dir. Məsələn: line-height:0.5in

sm: Santimetr. Bizim gerçək həyatda istifadə etdiyimiz santimetr dəyəridir. Məsələn: margin:2cm

mm: Millimetr. Bizim gerçək həyatda istifadə etdiyimiz milimetr dəyəridir. Məsələn: letter-spacing:1mm

pt: Point. Standart nəşr vahididir. (1pt = 1/72in) Məsələn: font-size:14pt

pc: Pika. Bir düymün altıda birinə bərabər olan bir nəşr ölçü vahididir. Bir pika 12 nöqtəyə bölünür. Məsələn: font-size: 2pc
 
Faiz Vahidləri
Faiz dəyərləri həmişə digər elementlərə görə nisbi dəyərlərdir.
 /* elementin font-size dəyərinin 150 faizidir */
h4 { 
    line-height: 150% 
}
/* sətir genişliyinin 10 faizidir */
p { 
    text-indent: 10% 
}
 
Rəng Vahidləri
CSS-də rəng dəyərləri ad olaraq və RGB dəyəri olaraq təyin oluna bilər.

Rəng Adları
Rənglərin ingiliscə adları istifadə edilərək təyin etmə edilə bilər.
p {
    color:black; 
} /* rəngi qara edəcəkdir*/


h1{ 
    background-color: red;
} /* h1 başlığının fonunu qırmızı edəcəkdir */
 
RGB Rəng Dəyərləri
CSS-də rəng təyin etmək üçün istifadə edilən əsas üsul budur. RGB təyin etmə də öz növbəsində dörd növə bölünür.

#RRGGBB: Burada, RR, GG, və BB növbəylə qırmızı (red), yaşıl (green) və mavi (blue) rənglərin cəmi - rəng içindəki sıxlığını göstərən heksadesimal ədədlərdir. Məsələn: color: #ff0000; (qırmızı)

#RGB: Yuxarıdakı üsulun qısaltmasıdır. Eyni dəyərləri daşıyan qrup dəyərləri birləşdirilir. Məsələn: color: #f00; (qırmızı)

rgb(R,G,B): Burada RGB rənglərinin onluq say sistemində 0 ilə 255 arasında bir tərifi vardır. Buna görə təyin etmə edilə bilər. Məsələn: color: rgb(255,0,0) (qırmızı)

rgb(R%,G%,B%): Burada RGB rənglərinin faiz olaraq %0 ilə %100 arasında bir tərifi vardır. Buna görə təyin etmə edilir. Nümunə: color: rgb(100%,0%,0%) (qırmızı)
 
URL Dəyərləri
Bunun üçün aşağıdakı kimi təyin etmə edilir.
url(/images/kicik.gif)
Burada dırnaqsız və tək dırnaqlı istifadələri də standarta uyğundur.
CSS3