Css Basamaklama ve Kalıtım
Bir elementin son stili kompleks bir şekilde birbiriyle etkileşen bir çok yerde belirtilebilir. Bu kompleks etkileşim CSS’e güçlü bir yapı sağlar fakat; bir çok yerde bulunan stiller bazen karışabilir, hata ayıklamayı zorlaştırabilir. Bu duruma engel olmak için CSS’in öncelik sırası vardır. Bu öncelik kurallarını tarayıcı sıra ile uygular ve elementin stilini verir.
Basamaklama ile gelen stillerin üç ana kaynağı vardır :
- Tarayıcının markup dili için geçerli default stili.
- Okuyucunun belirlediği stiller.
- Belgenin yazarı tarafından belirtilen stiller. Bu stiller üç yerde bulunabilir;
- Harici bir dosyada (örneğin: …/styles/style.css) ; bu kurs öncelikle bu yöntem üzerinde durmaktadır.
- Belgenin başlangıcında (markup dilinde bu yöntem için en uygun yer <head> elementi içidir.) Bu yöntem sadece uygulanan belge için kullanılabilir.
- Elementin içinde (markup dilinde elementlerin başlama tag’lerinin içine o elementin stili eklenebilir.); bu yöntem bakım ve test için kullanılabilir.
Okuyucunun belirlediği stil, tarayıcıda default bulunan stili değiştirebilir. Ardından belgenin yaratıcısının stili biraz daha değişiklik yapar. Bu kursta, siz belgenin yazarısınız. Sadece belgenin yazarının stilleri üzerinde çalışacağız.
Örnek
Bu dersteki belgeleri okuyorken, stillerin bir kısmı, tarayıcınızın HTML için belirlediğini default stillerden gelir.
Bir kısmı, sizin tarafınızdan düzenlenmiş tarayıcı stil ayarlarından gelir. Firefox’ta, ayarlar Tercihler kısmından veya tarayıcı dosyaları içinde bulunan userContent.css stil dosyasından düzenlenebilir.
Stillerin çoğu kısmı ise, server’da bulunan stil belgesinden gelmektedir.
Örnek belgenizi tarayıcınızda açtığınızda, <strong> elementleri kalın görünecektir. Bu tarayıcınızın HTML için belirttiği stilden gelir.
<strong> elementleri kırmızıdır. Bu stil sizin belirttiğiniz stildir.
Ayrıca <strong> elementleri <p> elementinin stillerini devralırlar. Aynı şekilde <p> elementi de <body> elementinin stillerinin varisidir.
Yazarın stilleri önceliğe sahiptir, ardından okuyucunun stilleri ve sonra tarayıcının defaul stilleri gelir.
Kalıtsal stillemede, en ufak elementin stili ( mesela <strong> elementi ) ebeveyni olan elementin stillerinden daha önceliklidir.
Stilin uygulama sadece önceliğe bağlı değildir. Yani en ufak elementin önceliği en fazla olduğunda sadece onun stili uygulanmaz. Bir sonraki sayfada daha ayrıntılı açıklanacaktır.
Detay
CSS, !important kelimesi yardımıyla okuyucuya stillerinde yazardan üstünlük sağlayabilir.
Bunun belgenin yazarı için anlamı, belgeyi okuyucunun nasıl gördüğünün kesin olarak bilinemeyeceğidir.
Eğer basamaklama ve kalıtım ile ilgili daha fazla detay öğenmek istiyorsanız, CSS Spesifikasyonu’ndaki Assigning property values, Cascading, and Inheritance belgesine göz atın.
Çalışma: Kalıtımın kullanımı
- Editörünüzde örnek CSS dosyanızı açın.
- Aşağıdaki satırı kopyalayın ve yapıştırın. Orada zaten bulunan satırın altına veya üstüne yapıştırmanızın hiç bir önemi yoktur. Fakat, en üste eklemek biraz daha mantıklıdır, çünkü <p> elementi <strong> elementinin ebeveynidir, üstüdür:
p {color: blue; text-decoration: underline;}
Tarayıcınızı yenileyin ve örnek belgenizdeki değişikliği görün. text-decoration: underline değeri paragraftaki tüm harfleri, baş harfler dahil, etkileyecektir.<strong> elementleri, altçizgi stilini miras olarak, ebeveyni olan <p> elementinden almıştır. Fakat <strong> elementi kırmızı olarak belirtilmişti. Kırmızı onun kendi stilidir; bu yüzden kırmızı, ebeveyni olan <p>’nin renk stili maviden önceliklidir.
ÖNCESİ
HTML İÇERİĞİ
<p>
<strong>C</strong>ascading
<strong>S</strong>tyle
<strong>S</strong>heets
</p>CSS İÇERİĞİ
strong {color:red}Çıktı : Cascading Style Sheets
SONRASI
HTML İÇERİĞİ
<p>
<strong>C</strong>ascading
<strong>S</strong>tyle
<strong>S</strong>heets
</p>CSS İÇERİĞİ
p {
color:blue;
text-decoration:underline
}
strong {color:red}
Çıktı : Cascading Style Sheets
ÖDEV
Şablonunuzu sadece kırmızı harflerin altıçizili olması için değiştirin:
Cascading Style Sheets
Yapabilen kaç kişi var ??
Bir Önceki – Sonrası Ders
