CSS Sözde Öğeler – Pseudo-Elements

CSS sözde öğeleri, bazı seçicilere özel efektler eklemek için kullanılır.

pseudo-elements Yazım Kuralı

Pseudo-Class yazım kuralını görelim.

seçici:pseudo-element {özellik:değer;}

Örnek olarak görelim.

p:first-line {color:orange;}

Class ile birlikte Pseudo-Elements kullanımını görelim.

seçici.class:pseudo-element {özellik:değer;}

Örnek olarak görelim.

p.ilk_satır_renkli:first-letter {
color:orange;
}

<p> Burası paragrafımız. </p>

:first-line Özelliği

Bir elemenanın ilk satırına stil vermek için kullanılır. Sonra ki satırlar normal olarak görüntülenir.

p:first-line {
color:orange;
}

( Kodun okunuşu: p elemanının ilk satırında ki metinlerin rengi turuncu olsun. )

:first-letter Özelliği

Bir elemenanın ilk satırında ki ilk harfe/karaktere stil vermek için kullanılır. Sonra ki harfler/karakterler normal olarak görüntülenir.

p:first-letter {
color:orange;
font-size:25px;
}

(Kodun okunuşu: p elemanının ilk satırında ki ilk harfin/karakterin rengi turuncu olsun ve font boyutu 25 piksel olsun.)

:after ve :before Özellikleri

Bir etiket içeriğinin önüne bir içerik eklenmek istendiğinde :before kullanılabilir. Bir etiket içeriğinin sonuna bir içerik eklenmek istendiğinde :after kullanılabilir.

CSS Kodumuz:

p:before {
{content:url(dosya.jpg);
}

h1:after {
{content:url(dosya.jpg);
}

HTML/XHTML Kodumuz:

<p> Bu bir paragraf </p>

<h1> Burası bir başlık</h1>

Bu kod çalıştırıldığında p etiketlerinin içerikleri başında dosya.jpg adlı gorseli gösterecektir ve h1 etiketlerinin içerikleri sonunda dosya.jpg adlı gorseli gösterecektir.

Reklamlar

Bir Yanıt Bırakın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Google+ fotoğrafı

Google+ hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Connecting to %s