Özellik Seçicileri(Attribute Selectors)
Bu konuya biraz geç değindik biliyorum. Ancak bu konuyu (X)HTML Sayfa Yapısı ve CSS Kullanımı makalesi içinde yazmayı düşündüğümde IE bu özelliği desteklemiyordu(şimdi IE7 bu özelliği desteklemektedir.) bu nedenle yazımını ertelemiştim, sonrada unuttum gitti açıkçası neyse sonunda yazıyorum işte:)
CSS ile tanımlama yaparken Xhtml nesnelerine erişmede bazen sıkıntı çekeriz. Ne yapsak da bu elemente atama yapsak diye bu genelde programcı – Arayüz Kod Yazarı ayrımının olduğu projelerde çok başımıza gelir. Bu sorunu kökünden çözen bir yöntemdir Özellik Seçicileri.
Özellik Seçicileri HTML, XHTML veya XML dokümanlarındaki seçilen etiketin özelliklerine veya özellik değerlerine göre tanımlama yapmamızı sağlar. Bir örnek verecek olursak sayfamızdaki bir resme(örn: grafik.gif) kenarlık ataması yapmak istersek:
img[src="grafik.gif"]{
border: 1px solid #000;
}
Dört çeşit Özellik Seçicisi vardır.
1- Basit Özellik Seçicisi
Belirli bir etiketin(örn:img) özelligine(örn:alt) göre tanımlama yapmamızı sağlar.
Bir örnek yapalım
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS'in yapısı</title>
<style type="text/css">
img[alt] {
border: 5px solid lime
}
</style>
</head>
<body>
<img src="logo.gif" alt="Logo" width="32" height="41" />
</body>
</html>
Örneği görmek için tıklayınız.
Yukarıdaki kodlamada birden fazla <img> tanımı vardır. Ama biz sadece
alt tanımı yaptıklarımıza belli özellikler atamak istiyoruz. Bunun için Basit
Özellik Seçicisini kullanabiliriz.
Internet Explorer 6.0: desteklemiyor 7.0: destekliyor ;
Firefox: destekliyor ;
Google Chrome: destekliyor ;
Opera: destekliyor
2- Özellik Değeri Seçicisi
Bir etiketin özellik değerine göre tanımlama yapmamızı sağlar.
Bir örnek yapalım
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"
/>
<title>CSS'in yapısı</title>
<style type="text/css">
input[type="text"] {
border: 1px solid #000;
width: 150px;
}
</style>
</head>
<body>
<p>Adınız : <input type="text" name="ad" /></p>
<p>Cinsiyetiniz: <input type="radio" name="cinsiyet" id="erkek" />
Erkek <input type="radio" name="cinsiyet" id="kadin" /> Kadın
</p>
</body>
</html>
Örneği görmek için tıklayınız.
Genelde formlarda tanımlama yaparken sadece metin girisi yaptıgımız alanlara atama yapmakta zorlanırız. Bunun sebebi <input> etiketini sadece metin girisi için kullanılmamasıdır, radyo buton ve isaretleme kutuları içinde bu etiketin kullanılmasıdır. Özellik Degeri Seçicisi bu sorunu kökten çözer. Yukarıdaki örnekte görüldügü gibi
Internet Explorer6: desteklemiyor 7.0: destekliyor ;
Firefox: destekliyor ;
Google Chrome: destekliyor ;
Opera: destekliyor
3- Kısmi Özellik Değeri Seçicisi
Bir etiketin özellik değerindeki boşluklarla ayrılmış kısımlarına göre tanımlama yapmamızı sağlar.
Bir örnek yapalım
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"
/>
<title>CSS'in yapısı</title>
<style type="text/css">
a[title~="Google"] {
text-decoration:overline;
}
</style>
</head>
<body>
<p><a href="http://www.google.com" title="Google seç">gooogle
</a> </p>
<p><a href="http://www.yahoo.com" title="Yahoo seç">yahoo </a>
</p>
<p><a href="http://www.fatihhayrioglu.com" title="Fatih">fatih </a>
</p>
</body>
</html>
Örneği görmek için tıklayınız.
Türkçe karakterde sorunsuz çalısıyor. Siz kullanabilecegimiz yerleri hesap
edin artık.
Internet Explorer 6.0: desteklemiyor 7.0: destekliyor ;
Firefox: destekliyor ;
Google Chrome: destekliyor ;
Opera: destekliyor
4- Dikkate Değer Özellik Seçicisi
Bir etiketin özellik değerindeki kesik çizgi(-) ile ayrılmış kısımlarına göre tanımlama yapmamızı sağlar.
Bir örnek yapalım
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"
/>
<title>CSS'in yapısı</title>
<style type="text/css">
*[lang|="en"] {
color: red;
}
</style>
</head>
<body>
<h1 lang="en">Hello!</h1>
<p lang="en-us">Greetings!</p>
<div lang="en-au">G’day!</div>
<p lang="fr">Bonjour!</p>
<h4 lang="cy-en">Jrooana!</h4>
</body>
</html>
Örneği görmek için tıklayınız.
Internet Explorer 6.0: desteklemiyor 7.0: destekliyor ;
Firefox: destekliyor ;
Google Chrome: destekliyor ;
Opera: destekliyor
Bunların dısında CSS3 ile birlikte gelen dört tane daha yeni Özellik Seçicisi vardır. “Belirlenen Sözdizimi ile Baslayan Özellik Deger Seçicisi”, “Belirlenen Sözdizimi ile Biten Özellik Deger Seçicisi”, “İçinde Belirlenen Sözdizimi Geçen Özellik Deger Seçicisi” ve Aduzayı Özellik Deger Seçicisi diye 4 adet yeni Özellik Seçicisi daha vardır. Amaç CSS ve XHTML arasındaki iletisimi en üst seviyeye çıkararak kolay ve etkilesimli kod yazmamızı saglamak.
Çok teşekkürler yardımcı olduğun için abi Allah Razı Olsun.
Fatih abi 1 , 3 , 4 deki örnekleri tam anlamıyla anladım denedim üzerinde başka örnekler yaptım fakat 2- Özellik Değeri Seçicisi bu örneği hiç anlayamadım biraz daha açarak güzel bir örnek vererek anlatırsan cok sevinirim anlamadan geçmek istemiyorum.
Haklısnız. Bu konuyu kitapda daha açıklayıcı anlatmıştım. Kitap içeirğine göre konuyu güncelledim.
Hocam Kısmi Özellik Değeri Seçicisinde Verdiğiniz Örnek Kodlar Çalışmadı.Adobe Dreamweaver cs4 Kullanıyorum.Tarayıcım firefox son Sürüm.Neden Çalışmadıklarını Anlayamadım.Zaten Verdiğiniz HTML Kodundada Bazı Eksikler vb. Var.Onları Düzeltmeme Rağmen Bir Değişme Göremedim.
Evet kodlarda bir sorun var düzelttim. Google link kapama etiketi yerine açma yazmışım. Ama yinede çalışıyor
Şimdi Tam Olarak Kavrayamadım.
Özellik Seçicileri Sadece Herhangi Bir Etikete Yazdığımız Class’a vb. Ne Mi Etki Ediyor,Amaçları Bu Mudur?
CSS in class ve html elementlerine erişiminden sonra html deki elemnalrın özelliklerine erişme ihtiyacı duymuştur ve bunun için özellik seçicileri çıkarmıştır. Bu seçiciler html elmanlarına tanımladığımız özellikler yardımı ile seçmemize yarar
güsel olmus evallah.
Günümüzde bilgi çok önemli. internet bilgi erişimini sağlasada ne yazıkki yeterli bilgiyi bulamıyoruz. örneğin bir sitede çalışarak bir konu hakkında bilgi ediniyorsunuz. Fakat bu bilgi temel almanızı sağlıyor. diğer siteleri araştırdığınızda aynı bilginin biraz daha farklısının verildiğini görüyosunuz. fakat bu site kişiyi başlangıçtan alıyor ve uzmanlığa taşıyor. ben genelde asp.net kullanarak programlama yapıyorum. tasarımım ise çok kötüydü. ama inşallah sayenizde tasarımı da öğrenicez. Ve size hiç bilgi saklamadan tüm deneyimlerinizi özellikle biz gençlere taşıdığınız için teşekkür ediyorum….
sağol abi sanayend örenecem css yi mantığını kavradım gibi hergünm 1 ders uyguluyorum çok sağoıl türk gençliğine böyle bir kaynak kazanmdırdığın için
yanıldığı belirtmek zorundayım. CSS de en önemli durumlardan biridir nesnelere erişebilmek ve özellik seçiğcileride bunun için mükemmel bir yeniliktir.
Fatih Bey; güzel bir anlatım olmuş ve benim oldukça dikkatimi çekti.. Ama benim kafamı karıştıran birşey ise tarayıcı 2 ci olarak normal biz style belgesineinputları sıfırlayarak ve input{border:1px solid #ddd;} işlemi ilede yapabiliriz.. Ama javascript(jquery) kodlamasına çok benziyor input[type] vs. gibi.. Ama tşkler sayenizde bir bilgi yine öğrendim..
Bukadar detaylandırılmasına gerek yok gibi geliyo. Yeni başlayan biri olarak kafam karıştı. Temelini (mantığını) bildiğim bi konu olan CSS ‘de fazla ıvır zıvır var saınrım :)
Süper bişi bence paylaşım için çok teşekkürler Fatih abi
ama i.e. 6 falan da desteklese süper olcakmış :) Malum göz ardı edemiyoruz :D