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.
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: rgb(191,127,127);}
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("http://www.fatihhayrioglu.com/images/kucuk.gif")
Burda 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
CSS Birimleri
Normal
