CSS kullanırken bazı özelliklerin kendiliğinden alt öğelere geçtiğini, bazılarının ise geçmediğini fark edebilirsiniz. Bu durumun sebebi CSS’de kalıtım mekanizmasıdır. Kalıtım, bazı CSS özelliklerinin ebeveyn öğelerden çocuk öğelerine aktarılmasını ifade eder.
Bu yazıda, kalıtımın nasıl çalıştığını, hangi özelliklerin miras alındığını, hangilerinin miras alınmadığını ve mirasın nasıl zorlanabileceğini inceleyeceğiz.
CSS’de Kalıtımın Mantığı
Bir web sayfasında HTML öğeleri hiyerarşik olarak yapılandırılır. Bir üst öğeye belirli bir CSS özelliği uygulandığında, bu özellik bazı durumlarda otomatik olarak alt öğelere de geçebilir.
Örnek:
body {
color: darkgreen;
}
Bu durumda, body öğesinin içinde yer alan tüm metinler (paragraflar, başlıklar, bağlantılar vb.) koyu yeşil renkte görünür. Ancak, eğer belirli bir öğeye farklı bir renk tanımlanırsa, bu renk varsayılan kalıtım davranışını geçersiz kılar.
h1 {
color: darkred;
}
Bu durumda, paragraflar koyu yeşil olarak kalırken, başlık koyu kırmızı olur.
Hangi CSS Özellikleri Miras Alınır?
Tüm CSS özellikleri otomatik olarak miras alınmaz.
Miras Alınan Özellikler
Bu özellikler genellikle metinle ilgilidir:
color – Yazı rengini belirler.cursor – İmleç türünü belirler.direction – Yazının yönünü belirler.font – Tüm yazı tipi özelliklerini toplu olarak belirler.font-family – Yazı tipini belirler.font-size – Yazı boyutunu belirler.font-style – Yazı stilini (italik vb.) belirler.font-variant – Küçük büyük harf kullanımını belirler.font-weight – Yazı kalınlığını belirler.letter-spacing – Harfler arasındaki boşluğu belirler.line-height – Satır yüksekliğini belirler.quotes – Alıntı işaretlerinin stilini belirler.text-align – Metnin hizalamasını belirler.text-indent – Paragraf girintisini belirler.text-transform – Harflerin büyük/küçük harf dönüşümünü belirler.visibility – Görünürlük durumunu belirler.word-spacing – Kelimeler arasındaki boşluğu belirler.
Miras Alınmayan Özellikler
Bu özellikler genellikle kutu modeli ve düzenleme ile ilgilidir:
border – Kenarlıkbackground – Arka planmargin – Dış boşlukpadding – İç boşlukwidth, height – Genişlik ve yükseklik
Örnek:
body {
background-color: lightgray;
}
Bu kod yalnızca body öğesinin arka planını gri yapar, ancak içindeki öğeler aynı renkte olmaz.
Kalıtımı Zorlamak: inherit Anahtar Kelimesi
Bazı özellikler varsayılan olarak miras alınmaz. Ancak, bir öğenin ebeveyninden özellik almasını istiyorsak inherit anahtar kelimesini kullanabiliriz.
Örnek:
input, textarea {
color: inherit;
}
Bu kod, input ve textarea öğelerinin ebeveynlerinden rengi miras almasını sağlar.
Başka bir örnek:
div {
color: red;
}
span {
color: inherit;
}
Burada span öğesi, div içinde yer alıyorsa div’in rengini miras alır.
initial ve unset Kullanımı
Eğer bir öğeye verilen CSS özelliklerini varsayılan değerine döndürmek istiyorsak initial kullanabiliriz.
p {
color: initial;
}
Bu kod, p etiketinin tarayıcının varsayılan rengine dönmesini sağlar.
unset Kullanımı:
- Eğer özellik miras alabiliyorsa,
inherit gibi davranır.
- Eğer miras alınmıyorsa,
initial gibi davranır.
p {
color: unset;
}
Bu özellik, genel bir sıfırlama yapmak istediğinizde faydalıdır.
CSS’de Kalıtımı Etkin Kullanma
- Metinle ilgili özellikler miras alınır.
- Kutu modeli ve düzenleme ile ilgili özellikler miras alınmaz.
- Miras alınmayan özellikleri kalıtım yoluyla uygulamak için
inherit kullanılabilir.
- Varsayılan ayarları geri getirmek için
initial veya unset kullanılabilir.
Büyük projelerde CSS’in nasıl çalıştığını anlamak, zamandan tasarruf etmenize ve daha düzenli kod yazmanıza yardımcı olur. CSS kalıtım mantığını anlayarak, gereksiz kod tekrarını önleyebilir ve daha verimli çalışabilirsiniz.