Css Ölçü Birimleri

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.

Css Ölçü Birimleri:

  1. Bağıl(Göreceli) Uzunluk Birimleri
    • em
    • ex
    • px (Piksel)
    • % (Yüzde)
  2. Kesin Uzunluk Birimleri
    • in (inç)
    • cm (Santimetre)
    • mm (Milimetre)
    • pt (Point)
    • pc (Pika)

1. Bağıl (Göreceli) Uzunluk Birimleri

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.

em Uzunluk Birimi

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)

em Uzunluk Birimi Kullanımı Örneği:

<style type="text/css">

.em_ornek{font-size: 2em;}

</style>

Kodu Çalıştır

ex Uzunluk Birimi

Seçilen yazı tipinde harfinin yüksekliğine göre işlem yapmaktadır. 

ex Uzunluk Birimi Kullanımı Örneği:

<style type="text/css">

.ex_ornek{font-size:1ex;}

</style>

Kodu Çalıştır

px(piksel) Uzunluk Birimi

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.

px(piksel) Uzunluk Birimi Kullanımı Örneği:

<style type="text/css">

.px_ornek{font-size:32px;}

</style>

Kodu Çalıştır

% (Yüzde) Uzunluk Birimi

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.

% (Yüzde) Uzunluk Birimi Kullanımı Örneği:

<style type="text/css">

.yuzde_ornek1{font-size:100%;}

.yuzde_ornek2{font-size:62.5%;}

</style>

Kodu Çalıştır

2. Kesin Uzunluk Birimleri

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. 

in(İnç) Uzunluk Birimi

İnç (Inch) uzunluğunu ifade etmektedir. 1 inç 2,54 santimetredir. İnç'in simgesi in'dir.

in(İnç) Uzunluk Birimi Kullanımı Örneği:

<style type="text/css">

.in_ornek{font-size:1in;}

</style>

Kodu Çalıştır

cm(Santimetre) Uzunluk Birimi

Santimetre uzunluk birimi günlük hayatta kullandığımız santimetre değerini ifade etmektedir. Santimetre'nin simgesi cm'dir.

cm(Santimetre) Uzunluk Birimi Kullanımı Örneği:

<style type="text/css">

.cm_ornek{font-size:2cm;}

</style>

Kodu Çalıştır

mm(Milimetre) Uzunluk Birimi

Milimetre uzunluk birimi günlük hayatta kullandığımız milimetre değerini ifade etmektedir. Milimetrenin simgesi mm'dir.

mm(Milimetre) Uzunluk Birimi Kullanımı Örneği:

<style type="text/css">

.mm_ornek{font-size:5mm;}

</style>

Kodu Çalıştır

pt(Point) Uzunluk Birimi

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.

pt(Point-Punto) Uzunluk Birimi Kullanımı Örneği:

<style type="text/css">

.pt_ornek{font-size:72pt;}

</style>

Kodu Çalıştır

pc(Pika) Uzunluk Birimi

1 Pika uzunluk birimi inç değerinin altıda biri olarak ifade edilmektedir. Pika'nın simgesi pc 'dir.

pc(Pika) Uzunluk Birimi Kullanımı Örneği:

<style type="text/css">

.pc_ornek{font-size:6pc;}

</style>

Kodu Çalıştır

Önceki Ders: Css Nasıl Kullanılır? Sonraki Ders: Css Renk Kodları