Sınıflar (class) ile seçmek

Başlamadan önce

Önceki dersteki örneği çalıştırmış olman ve dosya/çıktı ayrımını biliyor olman yararlı.

Öğrenme sırası: konuyu oku → çıktıyı tahmin et → örneği değiştir → alıştırmayı çöz → cevabını gerekçelendir.

Konu anlatımı

Bir sınıf HTML’de bir veya birden fazla öğeye verilen yeniden kullanılabilir bir addır. class="uyari" öğeyi adlandırır; .uyari seçicisi o adı taşıyanları bulur. Başındaki nokta CSS sözdiziminin parçasıdır, HTML class değerine yazılmaz. Aynı öğeye boşlukla ayrılmış birden fazla sınıf verebilirsin.

Sınıf adını öğenin o anki rengine göre değil görevine göre seçmek değişiklikleri kolaylaştırır. “kirmizi” yerine “uyari” demek, rengi değişse bile anlamı korur. Bir kuralı birden fazla öğede kullanmak kopya CSS miktarını azaltır; bu da ileride tutarsız tasarımları önler.

Tarayıcı bir öğeye eşleşen kuralları birlikte değerlendirir. Bir sınıf kuralı ile genel etiket kuralı çakıştığında özgüllük önem kazanır. İlk aşamada karmaşık seçiciler yerine basit sınıflarla çalış; DevTools’ta hangi bildirimin geçersiz kaldığını görerek kaskadı öğren.

İlk örneği oku ve dene

<style>
  .uyari {
    background-color: #fff3cd;
    color: #8a6d3b;
    padding: 12px;
  }
</style>

<p>Normal bir paragraf.</p>
<p class="uyari">Dikkat: bu bir uyarı mesajı!</p>

Birinci paragraf normal görünür; ikincisi açık sarı zeminli, kahverengi yazılı bir uyarı kutusu olur.

Kodu değiştir ve ▶ Çalıştır butonuna bas.

Adım adım neden böyle çalışıyor?

1. class özelliğine nokta yazılmaz; CSS seçicisinde nokta bulunur.
2. Bir öğe kart ve uyari gibi iki sınıfı birden taşıyabilir.
3. .kart.uyari aynı öğede iki sınıfı arar; .kart .uyari ise içerideki öğeyi arar.
4. Seçici yazımında büyük/küçük harf ve tireleri tutarlı kullan.

<style>
.kart { padding: 16px; border: 1px solid #cbd5e1; }
.uyari { background: #fff3cd; color: #704b00; }
</style>
<p class="kart">Normal not</p>
<p class="kart uyari">Kaydetmeden çıkma.</p>

İki kartta aynı boşluk ve kenarlık; yalnızca ikinci kartta uyarı renkleri.

Kodu değiştir ve ▶ Çalıştır butonuna bas.

Kolaydan zora sen dene

1. Üç paragraf ekle; yalnızca birine uyari ver.
2. Bir öğede kart ve uyari sınıflarını birlikte kullan.
3. .kart.uyari ve .kart .uyari seçicilerinin hangi HTML yapılarında çalıştığını ayrı örneklerle dene.

<style>.not{padding:12px}.onemli{border-left:3px solid #2563eb}</style>
<p class="not">Birinci not</p><p class="not onemli">İkinci not</p>

İki notun boşluğu eşit; ikinci notun sol kenarlığı var.

Kodu değiştir ve ▶ Çalıştır butonuna bas.

Yaygın hata ve çözümü

1. class=".uyari" yazmak CSS .uyari seçicisiyle amaçladığın adı oluşturmaz; HTML’de noktasız yaz.
2. Çok uzun seçici zincirleri özgüllük savaşına dönüşebilir; bileşenler için kısa sınıflar seç.

Kendini değerlendir

Ezberlemeden açıklayabiliyor musun?

.kart .uyari neyi seçer?

Kendi çözümünde bir girdiyi değiştir. Çalıştırmadan önce beklenen sonucu yaz; gerçek sonuçla karşılaştır ve fark varsa hangi satırdan kaynaklandığını açıkla.

Kaynak ve çalışma ortamı

Örnekler küçük öğretim senaryolarıdır. Java/C#/PHP/Swift çalışma ortamını kendi cihazında ayrıca doğrula; yazılı sonuçlar beklenen davranışı açıklar.