Cascade ve inheritance

Stillerin nasıl birleştiğini ve kalıtımın nasıl çalıştığını öğrenirsin.

Cascade: son gelen kazanır

Cascade (basamaklı), CSS adındaki 'C' harfidir. Aynı öğeye iki bölüm aynı özelliği farklı değerle verirse, tarayıcı dosyada sonra yazılanı alır.

Örnek: önce p { color: gray; }, sonra p { color: navy; } yazdıysan, paragraflar navy olur. İkinci bölüm birinciyi geçersiz kılar. Bu yüzden bölümlerin sırası önem taşır.

Specificity: daha nokta atışı olan kazanır

İki bölüm aynı öğeye çakışırsa, tarayıcı öncelik (specificity) hesaplar. Genel bir seçici düşük önceliklidir; daha nokta atışı bir seçici yüksek. Tür seçicisi (ör. p) düşük önceliklidir.

Sınıf ve kimlik seçicileri (sonraki gruplarda) daha yüksek öncelik verir. Şimdilik bilmen gereken: aynı öncelikte iki bölüm çakışınca cascade devreye girer ve sonra yazılan kazanır.

Inheritance: özellik alt öğeye geçer

Kalıtım (inheritance) bazı özelliklerin üst öğeden alt öğeye geçmesidir. body bölümüne color: navy verirsen, içindeki paragraflar da navy olur; çünkü color kalıtsaldır.

Ama her özellik kalıtsal değildir. border veya margin gibi özellikler kalıtsal değildir; alt öğeye otomatik geçmez. Hangi özelliğin kalıtsal olduğunu ileride ayrıntılı göreceğiz.

Uygulama İki p bölümü yaz, sonra gelen renk kazansın

İki ayrı p bölümü yaz. Birincisine color: gray, ikincisine color: navy bildirimini ver. İkinci bölüm birinciden sonra gelmeli; böylece cascade nedeniyle navy kazanır.

Örnek çözümü göster

/* iki p bölümü ekle */
p {
  color: gray;
}
p {
  color: navy;
}

Kendini test et

Bu iki p bölümünden hangi renk kazanır?
```
p {
  color: gray;
}
p {
  color: navy;
}
```
- gray, çünkü daha açık bir renk
- navy, çünkü dosyada sonra yazılmış
- Renkler sırayla değişerek görünür
- İkisi de aynı anda uygulanır
Cevabı göster

navy, çünkü dosyada sonra yazılmış — Doğru. Aynı öncelikte iki bölüm çakışınca, dosyada sonra yazılan kazanır.

İkinci p bölümünün rengini 'navy' yap

p {
  color: gray;
}
p {
  color: ____;
}

Cevabı göster

p {
  color: gray;
}
p {
  color: navy;
}

Terimleri anlamlarıyla eşleştir

Cascade

Son gelen kazanır
Specificity

Daha nokta atışı seçici önceliklidir
Inheritance

Alt öğeye özellik geçer
Tür seçicisi

Düşük öncelik

Sıradaki ders: Özet - İlk stil sayfam

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler