soru sor sorular uzmanlar

CSS3 target seçicisi nedir? nasıl kullanılır? kullanım alanları nerelerdir?

ergin (2539) 11 yıl önce sordu

CSS3 target seçicisi nedir? nasıl kullanılır?

CSS3 target seçicisi nerelerde kullanılır?

CSS3 target seçicisini kullanmanın avantajları nelerdir?

 

 

css3 target seçicisi nedir kullanımı

Toplam 1 cevap

ergin (2539) 11 yıl önce cevapladı

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.