CSS Birimleri Kullanımı ve Özellikleri
eminbasbayan
İçindekiler
Bu yazıda neler var?
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.
TEXT?1. CSS Birimleri Nedir?
CSS’de iki temel birim türü vardır:
- 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)
- 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ı
| Özellik | Piksel (px) | Yüzde (%) |
|---|---|---|
| Sabit mi? | Evet | Hayır |
| Responsive mi? | Hayır | Evet |
| Ebeveyne bağlı mı? | Hayır | Evet |
| Önerilen kullanım alanı | Sabit boyutlu öğeler | Duyarlı (responsive) tasarımlar |
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-heightiç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.
