HTML Image Map b2s1 Ek4 Ek 6 Ek5 b8s1 b1s1  Ek7 Nitelikler b5s1.htm Ek2 b3s1 Ek3 b7s1 Ek7 Elementler Ek1 b4s1 b6s1  Ek7 Catalogue index previous next

Katlı Stil Sayfaları (Sürüm3)

Selektörler

Sayfa 3 / 3


 

Pseudo-elementler

 

Pseudo-element Kavramı

 

Pseudo-element kavramı, belge işaretleme dili tarafından belirtilenden daha fazla soyutlama olanağı elde edilmesi için oluşturulmuştur. Örnek olarak paragrafın ilk satırı veya ilk harfinin hedeflenmesinin pseudo-elementlerin kullanımı dışında yolu bulunmamaktadır. Ayrıca, belge kodlarında bulunmayan bilgilere de ancak pseudo-elementlerin kullanımı ile ulaşabiliriz. Örnek olarak ::before ve ::after pseudo-elementleri, başka türlü erişilemeyecek olan oluşturulan içeriğe referans verme olanağını sağlar.

Pseudo-elementlerin pseudo-sınıflarından farklı olması için biribiribirini takip eden iki tane kolon (::) işareti ile gösterilirler. Pseudo sözcüğü antik Grekçe de "sahte, görüntüsü yanıltıcı, gerçeğe benzeyen fakat gerçek olmayan" anlamına gelmektedir. Pesudo elementler de belgenin kodlamasında kullanılmış gerçek elementlere uygulanmazlar. Bunun yerine, uygulanmaları gereken yerde, belirtilen kuralların uygulandığı yeni ve görünmez elementler yaratırlar. Bunun için sahte element olarak adlandırılmışlardır.

 

::first-line Pseudo-elementi

 

Bu pseudo-elementin tanımı da kullanımı da kolaydır. ::first-line pseudo elementi, içeriğin ilk satırının formatlanmasını sağlar. Örnek,

bu pseudo-element, E 6.02 SP2 de desteklendiğinden kodlamalarda rahatlıkla kullanılabilir. Herşeyden önce ::first-line sahte elementinin herhangibir gerçek paragrafla uyuşmayacağını belirtelim. Bu ifade, her gerçek paragrafın önünde, gerçek paragrafın ilk satırını içeren yeni bir sanal paragraf yaratacaktır. Bu sanal sahta paragrafın içeriğinin tümü büyük harfle yazılacaktır. Bir uygulama örneği, firstline.htm dosyasında incelenebilir. Doğal olarak belge çözümleyicilerde görsel olarak çözümlenen belgelerde, bir paragrafın satır uzunluğu, açık pencerenin boyu, font büyüklüğü gibi birçok faktörlere bağlıdır ve önceden öngörülemez. Bu kural her görüntülenme durumunda, daima ilk satırı etkileyeceğinden çok yararlı olabilir, fakat Türkçe karakterlere dikkat edilmelidir. Burada özellikle ı harfinin büyük harfe döndürülmesi IE 6.02 SP2 de sorun yaratabilir. Firefox 1.0 da ise sorunsuz olarak gerçekleşmektedir.

p::first-line Pseudo elementi sadece blok-düzey elementlerle kullanılabilir.

p::first-line Pseudo elementi bazı kısıtlamalarla prensip olarak bir satırıiçi elementi olarak etki yapar. Kısıtlamalar daha çok kullanımla ilgiidir. p::first-line Pseudo elementi ile, yazıtipi (font) özellikleri, renk özellikleri, arkaplan (background) özellikleri, 'word-spacing', 'letter-spacing', 'text-decoration', 'vertical-align', 'text-transform', 'line-height', 'text-shadow', ve 'clear' özellikleri kullanılabilir.

 

::first-letter Pseudo-elementi

 

Bu pseudo-element içeriğin ilk harfinin formatlanmasını sağlar. Örnek,

p::first-letter Pseudo-elementi, tüm elementlere uygulanabilir ve IE 6.02 SP2 de desteklendiğinden kodlamalarda rahatlıkla kullanılabilir.

p::first-letter Pseudo-elementi, eğer CSS yüzme özelliği 'float:none' ise, çoğu kullanımla ilgili bazı kısıtlamalarla bir satıriçi elementi olarak hareket eder. Bunun dışında yüzen (floating) bir element konumundadır. p::first-letter Pseudo-elementi ile birlikte, yazıtipi (font) özellikleri, renk özellikleri, arkaplan (background) özellikleri, marj özellikleri, gezinti alanı (padding) özellikleri, kenar alanı (border) özellikleri, 'text-decoration', 'vertical-align' (sadece 'float:none'ise) , 'text-transform', 'line-height', 'float', 'text-shadow', ve 'clear' özellikleri kullanılabilir.

p::first-letter Pseudo-elementi ile bir uygulama :

Bu program, IE 6.02 SP2 ile çözümlendiğinde, alınan sonucun en üst köşesi, aşağıda görülmektedir:

resim 2

Programın tümü, first-letter.htm programının IE 6.02 SP1 veya SP2 ve Firefox 1.0 da çözümlenmesi ile görülebilir.

 

Kullanıcı Arayüzü Element Parçacıkları Pseudo-elementleri

 

::selection (seçilmiş kısım) Pseudo-elementi

Bu pseudo-element, kullanıcı tarafından seçilmiş belge kısmına uygulanır. Örnek,

Bu pseudo-element, E 6.02 SP2 de desteklenmediğinden kullanımı uygun değildir.

::before ve :: after Pseudo-elementleri

Bu pseudo-element, oluşturulan içeriği hedefler ve oluşturulan içerikler arasında incelenecektir.

 

Birleştiriciler (Combinators)

 

Soy Birleştiricisi (Descendent Combinator)

 

Bazı durumlarda, sayfa yazarları bir elementin soyundan gelen bir elementi işaret etmek isteyebilirler. Örnek olarak <ul> (unordened element=sırasız liste) içindeki bir liste elemanı <li> gibi.

Bir başka elementin soyundan gelen elementleri belirten birleştirici, birleştirilecek basit selektör isimlerii bir boşluk ile ayrılarak belirtilir.

Bu ifade, bir sırasız liste elementinin soyundan gelen bir liste elementini hedeflemektedir. Bu selektörün etkisini, descendent combinators 1.htm programında izleyebilirsiniz. Bu selektör IE 6.02 SP2 ve FireFox 1.0 tarafından desteklenmektedir.

Bu ifade aslında yazarlar için, son derece yararlı bir olanak sağlamaktadır. Büyük bir Web topluluğunuz varsa ve her sayfadaki liste elementleriniz de birbirine benziyorsa, sırasız listelere bir türlü, sırasız listelere de bir başka türlü görüntü verebilirsiniz. Her sayfaya uygulanan bir CSS programı yazılması ile, her defasında liste elemanlarına "class" tanımlaması yapmak artık gerekmez. Bunun sakıncalı yönü ise, liste elemenlarının görünümünü baştan belirlenmiş olması ve bu görüntünün üstüne çıkmak (override etmek) için liste elemanına yeni bir stil niteliği tanımının yapılması gerektiğidir. Bu selektörün kullanımın rasyonel kriteryumu da bu çelişkiden türetilebilir. Eğer doğrudan tanım ile kullanacağınız liste elemanı sayısı, yeniden stil tanınmasını gerektirenlerden fazla olacaksa bu selektörün kullanım gerekçesi vardır, aksi halde yoktur.

Torunları belirtmek için, her iki tarafında da boşluk karakteri olan bir asteristik (*) kullanılır.

Bu ifade henüz hiçbir belge çözümleyicide desteklenmemektedir.

Yine çok özel bir soy birleştiricisi örneği:

Bu ifade, bir paragraf elementinin içerdiği bir ve "id" niteliği verilmiş bir herhangibir elementi hedefler. Burada p ile asteristik (*) arasında bir boşluk karakteri bulunmaktadır. Henüz IE 6.02 SP2 tarafından desteklenmemekte, fakat FireFox 1.0 tarafından desteklenmektedir. Eğer daha özel olarak belirli bir elemanı hedeflersek,

şeklinde bir selektör oluşturabiliriz. Bu selektör, bir bölüm elementinin içerdiği, id niteliği verilmiş bir paragraf elementini hedeflemektedir. Bu selektör tipi de, henüz IE 6.02 SP2 tarafından desteklenmemekte, fakat FireFox 1.0 tarafından desteklenmektedir. Bu selektörün etkisini descendent combinators 2.htm programını FireFox 1.0 ile açarak izleyebilirsiniz. Doğal olarak, genel destek açısından id selektör tipleri henüz kullanılmamalıdır.

Genelden çok özele doğru gidildiğinde, hem selektörlerin kullanılma gerekleri, hem de belge çözümleyicilerin de bunlara destekleri azalır. Yine de öyle durumlar olur ki, sadece çok özel selektörlerden yararlı olabilirler fakat genellikle bu ifadelerin de destekleri bulunamaz.

 

Çocuk Birleştiricisi (Child Combinator)

 

Bir başka elementin çocuğu olan bir element, her iki tarafında isteğe bağlı boşluk karakteri olan bir> işareti ile gösterilir. Örnek,

Burada ilk ifade, bir bölüm elementinin çocuğu olan bir sırasız bir liste elementini, ikinci ifade ise, <body> elementinin çocuğu olan bir paragraf elementini hedeflemektedir. Aşağıdaki gibi detaylı kalıtım mekanizmaları da tanımlanabilir.

Burada atası bir bölüm elementi olan (bir bölüm elementinin soyundan gelen) bir paragraf elementinin çocuğu olan bir sırasız liste lementinin soyundan gelen, bir liste elementinin çocuğu olan bir paragraf elementini hedefleyen bir selektör grubu (bileşik selektör) yazılmıştır. Yukarıdaki örnekte bulunan selektörlerin etkileri, child combinator1.htm programında incelenebilir. Bu programda da gözlenebileceği gibi, bu mekanizmalar şu anda IE 6.02 SP2 de desteklenmemekte ve sadece FireFox 1.0 tarafından desteklenmektedir. Bu durumda çocuk selektör tipleri, genel uyumu sağlayamayacaklarından şimdilik kullanımları uygun değildir.

 

Bitişik Soydaş Element Birleştiricileri (Adjacent Sibling Element Combinators)

 

Kardeş Element Doğrudan Bitişme Birleştiricisi

Bu tür birleştirici, iki selektör topluluğunu birleştiren bir artı (+) işaretidir. Bu artı işaretinin her iki tarafındaki selektör toplulukları tarafından temsil edilen elementler aynı ana-babayı paylaşırlar ve ikinci topluluk, birincisinin hemen ardından gelir. Örnek

Kardeş Element Dolaylı Bitişme Birleştiricisi

Bu tür birleştirici, iki selektör topluluğunu birleştiren bir tilde (~) işaretidir. Bu tilde işaretinin her iki tarafındaki selektör toplulukları tarafından temsil edilen elementler aynı ana-babayı paylaşırlar ve ikinci topluluğun birincisinin hemen ardından gelmesi gerekmez. Örnek,

tanımına, aşağıdaki <ul> elementi tarafından uyum sağlanacaktır.

Yukarıdaki soysal selektör türünün etkileri child combinator2.htm programı incelenerek görülebilir. Bu selektör henüz hiçbir belge çözümleyicide desteklenmemektedir.

 

Selektör Spesifikliğinin Hesaplanması

 

Selektör spesifikliğinin hesaplanması için,

Elde edilen a b c sayıları stringler gibi birleştirilir. Elde edilen sayı, selektör spesifikliğidir. Örnek,

 

Selektör spesifikliği, özelliklerin kalıtımla edinilmesinde, önemli bir kriteryumdur.

Thursday, October 6, 2005 19:42

validate in W3C !