Css dilinde sayfamızda bulunan nesnelerin boyutlarını, nesneler arasındaki mesafeleri ayarlamamız gerekmektedir. Bu işlemleri yapmak için ölçü birimleri kullanmamız gerekmektedir. Örneğin: iki ev arasındaki mesafeyi nasıl metre ile ölçüyorsak iki html ögesi arasındaki mesafeleride bilgisayarda en çok duyduğumuz pixel ile ölçüyoruz.
Şimdi Css dilinde kullandığımız ölçü birimlerini maddeler halinde verelim ve detaylı şekilde anlatalım.
Bağıl, göreceli uzunluk biriminde bağıl kelimesinin anlamını bildiğimizde konuyu biraz daha çözmüş oluyoruz. Bağıl: Başka bir nesnenin varlığına bağlı olan anlamına gelmektedir.
em, ex, px ve % birimleri bağıl (göreceli) uzunluk birimleridir. Bu em, ex, px ve % birimleri diğer uzunluk birimlerine bağlı olarak değişiklik göstermektedirler. Yani diğer nesnelere bağlı olarak hareket etmektedirler.
Seçilen yazı tipinde m harfinin genişliğine göre işlem yapmaktadır.
Bütün tarayıcılarda varsayılan yazı büyüklüğü 16 piksel'dir.
Bilgi: 1 em = 16 px (piksel)
<style type="text/css">
.em_ornek{font-size: 2em;}
</style>
Seçilen yazı tipinde x harfinin yüksekliğine göre işlem yapmaktadır.
<style type="text/css">
.ex_ornek{font-size:1ex;}
</style>
Bilgisayar ekranında kontrol edilebilen en küçük noktalara piksel denir. Bir piksel ana renkler olan RGB(Red Green Blue) yani kırmızı, yeşil ve mavi renklerinin karışımından oluşur.
Pikseller ekran çözünürlüğüne göre değişmektedir. Ekran çözünürlüğüne göre değişen piksellerden bir tanesinin yüksekliğine göre işlem yapmaktadır.
<style type="text/css">
.px_ornek{font-size:32px;}
</style>
Bilgisayar ekranının genişliğine göre hareket eden birimdir. %100 sayfanın tamamını kaplamaktadır.
%100 yazı boyutlarında 16 piksel'e denk gelmektedir. %62.5 ise 12 piksel'e karşılık gelmektedir.
<style type="text/css">
.yuzde_ornek1{font-size:100%;}
.yuzde_ornek2{font-size:62.5%;}
</style>
Diğer nesnelere göre değişmeyen uzunluk birimlerine kesin uzunluk birimleri denir. in(inç), cm(Santimetre), mm(Milimetre), pt(Point), pc(Pika) kesin uzunluk birimlerindendir.
İnç (Inch) uzunluğunu ifade etmektedir. 1 inç 2,54 santimetredir. İnç'in simgesi in'dir.
<style type="text/css">
.in_ornek{font-size:1in;}
</style>
Santimetre uzunluk birimi günlük hayatta kullandığımız santimetre değerini ifade etmektedir. Santimetre'nin simgesi cm'dir.
<style type="text/css">
.cm_ornek{font-size:2cm;}
</style>
Milimetre uzunluk birimi günlük hayatta kullandığımız milimetre değerini ifade etmektedir. Milimetrenin simgesi mm'dir.
<style type="text/css">
.mm_ornek{font-size:5mm;}
</style>
Point (punto) olarak geçmektedir. İnç değerinin yetmişiki'de birini ifade etmektedir yani 1pt=1/72 inç'dir. Point'in simgesi pt'dir.
<style type="text/css">
.pt_ornek{font-size:72pt;}
</style>
1 Pika uzunluk birimi inç değerinin altıda biri olarak ifade edilmektedir. Pika'nın simgesi pc 'dir.
<style type="text/css">
.pc_ornek{font-size:6pc;}
</style>
| Önceki Ders: Css Nasıl Kullanılır? | Sonraki Ders: Css Renkler |