Yükleniyor...

CSS Birimleri

color: teal gibi bir bildirim yazmayı zaten biliyorsunuz. Boyut özellikleri ikinci bir fikir ister: ne kadar büyük. Tek başına font-size: 16 çoğu uzunluk özelliği için geçersizdir — tarayıcının «16»nin ne anlama geldiğini bilmesi için bir birim gerekir.

CSS birimleri nedir?

CSS birimleri, uzunluk değerlerine eklenen ölçü sonekleridir — örneğin px, rem, %, vw ve vh. Mutlak birimler ebeveynden bağımsız aynı boyutta kalır. Göreli birimler başka bir şeye göre ölçeklenir: öğenin yazı tipi, kök yazı tipi, ebeveyn boyutu veya görünüm alanı (viewport).

Mutlak ve göreli bir bakışta

Bu tabloyu harita gibi kullanın. İlk gün her birime ihtiyacınız yok — aileleri öğrenin, sonra günlük birimleri pratik edin.

📊 Yaygın CSS uzunluk birimleri

Birim Aile Tipik kullanım
px Mutlak (ekran pikseli) Kenarlıklar, ince ikon ayarları, 1px çizgiler
rem Kök yazı tipi boyutuna göreli Sayfa metni ve tutarlı boşluklar
em Öğenin kendi yazı tipine göreli Yerel metinle büyüyen padding
% Ebeveyn boyutuna göreli Kapsayıcı içinde akışkan genişlikler
vw Görünüm alanı genişliğine göreli Tam genişlik bölümler (dikkatli)
vh Görünüm alanı yüksekliğine göreli Hero yüksekliği, tam ekran paneller

Piksel (px)

px ekranda mutlak bir birimdir. İnce kenarlıklar ve küçük sabit ayrıntılar için öngörülebilirdir. Duyarlı bir sitede tüm tipografi için tek birim olarak daha az idealdir, çünkü kullanıcının kök yazı tipi tercihiyle rem gibi otomatik ölçeklenmez.

Kart kenarlığı için piksel boyutları

css
CSS Code 
.card {
border: 1px solid #cbd5e1;
border-radius: 8px;
width: 320px;
}

px ne zaman hâlâ parlar

Sabit kenar istediğiniz kıl kenarlıklar, gölge ofsetleri ve küçük arayüz parçaları için px tercih edin. Tasarım yazı tipi boyutu veya kapsayıcı genişliğiyle nefes almalıysa göreli birimleri tercih edin.

rem ve em

rem, kök öğenin yazı tipi boyutuna görelidir (genellikle <html>). em, geçerli öğenin yazı tipi boyutuna görelidir (veya özelliğe göre ebeveyne). Yeni başlayanlar için font-size ve birçok boşlukta daha güvenli varsayılan remdir çünkü iç içe öğelerde tutarlı kalır.

rem ile köke göreli tipografi

css
CSS Code 
html {
font-size: 100%; /* often 16px in browsers */
}

.lead {
font-size: 1.25rem; /* ~20px if root is 16px */
margin-bottom: 0.75rem;
}

Bir cümlede em

Bir değerin yerel yazı tipiyle ölçeklenmesini istediğinizde em kullanın — örneğin o bileşenin metni büyürse büyüyen padding. İç içe em değerleri çarpılıp «kaçıyorsa» bu boyutları rem yapın.

Yüzdeler (%)

Yüzde, ebeveyn ölçüsüne görelidir. width: 50% ile öğe ebeveynin genişliğinin yarısını hedefler (ebeveynin tanımlı genişliği varsa). Yüzdeler, kapsayıcı içinde akışkan düzenler için klasik araçtır.

Yüzde ile akışkan genişlik

css
CSS Code 
.sidebar {
width: 30%;
}

.main {
width: 70%;
}

Görünüm alanı birimleri (vw ve vh)

1vw, görünüm alanı genişliğinin %1’idir; 1vh ise yüksekliğinin %1’idir. Tam ekran hero’lar için güçlüdür ama aşırı kullanımı kolaydır — yalnızca vw ile boyutlandırılmış metin çok geniş veya çok dar ekranlarda okunaksız olabilir.

Hero için görünüm alanı yüksekliği

css
CSS Code 
.hero {
min-height: 80vh;
padding: 2rem;
}

Pratik bir varsayılan alışkanlık

Başlangıç alışkanlığı: yazı tipi boyutları ve çoğu dikey boşluk için rem, genişlikler için % veya esnek düzen araçları (sonra: Flexbox/Grid), kenarlıklar ve küçük sabit ayrıntılar için px. Tam genişlik bölümler kurarken görünüm alanı birimlerine dönün — her kenar boşluğu için değil.

Kendiniz deneyin

  1. width: 80%, max-width: 24rem ve border: 1px solid #94a3b8 ile bir .card kuralı oluşturun.
  2. .card h2 { font-size: 1.5rem; } ve kısa bir paragrafı 1rem yapın.
  3. Kartın üstüne .banner { min-height: 40vh; } bölümü ekleyin.
  4. Pencere boyutunu ve kök html { font-size: … } değerini değiştirerek %, vh ve remin nasıl farklı tepki verdiğini hissedin.
  5. İsteğe bağlı: .card içinde başlığı 1.5em yapın ve iç içe boyutlandırmanın şaşırtıp şaşırtmadığına bakın.

Yaygın hatalar

  • Birimsiz font-size: 16 yazmak — standart CSS’te uzunluk için geçersiz
  • Yakınlaştırma/kullanıcı tercihlerini sayması gereken sitede her yazı tipi için yalnızca px
  • Metin çok büyük veya çok küçük olana kadar birçok em iç içe geçirmek
  • Gövde metnini yalnızca vw ile ayarlayıp büyük monitörlerde satırların patlaması
  • Ebeveynin açık yüksekliği yokken % yüksekliğinin çalışacağını sanmak

Özet

  • Uzunluk değerleri genellikle birim ister (px, rem, %, vw, …)
  • Mutlak sabit kalır; göreli yazı tipi, ebeveyn veya görünüm alanıyla ölçeklenir
  • Tipografi için rem, genişlikler için %/düzen sistemleri, ince kenarlıklar için px tercih edin
  • em yerel yazı tipiyle; vw/vh görünüm alanıyla ölçeklenir
  • Birimi işe göre seçin — her yere tek birimi dayatmayın

🧠 Bilginizi Test Edin

Başlamaya Hazır

Bilginizi Test Edin

Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör

❓
7
Sorular
🎯
70%
Geçmek İçin
♾️
∞
Süre
🔄
∞
Deneme

📝 Talimatlar

  • Her soruyu dikkatle okuyun
  • Her soru için en iyi cevabı seçin
  • Quiz'i istediğiniz kadar tekrar alabilirsiniz
  • İlerlemeniz üstte gösterilecek
Konu 1 / 1
Css Ders