Web: http://www.teknoarsiv.net/

YAKINDA SİZİNLE

Blogger,Blogger Eklenti, Blogger Tema!


Gün

Saat

Dakika

Saniye

E-Bülten Aboneliği

E-Bültenimize Abone Olun Son Yazılar Mail Olarak size gelsin Yazılarımızı Kaçırmayın:

Copyright © Teknoloji Kalemim | Teknoloji Portalı | Türkçeleştirme http://teknolojikalemim.blogspot.com/

30 Kasım 2012 Cuma

CSS Özellik Seçicileri


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.
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:
  1. 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 özelliğine göre tanımlama yapmamızı sağlar.
  1. h1[class] {color: silver;}
  2. <h1 class="selam">Selam</h1>
  3. <h1 class="dunya">Dünya</h1>
  4. <h1 class="ben">ben geldim </h1>
2- Özellik Değeri Seçicisi
Bir etiketin özellik değerine göre tanımlama yapmamızı sağlar.
  1. img[src="grafik.gif"] { border: 1px solid #000; }
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.
  1. a[title~="seç"] {color:#000;;}
  2. <a href="google.html" title="Google seç">gooogle </a>
  3. <a href="google.html" title="Yahoo seç">yahoo </a>
  4. <a href="google.html" title="Fatih">fatih </a>
Türkçe karkaterde sorun çıkarmadı.
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.
  1. *[lang|="en"] {color: white;}
  2. <h1 lang="en">Hello!</h1>
  3. <p lang="en-us">Greetings!</p>
  4. <div lang="en-au">G’day!</div>
  5. <p lang="fr">Bonjour!</p>
  6. <h4 lang="cy-en">Jrooana!</h4>
Browser Uyumu:
Internet Explorer 5.0, 5.5, 6.0: desteklemiyor 7.0: destekliyor ;
Netscape Navigator 6.0, 7.0: destekliyor ;
Mozilla 1.0: destekliyor ;
Opera 7.0+: destekliyor

Bunların dışında CSS3 ile birlikte gelen dört tane daha yeni Özellik Seçicisi vardır. "Belirlenen Sözdizimi ile Başlayan Özellik Değer Seçicisi", "Belirlenen Sözdizimi ile Biten Özellik Değer Seçicisi", "İçinde Belirlenen Sözdizimi Geçen Özellik Değer Seçicisi" ve Aduzayı Özellik Değer Seçicisi diye 4 adet yeni Özellik Seçicisi daha vardır. Bunlara daha sonra vakti geldiğinde değineceğiz.
Kaynaklar

Hiç yorum yok:

Yorum Gönder

Sponsor

Ad

E-posta *

Mesaj *

Text Widget

Labels

Channels

Category 3

Güncel Teknoloji Blogu..

Labels

Sponsors

Post of the week

Find us on facebook

Son Yorumlar

https://www.facebook.com/seyitshnn

Partners

++Teknoloji Kalemim

Pages

Blogger tarafından desteklenmektedir.

Channels

Labels

Channels

Channels

Popular Posts

Blog Arşivi

Followers

Blog Archive

Postagens populares

Sidebar One

Stats

Category 2

Category 3

Popular Posts

Join the Club