Ardaşık Stil Sayfaları (CSS)

26 Ekim 2007

Sözde-Öğeler

Dil Kuralı (Syntax)

selector:pseudo-element {property: value}

CSS sınıfları sözde öğelerle de kullanılabilir:
 
selector.class:pseudo-element {property: value}

:first-line İlk satır sözde-öğesi


"first-line" sözde öğesi ilk satıra özel stiller tanımlamak için kullanılır. 
p:first-line {color:#0000ff;font-variant:small-caps}

<p>Buradaki yazı iki ya da daha fazla satıra yayılır</p>

Çıktı aşağıdaki gibidir:

Buradaki yazı iki ya da
daha fazla satıra yayılır


Yukarıdaki örnekte, tarayıcı ilk satırı "first-line" sözde öğesine göre kalıplar. Tarayıcının satırı nereden kıracağı ise tarayıcı penceresinin enine bağlıdır.

Not: "first-line" sözde öğesi blok düzeyi öğelerde kullanılabilir..

Not: Aşağıdaki özellikler "first-line" sözde öğesine uygulanabilir:

  • yazı-tipi özelliği
  • renk özelliği
  • art alan özellikleri
  • kelime boşlukları
  • harfler arası boşluklar
  • yazı dekorasyonu
  • düşey ayarlama
  • yazı-çevirimi
  • satır-yüksekliği
  • temizle

:first-letter Sözde öğesi


"first-letter" sözde öğesi bir seçici içindeki yazının ilk harfine özel stil tanımlamak için kullanılır:
 
p:first-letter {color:#ff0000;font-size:xx-large}

<p>The first words of an article...</p>

Çıktı aşağıdakine benzer:
The first words of an article...
Not: "first-letter" sözde öğesi bloklu öğelerle kullanılabilir.

Not: Aşağıdaki özellikler "first-letter" sözde öğesine uygulanabilir:
  • yazı-tipi özellikleri
  • color özellikleri
  • background özellikleri
  • margin özellikleri
  • padding özellikleri
  • border özellikleri
  • yazı-dekorasyonu
  • vertical-align (eğer 'float' değeri 'none' ise)
  • text-transform
  • line-height
  • float
  • clear

Sözde öğeler ve CSS Sınıfları


Sözde öğeler CSS sınıflarıyla birleştirilebilir: 

p.article:first-letter {color:#ff0000}

<p class="article">A paragraph in an article</p>

Yukarıdaki örnekte class="article" olan tüm paragrafların ilk harflerini kırmızı yapar.

Çoklu sözde öğeleri


Birçok sözde öğe birleştirilebilir:
 
p:first-letter {color:#ff0000;font-size:xx-large}
p:first-line {color:#0000ff}

<p>The first words of an article...</p>

Çıktı şuna benzer:

The first
words of an
article...


Yukarıdaki örnekte paragrafın ilk harfi 24pt ve kırmızıdır. İlk satırın diğer harfleri mavi renktedir. Paragrafın diğer satırları varsayılan renktedir.

CSS2 - :before sözde öğesi


":before" sözde öğesi bir öğenin önüne bazı içerikleri eklemek için kullanılır.

Aşağıdaki stil her <h1> öğesinden önce ses çıkartır: 
h1:before
{
content: url(beep.wav)
}

CSS2 - :after Sözde öğe


":after" sözde öğesi bir öğenin arkasından bazı içerikler eklemekte kullanılır.

<h1> öğesinden sonra ses kaydı üretir:
 
h1:after
{
content: url(beep.wav)
}

Pseudo-elements


Destekleyen Tarayıcılar:IE: Internet Explorer, F: Firefox, N: Netscape.
W3C: Buradaki sayısal değer CSS türünü (CSS1 ya da CSS2) gösterir.

Sözde-öğe Amacı IE F N W3C
:first-letter Yazının ilk harfine özel stil ekler 5 1 8 1
:first-line Yazının ilk satırına özel stil ekler 5 1 8 1
:before Bir öğeden önce bazı içerikler ekler   1.5 8 2
:after Bir öğeden sonra bazı içerikler ekler   1.5 8 2


8 2