ozellik secicileri
Ö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.
Not Javascript gibi id'si olan her elemente(hata daha fazlası da var) css özelliği atanması bize bir çok bakımdan avantaj sağlar.
Ö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>
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.
Tarayıcı Uyumu
Firefox
Chrome
Safari
Opera
İnternet Explorer
Mobil Tarayıcılar
iOS Safari
Opera Mobile
Android Browser
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>
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
Tarayıcı Uyumu
Firefox
Chrome
Safari
Opera
İnternet Explorer
Mobil Tarayıcılar
iOS Safari
Opera Mobile
Android Browser
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="bulusdesign@hotmail.com.tr" title="Msn Seç">Msn </a>
</p> <p><a href="http://www.bulusdesign.tr.gg" title="BulusDesign">BulusDesign </a> </p> </body> </html>
Türkçe karakterde sorunsuz çalısıyor. Siz kullanabilecegimiz yerleri hesap edin artık.
Tarayıcı Uyumu
Firefox
Chrome
Safari
Opera
İnternet Explorer
Mobil Tarayıcılar
iOS Safari
Opera Mobile
Android Browser
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>
Tarayıcı Uyumu
Firefox
Chrome
Safari
Opera
İnternet Explorer
Mobil Tarayıcılar
iOS Safari
Opera Mobile
Android Browser
