CSS Özellik Seçicileri

user warning: Table './hor_hanciorg/cache_form' is marked as crashed and last (automatic?) repair failed query: UPDATE cache_form SET data = 'a:21:{s:6:\"choice\";a:3:{s:5:\"#type\";s:6:\"radios\";s:14:\"#default_value\";i:-1;s:8:\"#options\";a:7:{i:0;s:35:\"Sitede var olan içerik ve yazılar\";i:1;s:38:\"Sitenin görsel tasarımı ve renkleri\";i:2;s:54:\"Ziyaretçinin siteye yazılar ekleyip yorumlayabilmesi\";i:3;s:46:\"Sitenin adresi ve arama motorunda listelenmesi\";i:4;s:73:\"İnsanların çok fazla ziyaret ediyor olması ve onlarla iletişim ağı\";i:5;s:44:\"Sitenin arkaplan yazılımı ve alt yapısı\";i:6;s:47:\"Ben farklı şeyler düşünüyorum yazacağım\";}}s:4:\"vote\";a:3:{s:5:\"#type\";s:6:\"submit\";s:6:\"#value\";s:6:\"Oy ver\";s:7:\"#submit\";a:1:{i:0;s:9:\"poll_vote\";}}s:5:\"#node\";O:8:\"stdClass\":37:{s:3:\"nid\";s:2:\"72\";s:4:\"type\";s:4:\"poll\";s:8:\"language\";s:2:\"tr\";s:3:\"uid\";s:1:\"1\";s:6:\"status\";s:1:\"1\";s:7:\"created\";s:10:\"1266655218\";s:7:\"changed\";s:10:\"1574865391\";s:7:\"comment\";s:1:\"2\";s:7:\"promote\";s:1:\"0\";s:8:\"moderate\";s:1:\"0\";s:6:\"sticky\";s:1:\"0\";s:4:\"tnid\";s:1:\"0\";s:9:\"translate\";s:1:\"0\";s:3:\"vid\";s:2:\"72\";s:12:\"revision_uid\";s:1:\"1\";s:5:\"title\";s:37:\"Web sitesinde hangisi daha önemlidir\";s:4:\"body\";s:0:\"\";s:6:\"teaser\";s:358:\"* Sitede var olan içerik ve yazılar\n* Sitenin görsel tasarımı ve renkleri\n* Ziyaretçinin siteye yazılar ekleyip yorumlayabilmesi\n* Sitenin adresi ve arama motorunda listelenmesi\n* İnsanların çok fazla ziyaret ediyor olması ve onlarla iletişim ağı\n* Sitenin arkaplan yazılımı ve alt yapısı\n* Ben farklı şeyler düşünüyorum yazacağım\n\";s:3:\"log\";s:0:\"\";s:18:\"revision_timestamp\";s:10:\"1574865391\";s:6:\"format\";s:1:\"0\";s:4:\"name\";s:5:\"hayat\";s:7:\"picture\";s:0:\"\";s:4:\"data\";s:120:\"a:3:{s:7:\"contact\";i:0;s:18:\"admin_compact_mode\";b:1;s:13:\"form_build_id\";s:37:\"form-5bb20dab86db6430977269d8df6a74bb\";}\";s:7:\"runtime\";s:1:\"0\";s:6:\"active\";s:1:\"1\";s:6:\"choice\";a:7:{i:0;a:3:{s:6:\"chtext\";s:35:\"Sitede var olan içerik ve yazılar\";s:7:\"chvotes\";s:4:\"6353\";s:7:\"chorder\";s:1:\"0\";}i:1;a:3:{s:6:\"chtext\";s:38:\"Sitenin görsel tasarımı ve renkleri\";s:7:\"chvotes\";s:3:\"309\";s:7:\"chorder\";s:1:\"1\";}i:2;a:3:{s:6:\"chtext\";s:54:\"Ziyaretçinin siteye yazılar ekleyip yorumlayabilmesi\";s:7:\"chvotes\";s:3:\"212\";s:7:\"chorder\";s:1:\"2\";}i:3;a:3:{s:6:\"chtext\";s:46:\"Sitenin adresi ve arama motorunda listelenmesi\";s:7:\"chvotes\";s:3:\"182\";s:7:\"chorder\";s:1:\"3\";}i:4;a:3:{s:6:\"chtext\";s:73:\"İnsanların çok fazla ziyaret ediyor olması ve onlarla iletişim ağı\";s:7:\"chvotes\";s:3:\"216\";s:7:\"chorder\";s:1:\"4\";}i:5;a:3:{s:6:\"chtext\";s:44:\"Sitenin arkaplan yazılımı ve alt yapısı\";s:7:\"chvotes\";s:3:\"208\";s:7:\"chorder\";s:1:\"5\";}i:6;a:3:{s:6:\"chtext\";s:47:\"Ben farklı şeyler düşünüyorum yazacağım\";s:7:\"chvotes\";s:3:\"413\";s:7:\"chorder\";s:1:\"6\";}}s:10:\"allowvotes\";b:1;s:4:\"vote\";i:-1;s:4:\"path\";s:47:\"anket/web-sitesinde-hangisi-daha-onemlidir.html\";s:22:\"last_comment_timestamp\";s:10:\"1266655218\";s:17:\"last_comment_name\";s:0:\"\";s:13:\"comment_count\";s:1:\"0\";s:8:\"taxonomy\";a:0:{}s:5:\"files\";a:0:{}s:8:\"readmore\";b:0;s:5:\"links\";a:3:{s:11:\"comment_add\";a:4:{s:5:\"title\";s:15:\"Yeni yorum ekle\";s:4:\"href\";s:16:\"comment/reply/72\";s:10:\"attributes\";a:1:{s:5:\"title\";s:31:\"Bu sayfaya yeni bir yorum ekle.\";}s:8:\"fragment\";s:12:\"comment-form\";}i:0;a:3:{s:5:\"title\";s:13:\"Eski anketler\";s:4:\"href\";s:4:\"poll\";s:10:\"attributes\";a:1:{s:5:\"title\";s:43:\"Sitedeki anketlerin listesini görüntüle.\";}}i:1;a:3:{s:5:\"title\";s:9:\"Sonuçlar\";s:4:\"href\";s:15:\"node/72/results\";s:10:\"attributes\";a:1:{s:5:\"title\";s:28:\"Güncel anketi görüntüle.\";}}}}s:6:\"#block\";b:1;s:6:\"#cache\";b:1;s:6:\"#theme\";s:9:\"poll_vote\";s:11:\"#parameters\";a:4:{i:0;s:16:\"poll_view_voting\";i:1;a:3:{s:7:\"storage\";N;s:9:\"submitted\";b:0;s:4:\"post\";a:0:{}}i:2;r:18;i:3;b:1;}s:9:\"#build_id\";s:37:\"form-f0b2bd8a6b2fcea8b2ab0b8682c41381\";s:5:\"#type\";s:4:\"form\";s:11:\"#programmed\";b:0;s:13:\"form_build_id\";a:4:{s:5:\"#type\";s:6:\"hidden\";s:6:\"#value\";s:37:\"form-f0b2bd8a6b2fcea8b2ab0b8682c41381\";s:3:\"#id\";s:37:\"form-f0b2bd8a6b2fcea8b2ab0b8682c41381\";s:5:\"#name\";s:13:\"form_build_id\";}s:7:\"form_id\";a:3:{s:5:\"#type\";s:6:\"hidden\";s:6:\"#value\";s:16:\"poll_view_voting\";s:3:\"#id\";s:21:\"edit-poll-view-voting\";}s:3:\"#id\";s:16:\"poll-view-voting\";s:12:\"#description\";N;s:11:\"#attributes\";a:0:{}s:9:\"#required\";b:0;s:5:\"#tree\";b:0;s:8:\"#parents\";a:0:{}s:7:\"#method\";s:4:\"post\";s:7:\"#action\";s:41:\"/css-dersleri/css-ozellik-secicileri.html\";s:9:\"#validate\";a:1:{i:0;s:25:\"poll_view_voting_validate\";}}', created = 1596644303, expire = 1596665903, headers = '', serialized = 1 WHERE cid = 'form_form-f0b2bd8a6b2fcea8b2ab0b8682c41381' in /home/hanci/domains/hanci.org/public_html/includes/cache.inc on line 112.

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

Yeni yorum gönder

Bu alanın içeriği gizli tutulacak ve açıkta gösterilmeyecektir.
CAPTCHA
Aşağıdaki resimde yer alan karakterleri kutucuğa doğru olarak yazınız
Image CAPTCHA
Enter the characters shown in the image.

sponsorlu bağlantılar

Anket

Web sitesinde hangisi daha önemlidir:

Son yorumlar