Cascade (Basamaklama), CSS'nin temel mekanizmalarından biridir ve hangi CSS kurallarının bir HTML öğesine uygulanacağını belirler. Birden fazla stil kuralı aynı öğeyi hedeflediğinde, tarayıcı hangi stilin öncelikli olacağını çözmek için cascade algoritmasını kullanır. Bu algoritma, stil kurallarının **kaynağı**, **özgüllüğü** ve **sırası** gibi faktörlere dayanır.
**Cascade'in Temel Unsurları:**
1. **Kaynak (Origin):** Stillerin nereden geldiğini ifade eder. Öncelik sırası şöyledir:
* Tarayıcı varsayılan stilleri (en düşük öncelik)
* Kullanıcı stilleri (kullanıcının tarayıcıya uyguladığı özel stiller)
* Geliştirici stilleri (en yüksek öncelik) (HTML'de tanımlanan inline stiller, harici CSS dosyaları, `<style>` etiketleri vb.)
2. **Özgüllük (Specificity):** Bir stil seçicisinin ne kadar spesifik olduğunu belirtir. Daha özgül seçiciler, daha az özgül seçicilere göre daha yüksek önceliğe sahiptir. Özgüllük hesaplamasında kullanılan faktörler şunlardır:
* **Inline stiller:** En yüksek özgüllüğe sahiptir. (<https://www.nedemek.page/kavramlar/inline%20stil>)
* **ID'ler:** ID seçiciler, class ve element seçicilere göre daha özgüldür. (<https://www.nedemek.page/kavramlar/id>)
* **Class'lar, öznitelikler ve sözde sınıflar:** ID'lerden daha az özgüldür. (<https://www.nedemek.page/kavramlar/class>)
* **Elementler ve sözde öğeler:** En düşük özgüllüğe sahiptir.
* `*` (evrensel seçici) ve birleştiriciler (örneğin `+`, `>`, `~`) özgüllüğe katkıda bulunmaz.
* `!important` bildirimi, normal özgüllük kurallarını geçersiz kılar. (<https://www.nedemek.page/kavramlar/important>)
3. **Sıra (Order):** Aynı özgüllük düzeyine sahip kurallar için, CSS dosyasında veya `<style>` etiketinde daha sonra tanımlanan kural öncelikli olur. Bu, "son kazanan" ilkesi olarak bilinir.
**Cascade Nasıl Çalışır?**
1. Tarayıcı, HTML belgesini ayrıştırır ve her öğeye uygulanabilir tüm stil kurallarını toplar.
2. Her kural için kaynağı belirler.
3. Her kural için özgüllük hesaplar.
4. Kaynağa ve özgüllüğe göre kuralları sıralar.
5. Aynı özgüllük düzeyine sahip kurallar için, sırayla (belgede daha sonra görünen) kuralı uygular.
Cascade mekanizması, CSS'in gücünü ve esnekliğini artırır. Geliştiricilerin, farklı kaynaklardan gelen stilleri yönetmesine ve stil hiyerarşileri oluşturmasına olanak tanır.
Ne Demek sitesindeki bilgiler kullanıcılar vasıtasıyla veya otomatik oluşturulmuştur. Buradaki bilgilerin doğru olduğu garanti edilmez. Düzeltilmesi gereken bilgi olduğunu düşünüyorsanız bizimle iletişime geçiniz. Her türlü görüş, destek ve önerileriniz için iletisim@nedemek.page