CSS Birimleri
CSS'te uzunluğu, genişliği, yüksekliği, kenar boşluğunu, metin büyüklüğünu vb. ifade etmek için farklı birkaç ölçü birimi kullanılmaktadır.
font-size, height, margin gibi birçok css değeri uzunluk ölçü birimi değeri almaktadır.
Piksel Ölçü Birimi
h1{
font-size:48px;
padding:10px;
}
p{
font-size:18px;
line-height:22px;
margin-bottom:5px;
letter-spacing:1px;
margin-top:0;
}
ölçü birimi değeri eklerken sayı ile birim arasında boşluk bırakılmaz.
margin, top, bottom gibi css özellikleri -20px gibi negatif uzunluk değeri alabilirler.
CSS'te kullanılan 2 tür uzunluk birimi vardır. Absolute (mutlak) uzunluk birimi ve relative (göreceli) uzunluk birimi
Mutlak (Absolute) Uzunluk Birimleri
Mutlak uzunluk birimlerinin genellikle sabit olduğu ve başka durumlara göre değişmediği kabul edilir.
| Birim | İsim | Eşitliği |
|---|---|---|
| in | İnç | 1in = 96px |
| px | Piksel | 1px = 1in/96 |
| cm | Santimetre | 1cm = 37.8px |
| mm | milimetre | 1mm = 1cm/10 |
| pt | punto | 1pt = 1in/72 |
Not : Mutlak uzunluk birimlerinin çoğu baskı için daha uygundur. web geliştiricler ölçeklendirme açısından daha kullanışlı olduğu için göreceli uzunluk birimlerini daha çok tercih etmektedir.
Göreceli (Relative) Uzunluk Birimleri
Göreceli uzunluk birimleri iyi bir planlama ile daha kolay ölçeklenebilir ve boyutlandırılabilir. Bu açıdan web için daha uygundur.
Aşağıdaki tabloda en çok tercih edilen relative uzunluk birimlerini inceleyebilirsiniz.
| Birim | Açıklama |
|---|---|
| em | em boyutu belgenin yazı tipi büyüklüğüne bağlıdır. Örneğin body{font-size:16px;} ise 2em = 32px olacaktır. |
| rem | rem boyutu ize kök dizinin yazı büyüklüğüne bağlıdır. Örneğin html{font-size:10px;} ise 2rem = 20px olacaktır. |
| % | Ebeveyn öğeye bağlı olarak değişir. |
| vh | viewport height yani görüntü alanı yüksekliğine bağlı bir uzunluk birimidir. |
| vw | viewport width yani görüntü alanı genişliğine bağlı bir uzunluk birimidir. |
| vmin | Gürünüm alanının yüksekliği küçük olan tarafının 1/100'üne eşit. Örnek ekranın Yüksekliği genişiğinden daha küçük ise vmin değeri 1vh=Yüksekliğe bağlı uzunluk birimi oluyor. |
| vmax | Gürünüm alanının yüksekliği büyük olan tarafının 1/100'üne eşit. Örnek ekranın Yüksekliği genişiğinden daha küçük ise vmax değeri 1vw=genişliğe bağlı uzunluk birimi oluyor. |