Merhaba,

CSS’de ölçü ile alakalı bir çok özellik bulunmaktadır. Örnek olarak:

font-size : Yazı ölçüsünü belirtir.

margin : Öğeler arasındaki mesafeyi belirtir.

left / right / top / bottom : öğelerin pozisyonunu belirtir.

Kullanılan değerler olarak da bunlar örnek verilebilir:

px : pixel değerinden

% : yüzdelik oran üzerinden

Pikseller

Bilgisayar ekranları pikselleri kullanır. CSS’de de en yaygın olarak piksel birimi kullanır. Genişlik, yükseklik, yazı boyutu gibi bir çok ölçü için kullanılabilir. Aynı zamanda öğelerin pozisyonunu belirtirken veya boşlukları için de kullanılabilir.

header { width: 400px; }
p { font-size: 16px; }

Pikseller mutlak değerleri tanımlar. Bu sebeple piksel ile ölçüsü belirtilen bir öğe etrafındaki diğer öğelerin ölçülerinden etkilenmez.

Yüzdeler

Yüzde ölçüleri görecelidir, üst öğelerine göre hareket ederler. Örnek vermek gerekirse <p> etiketi <body> sınırları boyunca tam genişliktedir. Biz tam genişlikte değil de <body> sınırlarının yarısı kadarını kaplamasını istersek:

p { width: 50%; }

Veya yazı ölçülerini de etkileyebiliriz:

strong{ font-size: 150%; }
<p>İnsanın <strong>özü</strong> ne ise, <strong>gözü</strong> de onu görür.</p>

Görünümü:

Em Birimi

Em birimi de görecelidir. Üst elementin yazı tipi boyutuna göre hareket eder.

Örnek vermek gerekirse, üst elementin font ölçüsü 20px ve siz elemente font-size: 0.8em ölçüsü uyguladınız. O halde uyguladığınız öğe 16px ölçüsünde görünecektir.

em birimini kullanarak birbiriyle orantılı başlık – metin birleşimleri yapabilirsiniz. Örnek olarak <h1> boyutunu <body> ‘e ait standart yazı boyutunun 2 katı, <h2> boyutunu da 1.5 katı yapalım.

body{ font-size: 16px; } 
h1{ font-size: 2em; } /* 32px ölçüsünde olacaktır */ 
h2{ font-size: 1.5em;} /* 24px ölçüsünde olacaktır */

Tüm kullandığımız yazı etiketlerini bu şekilde ölçekleyerek kullandığımızda, web sitemizdeki yazıların ölçülerini orantılı bir şekilde büyütüp küçültmek için sadece <body> etiketimizin ölçüsünü değiştirmemiz yeterli olacaktır.

Rem Birimi

Rem birimi em birimine benzer mantıkta çalışır. Fakat rem standart olarak <html> etiketinin değerini baz alarak çalışır.

html{ font-size: 18px;}
body{ font-size: 1rem;}     /* 18px olarak görünür */
h1{ font-size: 2rem;}       /* 36px olarak görünür */
h2{ font-size: 1.5rem;}     /* 27px olarak görünür */

Burada tüm ölçüler <html> etiketi baz alınarak şekillenmiştir. Şimdi örnek olarak 2em değeri ile 2rem değeri arasındaki farka bakalım.

html{ font-size: 20px; }
p{ font-size: 0.8rem; }        /* 16px olarak görünür */
p span{ font-size: 2em; }      /* 16px * 2 = 32px olarak görünür*/
p strong{ font-size: 2rem; }   /* 20px * 2 = 40px olarak görünür*/

Örneği açıklayacak olursak,

  • <p> etiketi 0.8rem olarak belirtildiği için <html> ‘in 20px ölçüsünü 0.8 oranında alır ve 16px olarak görünür.
  • <span> etiketi 2em ölçüsünde belirtilmiştir.<p> içerisinde kullanıldığı zaman, em birimi <p> etiketinin değerini baz alacağı için 32px olarak görünür.
  • <strong> etiketi ise 2rem ölçüsünde belirtilmiştir. Nerede kullanılırsa kullanılsın, rem birimi <html> etiketini ölçü olarak kabul ettiğinden 40px olarak görünür.

Henüz CSS detaylarını tam öğrenmediğimiz için piksel birimini kullanarak başlamak en pratiği olacaktır. İlerleyen aşamalarda ihtiyaç duyduğumuz durumlara göre diğer birimleri de kullanabilirsiniz.