CSS Kalıtım Nedir?
CSS kalıtım yapısı çoğu zaman faydalı olsa da dikkatten kaçtığı zaman büyük sıkıntıların oluşmasına da neden olabilecek bir konudur. XHTML ögeleri bir ailenin birbiri ile olan bağı gibi güçlü bir bağ yapısına sahiptirler. XHTML yapısını bir soy ağacına benzetebiliriz. İşte bu soy ağacının ögeleri arasında bir kalıtsallık söz konusudur. Ebeveynden çocuğuna geçen özellikler gibi XHTML ögeleri arasında CSS özellikleri de kalıtsal olarak alt elemanları (çocuk eleman) etkiler. Kalıtsallık; CSS ile web sayfası kodlarken tüm elemanlara tek tek atama yapabildiğimiz gibi, bir ebeveyn elemana atama yaparak da atanan özelliklerin tüm alt (çocuk elemanları) elemanlara uygulanmasını sağlayabiliriz. Bu yapıya kalıtsallık denir. CSS’in birçok özelliğinin kalıtsallık özelliği vardır. Bazı CSS özelliklerinde kalıtsallık yoktur. Örneğin margin, padding ve border özellikleri gibi…
Örnek bir kodlama ile gösterecek olursak,
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Basamaklı Yapı ve Kalıtsallık</title>
<style type="text/css">
div#icerik {
text-align: center;
}
</style>
</head>
<body>
<div id="icerik">Buradaki içerik ortalanacaktır <p>text-align özelliginin
kalıtsallıgı oldugu için buradaki içerikte ortalanacaktır </p></div>
</body>
</html>
Kalıtsallık kodlama yaparken bazen yararlı olurken, bazen de sayfalarımızda sorun çıkmasına neden olur. Bundan dolayı elemanların kalıtsallığı olup olmadığını bilmeliyiz. Yoksa gerçekten zor durumlarda kalabiliriz. Direk atamalar kalıtsallığı yok eder. Örneğin yukarıda örnekte
p{text-align: left;}
tanımlaması ile üst eleman olan #icerik‘den kalıtsal olarak gelen textalign: center; tanımlamasını etkisiz kılar.
NN4x ve IE5x ve alt sürümlerinde body içerisindeki font tanımlamasının table elemanına etki etmemesi gibi bir sorun vardır.
body {font-size: 0.8em;}
tanımlaması NN4x ve IE5x’de kodlama içindeki tabloları etkilemeyecektir. Bunun için
body, td, th {font- size: 0.8em;}
şeklinde bir tanımlama daha uygun bir tanımlama şeklidir.
inherit Değeri
CSS2 ile birlikte CSS özelliklerine inherit değeri atamamıza olanak sağlamaktadır. Tüm elemanlara (kalıtsallık özelliği olmayanlar dâhil) inherit değeri atayabiliriz. inherit değeri atadığımız eleman üst elemanının değerlerini alacaktır. Bir örnek ile gösterelim.
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Basamaklı Yapı ve Kalıtsallık</title>
<style type="text/css">
div#icerik{
border: 1px solid #000;
}
div#bilgi {
border: inherit;
}
</style>
</head>
<body>
<div id="icerik">Bu içerigi kenarlıgı olacaktır
<div id="bilgi">Bu bilgi de kenarlık bilgisini üst elemandan
kalıtsal olarak alarak kenarlıgı olacaktır. </div>
</div>
</body>
</html>
Kalıtsallığı kullanarak kodlarımızı azaltabiliriz. Ancak kalıtsallık nedeni ile de birçok sorunla karşılaştığımızı unutmayalım. Internet Explorer 7 ve alt sürümlerinde inherit değerini desteklememektedir.
CSS kalıtım konusunu gördük. Konu ile ilgili soru, öneri ya da fikirlerinizi aşağıda bulunan yorumlar kısmına yazarak bize iletebilirsiniz. CSS ile ilgili konuları aşağıdaki linke tıklayarak CSS kategorisi altındaki başlıklardan öğrenebilirsiniz. Ayrıca aşağıdaki Instagram ve Twitter logolarına tıklayarak bizi Instagram ve Twitter üzerinde de takip edebilirsiniz.
https://yazilimdelisi.com/category/web-gelistirme/css/
Sosyal Medya Hesaplarımız
