🚀 HTML & CSS: Stil Yönetimi ve Öncelik Savaşları

CSS'i HTML'e dahil etmenin üç farklı yöntemini ve tarayıcının hangi stili önce uygulayacağına karar verdiği 'Specificity' mantığını inceliyoruz.

CSS'i HTML'e Enjekte Etmek

Selamlar. İskeleti kurduk, renklerin matematiğini çözdük. Şimdi bu görsel kuralları HTML dökümanımıza nasıl verimli bir şekilde giydireceğimizi konuşalım. CSS'i (Cascading Style Sheets) sayfaya dahil etmenin üç temel yolu vardır:

  1. Inline (Satır İçi): Doğrudan etiket içine style niteliğiyle yazılır. En yüksek önceliğe sahiptir ama yönetmesi tam bir kabustur.
  2. Internal (Dahili): HTML dosyasının <head> kısmında <style> etiketleri arasına yazılır. Tek sayfalık küçük projeler veya hızlı prototipler için idealdir.
  3. External (Harici): Ayrı bir .css dosyası oluşturulur ve HTML'e <link> etiketiyle bağlanır. Standart olan budur.

Tarayıcı Kime İnanır? (Specificity)

Eğer bir butona hem satır içinde 'mavi' hem de harici dosyada 'kırmızı' derseniz ne olur? Tarayıcıların bir öncelik hiyerarşisi vardır. Bu hiyerarşiyi anlamak, neden stilinizin değişmediğini saatlerce aramanızı engeller.

  • Inline styles her zaman kazanır.
  • ID seçicileri (#header) sınıflardan daha güçlüdür.
  • Class seçicileri (.btn) düz etiketlerden (button) daha güçlüdür.

Efsanevi NFS Underground 2'yi tarayıcıya taşıma projemizde, binlerce satır CSS ve devasa bir veri yapısıyla uğraşırken, stili tek bir merkezden (External CSS) yönetmenin ne kadar hayati olduğunu görmüştük. Öyle bir projede inline stil kullanmak, bir süre sonra oyunun tüm grafik ayarlarının birbirine girmesi demekti. Performans ve kod okunabilirliği için harici dosyalar her zaman en sadık dostunuzdur.

🚀 Sanal Kodlama Alanı Yükleniyor...

Pro İpucu: Cascade (Basamaklı Yapı)

CSS ismindeki 'Cascading' (Basamaklı) kelimesi şuradan gelir: Eğer aynı önceliğe sahip iki kural varsa (örneğin iki farklı class seçicisi aynı rengi veriyorsa), tarayıcı en son okuduğu kuralı uygular. Yani dosyanın en altındaki kural, yukarıdakini ezer.

Kod yazarken kendinizi 'Neden bu renk değişmiyor?' diye sorarken bulursanız, sağ tıklayıp 'İncele' (Inspect) diyerek hangi kuralın üzerinin çizildiğine bakın. Tarayıcı size hangi kuralın hangisini ezdiğini açıkça söyler.

Bir sonraki derste, sayfaların en önemli etkileşim araçlarından biri olan Links (Bağlantılar) konusuna geçeceğiz. Web'i ağ yapan o köprüleri kurmayı öğreneceğiz.

Ovid Developer Günlüğü: ovidgame.com