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