CSS’de Kalıtsallık(Inheritance)
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:
div#icerik {
text-align: center;
}
<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
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.
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:
div#icerik {
border: 1px solid #000;
}
div#bilgi {
border: inherit;
}
<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.
merhabalar ilk önce çok teşekkur ederim. Ben birşey sormak istiyorum. bir site yaptım fakat tarayıcımı kuçultugumde ekran düzni bozuluyor bunu nasıl düzeltirim. Yardım edersneiz sevinirim…
Genelde bu sorunu sayfayı kapsayan bir katman ile çevreleyip bu katmana bir genişlik tanımlayınca düzelmesi lazım
kalitsallik_ornek1 ve kalitsallik_ornek2 görüntülenemiyor. Kontrol eder misiniz lütfen?
Düzelttim. Teşekkürler
[...] etiketler tarafından miras (inheritance) alınmaktadır. Inheritance konusunda detaylı makaleye buradan ulaşabilirsiniz. Yapmış olduğumuz bu tanımlama, site için font boyut değerinin her yerde 12 [...]
Inherit in zıttı bir özellik var mı? #iddiv a {} şeklinde linklere stil veriyorum, ama bu div içinde başka bir linke başka bir stil atamak istiyorum. O na class atıyorum ama o yine #iddiv a {} stilini kullanıyor.
bunun sebebi css te Specificity yani Belirlilik olarak tabir edilen özellikten kaynaklanıyor. Aslında çok basit bi mantığı var fakat ben düzgün anlatamayabilirim kafanıda karıştırmak istemem o yüzden nette hazır anlatmış bi arkadaşın linkini veriyorum sana eğer işine yaramazsa sende nette "Css Specificity " diye aratırsan işine yarayacak döküman mutlaka bulursun
http://www.skorp.eu/2009/03/12/css-de-specificity...
Eger tamamen sifirdan stil olusturacaksaniz Eric Meyer’in CSS sifirlama teknigini tavsiye ederim. Yoksa asagidaki teknik isinizi gorur:
—————
* { margin:0; padding:0; }
—————
Özellikle web standartlarında CSS kullanılıyorsa tarayıcıların (padding/margin) default değerleri farklılık gösterdiği için sorun yaşanıyor.
Bunun en uygun çözümü bana göre Yahoo’nun daha önce yaptığı sıfırlama metodu.
IE 5 hacklerini yazdıktan sonra, body,div,p,ul,ol,li…gibi taglerin margin ve padding değerlerini sıfır yaparak kodlamaya başlamak, bu şekilde tüm browserlarda default değerleri “0″ yaparak ilk adımdan sonradan doğacak sorunları engelleyebiliyorsunuz. Bu metoddan sonra minimum sorun yaşadım.
iyi günler
evet aradıgım seyde buydu tskler..
Bazı şelyerlerden fedakarlık etmek anlamınada gelebilir. Çünkü ie çizim konusunda kötü bir tarayıcı olsada özellikle ülkemizde explorer kullanan firefox ve opera hatta diğer tarayıcılarının toplamının iki katı. Naparsak yapalım görüntüden fedakarlık etmekte olsa sitemizi ie ye uydurmak zorundayız. :S
Sorunları kaynağı genelde ie kaynaklanmaktadır. Eğer kodlarımız firefoz ta deneyip ie de meydana geln hatlarıda benim css problemleri ve çözüm önerileri kısmından düzeltirsek problemsiz bir kod oluşturmuş olabiliriz.
hocam merhaba, bi sorunum var.
yaptığım sayfaların internet explorer ve firefox daki görünümlerinin farklı olduğunu gördüm.bu konuda her ne kadar arastırma yapsamda tam bir sonuca ulaşamdım.
sanırım sorun xhtml standartları.Ama çözüm yolunu bulamadım.
bu konudaki bilgilerinizi ve çözüm önerilerinizi benimle paylasırsanız çok sevinirim.
teşekkür ederim