Bu makalede CSS’de
kullanılan tüm birimleri göreceğiz. Birimler genelde mesafe ve
renkleri tanımlamak için kullanılır. Birimleri dört gruba ayıra
biliriz. uzunluk birimleri, yüzde
birimleri, renk birimleri ve URL
birimleri
Uzunluk Birimleri
CSS’de tanımlanan 8
uzunluk birimi vardır. Bunların üç tanesi göreceli(relative)
uzunluklar ve kalan beş tanesi kesin(absolute)uzunluklardır.
Göreceli
Uzunluklar
Bu birimler diğer uzunluk
birimlerine göre görecelidir. Sayfalarımızın ölçeğinin değiştiği ve
çıktısının alındığı durumlarda bu uzunluk birimlerini kullanmamız
bize avantaj sağlayacaktır.
em:
Elementin fontunun yüksekliğidir. Mesela font-size değeri 14 px
olarak atanmış ise 1em 14piksel eşit demektir.
ex:
Elementin "x" harfinin yüksekliğidir. Atanmış olan fontun küçük "x"
değeri yüksekliğidir.
px:
piksel değeri. Eğer monitörünüze yeterince yakından bakarsanız, çok
küçük kutulardan oluşmuş bir ızgaraya benzer. Burdaki her kutu bir
pikseldir. Bu da her monitöre göre farklı değer demektir.
Kesin Uzunluklar
Bu uzunluklar gerçek
hayatta kullanılan birimlerdir.
in: inç.
1 inch=2,54 cm’dir. Örn: line-height:0.5in
cm:
Santimetre. Bizim gerçek hayatta kullandığımız santimetere
değeridir. Örnek: margin:2cm
mm:
Milimetre. Bizim gerçek hayatta kullandığımız milimetere değeridir.
Örnek: letter-spacing:1mm
pt:
Point. Standart baskı birimidir. (1pt = 1/72in) Örn: font-size:14pt
pc: Pika.
Bir inçin altıda birine eşit olan bir baskı ölçü birimi. Bir pika 12
noktaya bölünür. Örnek: font-size:2pc
Yüzde Birimleri
Yüzde değerleri her zaman
diğer elementlere göre göreceli değerlerdir.
/* elementin font-size
değerinin %150 si dir */
h4 { line-height: 150%
}
/* satır genişliğinin
10% nu */
p { text-indent: 10% }
Renk Birimleri
CSS’de renk değerleri
isim olarak ve RGB değeri olarak tanımlanabilir. RGB tanımlamasıda
dört çeşittir.
Renk İsimleri
Renklerin ingilizce
isimleri kullanılarak tanımlama yapılabilir.
p {color:black; } /*
renk tanımı siyah olarak yapılıyor*/
h1{ background-color:
red;} /* h1 başlığının ardalanı kırmızı tanımlanıyor */
RGB Renk
Değerleri
CSS’de renk tanımlamak
için kullanılan asıl yöntem budur. RGB tanımlamanında dört çeşidi
vardır.
#RRGGBB :
Burada, RR, GG, ve BB,
sırasıyla kırmızı (red), yeşil (green) ve
mavi (blue) renklerin toplam renk içindeki yoğunluğunu gösteren
hekzadesimal sayılardır. Örnek: color:#ff0000; (kırmızı)
#RGB:
Yukardaki yöntemin kısaltmasıdır. Aynı değerleri taşıyan grup
değerleri birleştirilir. Örnek: color:f00; (kırmızı)
rgb(R,G,B):
Bu RGB renklerinin ondalık sayma düzeninde 0 ile 255
arasında bir tanımı vardır. Buna göre tanımlama yapılabilir. Örnek
h1 {color: #BF7F7F;}
rgb(R%,G%,B%):
Bu RGB renklerinin yüzdesel olarak %0 ile %100 arasında bir
tanımı vardır. Buna göre tanımlama yapılır. Örnek: h1 {color: rgb(75%,0%,0%);}
URL Değerleri
URL tanımlaması için
aşağıdaki gib bir tanımlama yapılır.
url("https://www.hanci.org/images/kucuk.gif")
Burada tırnaksız ve tek
tırnaklı kullanımları da standarda uygundur.
Not :
Birde bunların dışında CSS2.0 ile birlikte gelen ekstra birimlerde
mevcuttur. Ancak bunlar kullanımda değildir.
Açı Değerleri :
deg(derece), grad(gradyen) ve
rad(radyan) Örnek: -90deg, 100grad ve 1.57rad
Zaman Değerleri:
milisaniye (ms) ve saniye (s)
Örnek : 100ms ve 0.1s
Frekans Değerleri
: Herz(Hz) ve MegaHerz(mHz) Örnek:
10mHz