CSS'te Baskınlık ve Kalıtsallık Yöntemleri
Markanız için 300X300 alan.
HTML etiketlerini seçmek için kullanılan CSS seçicileri birbirlerine baskınlık kurabilir ve ayrıca bazı CSS özellikleri atadan gelir yani kalıtsallıkları vardır.
Kalıtsallık ve baskınlık kafa karıştırıcı görünse de, CSS gücünü buradan alıyor.
Tarayıcının CSS'i uygulaması:
1. Bazı özelliklerin ata etiketlerden çocuklara geçmesi olan kalıtsallık ve
2. Seçicilerin tanımlanma biçiminin çözümlenmesi olan akış ve baskınlık
üzerine kurulu.
CSS'te Baskınlık ve Kalıtsallık Nasıl Çalışır ?
Belgeler tarayıcı tarafından çözümlenerek (parse) belgenin ağaç yapısı oluşturulur ve her bir ögeye hedefteki yayın türüne (media type - @media) göre bir değer atanır.
En son geçerli olacak değerler dört basamaklı bir işlemin sonucunda belirlenmiş olur.
Değer öncelikle belirlenmiş değerdir. Bu daha sonra kalıtsallık için işlenmiş değere dönüştürülür. Sonrasında eğer gerekliyse kullanılan değere dönüştürülür. Ve en sonunda yerel ortamdaki sınırlamalar göz önüne alınarak gerçek değere dönüştürülür.
-
Belirlenmiş Değerler
- Tarayıcıdan geliyorsa o değeri kullan.
- Tarayıcıdan gelen değer yoksa; değer kalıtsallıktan geliyorsa ve etiket root etiket değilse ata etiketin işlenmiş değerini kullan.
- Kalıtsallıktan da değer gelmiyorsa özelliğin öntanımlı değerini kullan. Her bir özelliğin kendine özgü öntanımlı değeri vardır.
-
İşlenmiş Değerler
Belirlenmiş değerler akış sırasında işlenmiş değerlere dönüştürülür. Örneğinemya daexuzantılı bir uzunluk değeri piksel değerine ya da mutlak uzunluğa dönüştürülür.Değerlerin işlenmesi kullanıcı ajanlarının (KA) sayfayı yeniden sağlamasına (render) kesinlikle yol açmaz.
-
Kullanılan Değerler
İşlenmiş değerler belgeyi olabildiğince yapılandırmaksızın (formatting) işlenmeye çalışılır. Ne var ki eğer bir etiketin genişlik değeri yüzde (%) türünden girildiyse ata etiketin genişliği belirlenmeden çocuğun genişliği yüzde değerinden hesaplanamaz.
Kullanılan değer; işlenmiş değerin mutlak değerlere dönüştürülmesi için geri kalan sınırlamaların göz önüne alınmış durumudur. -
Gerçek Değer
İlkesel olarak, gerçek değer; sağlamada kullanılan değerdir. Fakat bu değeri KA o ortamda uygulayamayabilir. Örneğin çerçeve değerleri o ortamda ondalıklı değil yalnızca tam sayı genişliğinde olabiliyordur.
Gerçek değer diğer tüm sınırlamalar göz önüne alınarak uygulanan değerdir.
CSS'te Baskınlık ve Kalıtsallık Özeti
Tarayıcı önce akıştan gelen değerleri, yoksa etiket root etiket değilse kalıtsallıktan gelen değerleri, kalıtsallıktan da değer gelmiyorsa öntanımlı değerleri uygularken en kısa yoldan ve de sayfayı yeniden çizmeye gerek kalmayacak biçimde ve rem gibi göreli değerleri mutlak değerlere dönüştürdükten sonra var olan sınırlamalar dahilinde sayfayı gösterir.
CSS'te Akış
Biçim dosyaları 3 farklı kaynaktan gelir: Yazar, kullanıcı, ve kullanıcı ajanı.
- Yazar: Belgenin diline göre, kaynak belgeye biçim dosyası ekler. Biçim dosyaları HTML'ye gömülebilir ya da biçim dosyalarına bağlantı kurulabilir.
- Kullanıcı: Kullanıcı belgenin tasarımını belirleyebilmelidir. Örnek olarak, kullanıcı, belge için biçim dosyası seçebilmelidir ya da kullanıcı ajanı kullanıcının biçim dosyası oluşturabilmesi için arayüz sunmalıdır (ya da sunmuş gibi davranmalıdır).
- Kullanıcı ajanı: Kullanıcı ajanları belgeye öntanımlı bir biçim dosyası uygulamalıdırlar (ya da uygulamış gibi davranmalıdırlar). Kullanıcı ajanının öntanımlı biçim dosyası, örneğin
<em>etiketindeki yazıların yatık (italik) olması gibi, temel bazı düzenlemeleri yapmalıdır.
Öntanımlı olarak, yazarın biçim dosyası kuralları kullanıcının biçim dosyası kurallarından daha baskındır. Ancak !important konusunda tam tersidir -span{color:blue !important;}-. !important kullanımında kullanıcının (örneğin bir web tasarımcısının) yaptığı tanımlama daha baskındır.
CSS'te Akış Sıralaması
- Hedefteki yayın türü için eşleşen bütün etiket ve özellikleri uygula.
-
Önemine (olağan ve önemli) ve kaynağına göre (yazar, kullanıcı ya da kullanıcı ajanı) düzenle:
-daha az baskından daha baskına doğru, artan biçimde-- Kullanıcı ajanı tanımlamaları
- Kullanıcının olağan tanımlamaları
- Yazarın olağan tanımlamaları
- Yazarın önemli (
!important) tanımlamaları - Kullanıcının önemli (
!important) tanımlamaları
- Aynı önemde ve aynı kaynaktan olan değerleri düzenle: Daha özelleşmiş seçiciler daha genel olanlara baskınlık kuracak. Doğal olarak yalancı-ögeler ve yalancı-sınıflar olağan seçici ve olağan sınıf olarak sayılıyorlar.
- İki tanımlama da aynı ağırlığa, kaynağa ve de baskınlığa (özelleşmişliğe) iye ise sonra yazılan geçerlidir.
CSS'te Baskınlık
Seçicilerde style özelliği yoktur. style, köprü metin etiketlerinin bir özelliğidir.
1. Eğer değer style'dan geliyorsa a=1, style'dan gelmiyorsa a=0. Yani: a=1, b=0, c=0, and d=0
(etikete gömülü CSS: <div style="color:red;"></div>)
2. Seçicideki kimlikleri say: (=b)
3. Seçicideki etiket özelliklerini ve yalancı sınıfları say: (=c)
3. Seçicideki köprü metin etiketlerini ve yalancı ögeleri say: (=d)
CSS Seçici Örnekleri:
* {} /* a=0 b=0 c=0 d=0 -> baskınlık = 0,0,0,0 */
li {} /* a=0 b=0 c=0 d=1 -> baskınlık = 0,0,0,1 */
li:first-line {} /* a=0 b=0 c=0 d=2 -> baskınlık = 0,0,0,2 */
ul li {} /* a=0 b=0 c=0 d=2 -> baskınlık = 0,0,0,2 */
ul ol+li {} /* a=0 b=0 c=0 d=3 -> baskınlık = 0,0,0,3 */
h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 -> baskınlık = 0,0,1,1 */
ul ol li.red {} /* a=0 b=0 c=1 d=3 -> baskınlık = 0,0,1,3 */
li.red.level {} /* a=0 b=0 c=2 d=1 -> baskınlık = 0,0,2,1 */
#x34y {} /* a=0 b=1 c=0 d=0 -> baskınlık = 0,1,0,0 */
style="" /* a=1 b=0 c=0 d=0 -> baskınlık = 1,0,0,0 */CSS Seçicileri ile Baskınlık Kurma Yöntemi
Yukarıdaki baskınlık kuralları göz önüne alınarak:
body>footer{color:red;} Sayfaya iliştirilen CSS dosyasındaki bu seçici ile belirlenen <footer> etiketi bazı sayfalarda farklı renkte görünmeliyse bu sayfalara;
1. Sonra yazılan geçerli olacağı için o sayfaya iliştirilmiş CSS'ten sonra gelecek biçimde tanımlama yapılır: body > footer{color:white;}
2. Ya da o sayfada şu biçimde baskınlık kurulmalı:
body.sınıfSeçicisi > footer{color:white;}
3. Ya da sayfadaki etikete şu biçimde kimlik (ya da sınıf) atanarak da seçicide baskınlık kurulabilir:
body > footer#dikkat{color:white;}
Her üç durumda da sayfada beyaz renk (white) geçerlidir!
...
Bir sayfada a{color:red;} seçicisi ile bütün bağlantılar bu biçimde kırmızı yapıldıktan sonra;
paragraftaki bağlantılar mavi yapılmak isteniyorsa
p > a{color:blue;}
seçicisi ile ilk seçici üstünde baskınlık kurularak renk mavi yapılır.
Bu seçicilerle sayfadaki paragraf içindeki bağlantılar dışında kalan tüm bağlantılar kırmızı renge iyedir. Paragraf içindeki bağlantılar ise mavi renklidir.
...
div.kutu > a{color:white;}
a{color:red;}
Geçerli renk yine beyazdır.
...
p > a{color:white;}
p > a{color:yellow;}
p a{color:red;}
Aynı kaynak ve aynı baskınlıkta sonra yazılan geçerlidir. Geçerli renk kırmızıdır.
Ağaç Yapısı ve Kalıtsallık İlişkisi
Kalıtsallığın mantığı oldukça kolaydır. Bir çok yazılımda ağaç yapılarını görmüşsünüzdür. Öğrenme, geliştirme, üretme ve de hata ayıklamada oldukça yardımcı olur. Görsel destek sağlar. Aşağıdaki örnek de ağaç yapısında bir belge.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>İlk Sayfamı Yapıyorum</title>
</head>
<body>
<p>Selam Dünyalı !</p>
</body>
</html>Kısaca:
Çocuklar örnekteki ağaç yapısında atalarına göre satırın daha iç bölümünden başlıyor.
Ağaç yapısıyla ilgili daha fazla bilgi için HTML Temel Bilgisi sayfasına bakın.
CSS Kalıtsallık
Bazı özellikler, renk (color) gibi, kalıtsallık özelliğine iyedir.
Ata için örnek olarak color:red; özelliği tanımlanmışsa bu renk kalıtsalıktan dolayı çocuklara hatta torunlara ve de onların torunlarının torunlarına da geçer.
Yukarıdaki köprü metinde <body> etiketine kırmızı renk değerini atarsanız "Selam Dünyalı !" yani <p> etiketi kırmızı renkte görünecektir.
inherit
Kullanımı: özellik:inherit;
Eğer CSS özelliğinin kalıtsallık desteği yok ise değer yine de çocuğa aktarılabilir.
Bunu sağlayan inherit değeri CSS2 ile gelmiştir. CSS2 ile gelen evrensel değerlerden biridir.
Hangi CSS Özelliklerinde Kalıtsallık Var ?
Tam dizelge henüz elimde yok. Zaman içerisinde dizelge tamamlanınca burada konuyla ilgili gerekli düzenleme yapılacak.
İleriki sayfalarda color özelliği gibi özellikler açıklanırken, kalıtsal olup olmadığı belirtiliyor.
Tüm özellikler tamamlanınca dizelge oluşturulup burada da dizelgeye bir bağlantı olacak.
Bilinmesi Zorunlu Mu ? Yanıt: Hem Evet Hem Hayır !
Biraz mantık ve gözlemle ilgili CSS özelliğinin kalıtsallık desteği olup olmadığı öğrenilebilir.
Kalıtsallık kullandığınız özellik tarafından destekleniyorsa; ataya değer verdiğinizde özelliğin etkileri atanın çocuklarında da görülecektir.
Kalıtsallık yok ise kalıtsallık yoktur.
Kalıtsallık color gibi bazı özelliklerde kolay görülemez. Bu durumda farklı çözüm yolları var. Geliştirici aracı kullanmak ya da Deneme & Yanılma yani gözlem.
Özellikte kalıtsallık olup olmadığını ilgili özelliğin sayfasına gidip bakarak da bulabilirsiniz.
Ancak color özelliği gibi belli başlı CSS özellikleri bilinirse kodlar daha pratik yazılabilir.