Cascading nedir?
22 Mayıs 2008, Perşembe 11 am | Yazan : webdr | 23 okunma | | 23 okunmaCSS (Cascading Style Sheet) içinde geçen cascading terimi nedir? Merak ettiniz mi? CSS’in işleyişi hakkında size en önemli bilgiyi bu kelime vermektedir ancak açmak lazım, bazılarımız önemsemeden geçer ancak ilerleyen zamanda mutlaka öğrenir çünkü uyguladığı style bir yerde tıkanır diye düşünüyorum.
Bir siteye girdiğinizde CSS dosyasının işlenmesi şu şekilde gerçekleşir.
1-) Her tarayıcının kendine ait bir CSS’i vardır ve siteniz bu CSS’e göre yorumlanır.
2-) Daha sonra tarayıcı inline, header ya da external .css dosyası var mı diye bakar ve bu dosya içerisindeki kuralları inceler. Eğer varsa kendi CSS dosyasından daha öncelikle kabul eder ve bu CSS dosyasına göre davranır.
3-) Bu kuralları uygulamaya sıra geldiğinde bir seçicilik gösterir ve bu seçiciliğin sırası aşağıdaki gibidir.
p id=”ilk” class=”pragraf”
olan kodunuzun css kuralları aşağıdaki gibi sıralıysa
p#ilk {color:red}
p.parafraf {color:green}
Burada ilk olarak aklınıza gelen şey kodun yukarıdan aşağı uygulayacağı ve alttaki kodun geçerli olacağıdır yani pragrafın renginin yeşil olacağıdır ancak bu işleyiş aşağıdaki sıraya uyar.
id > class> pseudo class > element (standart tagler)
Ve bu nedenle paragraf rengi kırmızı olacaktır. 2 adet id içeren kural , 1 adet id içeren kuralın üzerindedir ve 2 adet id içeren kuralın dediği olur. Ya da yukarıdaki örnekte olduğu gibi bir id ve bir class içeren kuraldan, id içeren kuralın dediği olur.
Eğer bir eşitlik varsa yani kuralların ikisi de aynı sayıda id, class ya da aynı elementi içeriyorsa o zaman belgenin altına yakın olan kural geçerli olacaktır.
4-) Son olarak tarayıcı CSS dosyanızı tekrar tarar bunu da !important öğesi eklenmiş bir kural var mı diye bakmak için yapar eğer böyle bir kural görürse bu kuralın üstünde hiçbir kural tanımız ve ne ise onu uygular.
Tarayıcının CSS dosyanıza davranış ve kuralları uygulayışındaki seçiciliği cascading olarak adlandırılabilir.
Umarım birilerine yardımı dokunur bu bilgi. Kolay gelsin.
Etiketler: cascading, css, Sheet, Stylee
Bu Yazıyı Paylaşın: Bağcık |Webiket |Oyyla |LinkiBol |Favorri |Tusul |del.icio.us |
