CSS SÖZDE SINIFLAR - SÖZDE ELEMENTLER

Sözde denmesinin nedeni normal HTML hiyerarsisi içinde bu sınıf elemanların bulunmamasındandır. Bu sınıf ve elemanlar HTML hiyerarşisi ile erişemediğimiz eleman ve sınıflara erişmemizi sağlar.

Sözde(Pseudo) Sınıf Seçicileri


Sözde Dinamik Sınıfları sayfa görünümüne çok büyük katkılar yapabilir. Bu sınıflar genelde linklere uygulanır ancak birçok kullanım alanları vardır.

:focus - Odaklanan elemana stil tanımlaması yapmak için kullanılır Örnek: <input> alanına içerik girerken metin giriş alanına odaklandığında yazı, background, renk ve border değişimi yapılması gibi özelliklerde kullanabiliriz.

CSS:

 input:focus{background-color:yellow} 
 

HTML:

 Adres:
 

ÇIKTI:

Adres:

:active - Aktif elemanına stil atamak için kullanılır.

:hover - Bir elemanın üzerine farenin imleci geldiğinde yapılacak tanımlama için kullanılır.

CSS:

div{background-color:black;width:120px;height:40px;
color:white} 

div:hover{background-color:blue}

HTML:

KUTU

ÇIKTI:

KUTU

Sözde Link sınıfı


Sözde Link sınıf stilleri oluşturulurken iki Sözde Link sınıfı vardır.

:link - Ziyaret edilmemiş linkin alacağı renk ve durum

:visited - Ziyaret edilmiş bir linkin alacağı renk ve durum

ÖRNEK:

 a:link {color:blue} 
 
 a:visited {color:red} 
 

:hover - mause ile linkin üzerine gelindiğinde özelliklerinin işleme konulması. Örneğin mause linkin üzerine geldiğinde altı çizili olması isteniyorsa hover kısmında text-decoration :underline seçilmelidir. Üstü çizili olması için overline seçilmelidir. Hem altı hem üstü çizili olması için iki tane hover kullanılmalıdır. Ayrıca link yazısının rengi değiştirilebilir.

CSS:

  a{color:green;font-size:20px}
  
  a:hover{color:blue}
 

HTML:

GOOGLE

ÇIKTI:

:active - Linkin tıklandığı anda alacağı renk ve durum

color : Linklerin, ziyaret edilen linklerin.. renk özelliğinin ayarlanması burada yapılır.

text-decoration : none seçilirse ilgili linkin altı çizili özelliği ortadan kalkar. underline seçilirse ilgili linkin altı çizili özelliği devam eder.

Sözde sınıf seçicileri birleştirmek


CSS 2.1 ile birlikte aynı seçiciye ait sözde sınıfları birleştirme özelliği de gelmiştir.

Örneğin ziyaret edilmiş linklerin : hover özelliği ile ziyaret edilmemiş linklerin : hover özelliğini farklı atamak istersek.

 a:link:hover {color:red;} 
 
 a:visited:hover {color:darkblue;} 

Sözde(Pseudo) Elemanlar seçicileri


first-letter (ilk harf): Bir blok-level elemanın ilk harfine stil tanımlaması yapmak için kullanılır.

CSS:

 p:first-letter{font-size:28px;color:brown}
 

HTML:

 

Sözde(Pseudo) Elemanlar seçicileri

ÇIKTI:

Sözde(Pseudo) Elemanlar seçicileri

first-line (ilk satır): Bir metnin ilk satırına stil atamak için kullanılır.

CSS:

 p:first-line{background-color:Salmon}
 

HTML:

 

Sözde(Pseudo) Elemanlar seçicileri
2. satır
3.satır

ÇIKTI:

Sözde(Pseudo) Elemanlar seçicileri
2. satır
3. satır

before ve after elemanları: Bir elemanın öncesine ve sonrasına bir içerik veya özellik eklemek için kullanılır.

CSS:

 p:before{content:"NOT:" /*content yazı ekler*/ }
 p:after{content:"<-BİTTİ->"}
 

HTML:

 

Sözde(Pseudo) Elemanlar seçicileri

ÇIKTI:

Sözde(Pseudo) Elemanlar seçicileri

Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlacaktır.

4101

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
POPÜLER MAKALE
  • HTML RESME LİNK VERME
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML DİV ve SPAN NEDİR?
  • HTML FORM OLUŞTURMA
  • HTML KAYAN RESİM VE Marguee KULLANIMI
  • HTML ARKAPLANA MÜZİK EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML RESİM EKLEME
  • PHP ceil()-floor()-round() YUVARLAMA FONKSİYONU
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.