Go to Previous Section:
How CSS works.This is the fourth section of the CSS Getting Started tutorial; it outlines how stylesheets interact in a cascade, and how elements inherit style from their parents. You add to your sample stylesheet, using inheritance to alter the style of many parts of your document in one step.
Basamaklama(Cascading) ve kalıtım(Inheritance)
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.
Bu kurstaki 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: underlinedeğ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.
Öncesi
HTML içeriği
<p> <strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets </p>
CSS içeriği
strong {color:red}
Sonrası
HTML içeriği
<p> <strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets </p>
CSS içeriği
p {color:blue; text-decoration:underline}
strong {color:red}
| Cascading Style Sheets |
Move the declaration for underlining from the rule for <p> to the one for <strong>. The resulting file looks like this:
p {color: blue; }
strong {color: red; text-decoration: underline;}
Hide solution
Bir sonraki?
Go to Next Section:
SelectorsŞablonunuzda <p> ve <strong> tag'leri için stil belirlerken direk olarak belgenizde bulunan tag isimlerine stiller atadık. Bir sonraki bölümde, stilleri daha seçici yollar ile nasıl belirtebileceğinizi öğreneceksiniz.