CSS Birimleri Kullanımı ve Özellikleri

CSS’de öğelerin genişlik, yükseklik, yazı tipi boyutu gibi değerlerini belirlemek için birimler (units) kullanılır. Piksel (px), yüzde (%), em ve rem gibi birçok farklı birim vardır. Bu birimlerin her biri, farklı senaryolarda kullanılabilir ve tasarımın daha esnek olmasını sağlar.

Bu yazıda, CSS’de kullanılan birimleri detaylı bir şekilde inceleyeceğiz. Piksel (px), yüzde (%), em ve rem gibi en sık kullanılan birimleri anlamaya odaklanacağız. Eğer CSS’e yeni başlıyorsanız, bu birimleri doğru kullanmak, responsive (duyarlı) tasarımlar oluşturmanıza büyük katkı sağlayacaktır.

1. CSS Birimleri Nedir?

CSS’de iki temel birim türü vardır:

1. Mutlak (Absolute) Birimler
   • Sabit bir değere sahiptir, ekran boyutuna veya başka bir öğeye bağlı değildir.
   • Örneğin: piksel (px), santimetre (cm), milimetre (mm), inç (in), nokta (pt), pica (pc)
2. Göreceli (Relative) Birimler
   • Başka bir değere göre hesaplanır ve esneklik sağlar.
   • Örneğin: yüzde (%), em, rem, vh, vw

En yaygın kullanılan birimler piksel (px), yüzde (%), em ve rem’dir. Diğer mutlak birimler (cm, mm vb.) CSS’de pek sık kullanılmaz.

2. Piksel (px) Nedir?

Piksel (px), ekrandaki fiziksel noktaya (piksele) bağlı bir birimdir.

Örneğin:

div {
  width: 200px;
  height: 100px;
  background-color: lightblue;
}

Bu kod, div öğesinin 200 piksel genişliğinde ve 100 piksel yüksekliğinde olmasını sağlar.

Avantajları:

• Sabit boyutlu öğeler oluşturmak için idealdir.
• Tarayıcıdan tarayıcıya değişmez, her ekranda aynı sonucu verir.

Dezavantajları:

• Responsive (duyarlı) tasarımlar için uygun değildir.
• Büyük ekranlarda veya farklı çözünürlüklerde öğeler orantısız görünebilir.

Bu nedenle piksel yerine daha esnek birimler kullanmak daha iyi olabilir.

3. Yüzde (%) Nedir?

Yüzde (%) birimi, bir öğenin başka bir öğeye (genellikle ebeveynine) göre boyutunu belirler.

Örneğin:

.container {
  width: 800px;
  height: 800px;
  background-color: lightgray;
}

.child {
  width: 50%;
  height: 50%;
  background-color: lightblue;
}

Bu kodda:

• .container öğesi 800 piksel genişliğinde ve 800 piksel yüksekliğinde
• .child öğesi ebeveynin (container’ın) %50’si kadar genişlik ve yükseklik alır.

Avantajları:

• Responsive (duyarlı) tasarımlar için uygundur.
• Sayfa boyutu değiştikçe öğelerin boyutları da otomatik olarak uyum sağlar.

Dezavantajları:

• Ebeveyn öğeye bağımlıdır.
• Öğe içinde kullanılan bazı özelliklerde (örneğin line-height) farklı çalışabilir.

4. Yüzde (%) Kullanımında Dikkat Edilmesi Gerekenler

Genişlik ve yükseklik için:

Yüzde, ebeveyn öğenin genişliğine veya yüksekliğine göre hesaplanır.

div {
  width: 80%; /* Ebeveynin %80’i kadar genişlik */
  height: 50%; /* Ebeveynin %50’si kadar yükseklik */
}

Metin satır yüksekliği (line-height) için:

Metin içindeki satır yüksekliği için kullanılan % birimi, öğenin kendi font boyutuna göre hesaplanır.

p {
  font-size: 40px;
  line-height: 150%; /* 40 * 1.5 = 60px satır yüksekliği */
}

Burada line-height: 150%, öğenin kendi yazı tipi boyutuna (40px) göre hesaplanır ve 60px olur.

Yanlış Beklenti:

line-height: 50%, ebeveynin satır yüksekliğine göre değil, öğenin kendi font büyüklüğüne göre hesaplanır.

5. Piksel (px) ve Yüzde (%) Karşılaştırması

6. Piksel ve Yüzdeyi Birlikte Kullanma

En iyi sonucu almak için piksel ve yüzdeyi birlikte kullanmak mantıklıdır.

Örneğin, genişliği yüzdeyle, iç boşlukları (padding, margin) piksel ile ayarlamak daha esnek bir çözüm sunar:

.container {
  width: 80%; /* Sayfanın %80’i kadar genişlik */
  margin: 20px auto; /* Sabit dış boşluk */
}

Bu kombinasyon, hem duyarlı hem de dengeli bir tasarım sağlar.

7. Sonuç: CSS Birimlerini Doğru Kullanma

Öğrendiğimiz konular:

• Piksel (px): Sabit boyutlar için uygundur, ama responsive değildir.
• Yüzde (%): Ebeveyn öğeye bağlıdır, responsive tasarımlar için idealdir.
• line-height için % kullanımı farklı çalışır.
• En iyi sonuç için piksel ve yüzdeyi birlikte kullanmak mantıklıdır.

Hangi birimi seçmeliyim?

• Sabit genişlikte öğeler için → px
• Responsive (duyarlı) tasarımlar için → %
• Metin aralıkları için → % veya em/rem

Bunun dışında em ve rem birimleri de CSS’de yaygın olarak kullanılır. Bu konuları sonraki yazılarda detaylı bir şekilde inceleyeceğiz.

Bu bilgilerle artık CSS birimlerini doğru şekilde kullanarak modern ve esnek tasarımlar oluşturabilirsiniz.