0
0
CSS3 ile birlikte gelen :target seçicisi yeni seçilerden birisidir. :target seçicisi doküman içi linklere odaklanmamızı sağlamaktadır. Daha önce bu işi yapmak için javascript kullanmak zorundaydık. CSS3’ün bizlere kazandırdığı birçok yenilikte olduğu gibi bu özellikte basit bir şekilde sayfalarımıza çok güzel ve görsel açıdan harika etkiler kazandırmaktadır. :target sözde sınıfı :hover seçicisi gibi dinamik bir seçicidir. En büyük avantajı ise seçim işlemi için javascript kullanmadan bu işlemi yapabiliyor olmamızdır.
CSS3 target özelliğini kullanarak birçok basit ve çok kullanışlı uygulamalar yapabiliriz. CSS3 target ile Basit Akordiyon, Resim Galerisi, Dipnotlar gibi bir sürü uygulama yapabiliriz.
CSS3 target kullanımı
div:target { background-color: #0000ff; }
örnekte görüldüğü gibi istediğimiz elemente bu şekilde uygulayabiliriz.
Sayfa içinde kullanımına ilişkin bir örnek vermemiz gerekirse;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>uzmanım.net</title> <style> body { width:500px; margin:0 auto; font:13px/1.5em Arial; border-color:#cccccc; border-style:solid; border-width:20px 5px 50px 5px; padding:25px } div { border:1px solid #06F; margin-bottom:10px; padding:10px; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; } div:target { -moz-box-shadow: 0 0 15px #9c9c9c; -webkit-box-shadow: 0 0 15px #9c9c9c; box-shadow: 0 0 15px #9c9c9c; background-color:#5B9EDE; border-width:3px } </style> </head> <body> <h1>uzmanım.net</h1> <p><a href="#b1">Kullanıcılar</a> | <a href="#b2">Sorular</a> | <a href="#b3">Etiketler</a></p> <div id="b1"> <h3>Kullanıcılar</h3> <p>uzmanım.net kullanıcıları burada listelenmektedir.</p> <p>ergin</p> <p>alattin</p> <p>ece</p> </div> <div id="b2"> <h3>Sorular</h3> <p>CSS3 target seçicisi nedir? nasıl kullanılır?</p> <p>Java ile iki string ifadeyi nasıl karşılaştırırım?</p> <p>Usb flash disk format / biçimlendirme sorunu</p> </div> <div id="b3"> <h3>Etiketler</h3> <p> uzmanım.net kullanıcıları burada listelenmektedir.</p> <p>CSS3</p> <p>target</p> <p>javascript</p> </div> </body> </html>
web uygulamasının demo halini görebilirsiniz.
Cevap yazabilmek için üye girişi yapmalısınız.
Eğer uzmanim.net üyesiyseniz giriş yapabilirsiniz: üye girişi yap
uzmanim.net'e üye olmak çok kolaydır: hemen kayıt ol
hakan (15) 
darkcrak (10) 
sselim (5) 
mat7 (5) 
hikmetyy (2)