XHTML dokümanlarının yapısından ve CSS ile olan ilişkisinden (X)HTML Sayfa Yapısı ve CSS Kullanımı makalesinde bahsetmiştik, bu makaleden önce bir göz atmanızı tavsiye ederiz. XHTML öğeleri bir biri ile bir ailenin birbiri ile olan bağı gibi bağlıdır. Hatırlıyorsanız bir soy ağacı benzetmesi yapmıştık. İşte bu soy ağacının öğeleri arasında bir kalıtsallık söz konusudur. Ebeveynden çocuğuna geçen özellikler gibi XHTML öğeleri arasında CSS özellikleride kalıtsal olarak alt elementleri(çocuk element) etkiler. Kalıtsallık; CSS ile web sayfası kodlarken tüm elementlere tek tek atama yapabildiğimiz gibi birde bir elemente atama yaparız ve bu özellik tüm alt(çocuk elementleri) elementlerinede uygulanır buna kalıtsallık denir. CSS’in bir çok özelliğinin kalıtsallık özelliği vardır. Hızlı CSS Referansı bölümü ve alt bölümlerinde her özelliğin kalıtsallık durumunu belirtmiştik.

Bazı CSS özelliklerinde kalıtsallık yoktur. Örneğin margin, padding ve border özellikleri gibi tüm liste aşağıda

CSS1’de kalıtsallığı olmayan özelliklerin listesi:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position
  • background
  • text-decoration
  • vertical-align
  • margin-top
  • margin-right

  • margin-bottom
  • margin-left
  • margin
  • padding-top
  • padding-right
  • padding-bottom
  • padding-left
  • padding
  • border-top-width
  • border-right-width

  • border-bottom-width
  • border-left-width
  • border-width
  • border-color
  • border-style
  • border-top
  • border-right
  • border-bottom
  • border-left
  • border

  • width
  • height
  • float
  • clear
  • display

Örnek bir kodlama yaparsak:

:::css
 div#icerik { text-align: center; }

:::html
 <div id="icerik"> Buradaki içerik ortalanacaktır <p> text-align özelliğinin kalıtsallığı olduğu için buradaki içeirkte ortalanacaktır </p> </div>

Kalıtsallık kodlama yaparken bazen bize yaralı olur, bazende sayfalarımızda sorun çıkmasına neden olur. Bundan dolayı elementlerin kaltsallığı olup olmadığını bilmeliyiz. Yoksa gerçekten zor durumlarda kalabilirsiniz, tecrübeyle sabit :)

Direk atamalar kalıtsallığı yok eder.Örneğin yukarıda örnekte

:::css
 p{ text-align: left; }

tanımlaması ile üst element olan #icerik‘den kalıtsal olarak gelen text-align: center; tanımlamasını etkisiz kılar.

NN4x ve IE5x ve alt versiyonlarında body içerisindeki font tanımlamasının table elementine etki etmemesi gibi bir sorunumuz 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;}

gibi 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 elementlere(kalıtsallık özelliği olmayanlar dahil) inherit değeri atayabiliriz. inherit değeri atadığımız element üst elementinin değerlerini alacaktır. Bir örnek yapacak olursak:

:::css
div#icerik {
    border: 1px solid #000;
}
div#bilgi {
    border: inherit;
}

:::html
<div id="icerik"> Bu içeriği kenarlığı olacaktır <div id="bilgi"> Bu bilgi de kenarlık bilgisini üstten elementten alarak kenarlığı olacaktır. </div> </div>

Kalıtsallığı kullanarak kodlarımızı azaltabiliriz. Ancak kalıtsallık nedeni ile de bir çok sorunla karşılaştığımızıda unutmayalım.

Kaynaklar

jQuery'ye büyük darbe Javascript ve seçiciler

jQuery'nin en büyük avantajlarından birisi seçici kullanımının basitiliğidir. CSS seçicilerini javascript'e kazandıran bu kullanım kolayl...… Devamını oku

jQuery'den kurtulma seansları. sınıf (class) işlemleri

17 August 2017 tarihinde yayınlandı.

jQuery'nin sonu mu geldi?

14 July 2017 tarihinde yayınlandı.