CSS SEÇİCİLERİ
ID SEÇİCİLER
Web sayfasındaki DOM elemanlarının birer id değerleri vardır ve o nesneye mahsustur.Aynı id’ye sahip ikinci bir nesne olamaz.Bu nesneleri birbirinden ayırmak için yapılan bir düzenlemedir.Belirtilen id’ye stil aktarabiliriz.Sayfada tek bir nesneyi belirttiğimiz için stil sadece o nesneye uygulanacaktır.ID seçiciler #(diyez) işareti ile belirtilir.
1 2 3 4 5 6 7 |
<style> #div1 { background-color:red;} #div2 { background-color:pink;} </style> <div id="div1">Kırmızı alan</div> <div id="div2">Pembe alan</div> |
SINIF SEÇİCİLER
Aynı stilin bir veya birden fazla nesneye verilmesi veya bir nesneye birden fazla stilin uygulanması anlamına gelir.Aşağıdaki örnek açıklayıcı olacaktır.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<style> .kirmizi { background-color:red;} span.sag { background-color:#09F;} span.sol { background-color:#0C3;} .gri { background-color:#CCC;} .gri.iptal { background-color:#F6C;} </style> <div class="gri"> <div class="kirmizi">1. Alan</div> <p class="kirmizi">2.Alan</p> <span class="sag">Mesaj Gönder</span> <span class="sol">Mesaj Gönder</span> <span class="gri iptal">İptal</span> </div> |
Kirmizi stili <div> ve <p> nesnelerine uygulanıyor.Buna ilaveten sağ ve sol stilleri ise <span> nesnelerine uygulanıyor.ID seçiciden farkı tek nesneye uygulanmamasıdır.Gri stilinin aynı zamanda bir <div>’e ve .gri.iptal stilinin ise <span>’a uygulanması çoklu sınıf örneğine güzel bir örnektir.
TAG SEÇİCİLER
HTML nesneleri aynı zamanda otomatik seçiçidir.Dikat edilecek husus, stillerin sayfadaki aynı türdeki nesnelere uygulanmasıdır.
1 2 3 4 5 6 7 8 9 10 |
<style> div { background-color:red;} p { background-color:#0C3;} span { background-color:#CCC;} </style> <div> <p>2.Alan</p> <span class="sag">Mesaj Gönder</span> </div> |
DİĞER SEÇİCİLER
Web sayfası tasarlanırken nesnelerin içerisine (altına) başka nesnelerde yerleştirilebilir.Bu şekilde arka arkaya devam eden hiyerarşik bir yapı oluşacaktır.Aşağıdaki HTML sayfasını dikkatlice inceleyiniz
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<html> <head> <meta http-equiv="Content-Type" content="text/html"; charset=utf-8" /> <title> Stil öğreniyorum</title> </head> <body> <p> <a>www.google.com</a><br> <strong>Kalın yazı</strong> </p> <ul> <li> Liste 1 </li> <li> Liste 2 <br><em>İtalik Yazı</em><br><span>Span</span></li> </ul> </body> </html> |
Bu yapıda her düzey altında bir alt düzey bulunup bu düzeylerde de nesneler bulunmaktadır.Her alt düzeydeki nesneler bir üstekinin çocuğu ,iki seviye üstündekinin ise torunu konumundadır.
ÇOCUK SEÇİCİLER(E>F)
<p> paragrafını ebeveyn olarak düşünürsek <a> ve <strong> nesneleri çocuk olacaktır.Aynı şekilde <ul> nesnesinin çocukları iki adet <li> nesnesidir.Diğer <li> nesnesinin altındaki nesneler seçilmez.Stilin uygulama şekli ise şöyledir.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<style> p > a {color:#F00} ul li> em{color:#03F} </style> <p> <a>www.google.com</a><br> <strong>Kalın yazı</strong> </p> <ul> <li> Liste 1 </li> <li> Liste 2 <br> <em>İtalik Yazı</em><br> <span>Span</span> </li> </ul> |
2.<li> nesnesinin altında <em> ve <span> çocuk olduğu için <em> üzerinden seçim yapıldığından <em> mavi yazılacaktır.
TORUN SEÇİCİLER (E F)
Nesnenin iki düzey altındaki nesneler eğer birbirlerine bağlı iseler o nesnenin torunlarıdır.Bu nesneler boşluk ile birbirinden ayrılır.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<style> body a {color:#F00} html ul span{ color:green} ul em{color:#00F} </style> <p> <a>www.google.com</a><br> <strong>Kalın yazı</strong> </p> <ul> <li> Liste 1 </li> <li> Liste 2 <br> <em>İtalik Yazı</em><br> <span>Span</span> </li> </ul> |
Burada <body> nesnesi 2.düzeyde, <a> nesnesi ise 4. düzeydedir.<a>,<body>’nin torunu konumundadır.Aynı şekilde <li>’de öyledir.<ul> nesnesinin torunu ise <em>’dir.Eğer <em>’in altında da nesneler olsaydı onlara pembe rengi uygulanmayacaktı.Torununun torunu gibi bir ifadeyi html ul span’da görmekteyiz.
BİTİŞİK KARDEŞ SEÇİCİLER (E+F)
Aynı düzeydeki yan yana nesnelerden ikincisine stil uygulanır.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<style> p + div {background-color:#3CF;} </style> <p> <a>www.google.com</a><br> <strong>Kalın yazı</strong> </p> <div>Katman</div> <ul> <li> Liste 1 </li> <li> Liste 2 <br> <em>İtalik Yazı</em><br> <span>Span</span> </li> </ul> |
EVRENSEL SEÇİCİLER (*)
Belirtilen nesne altındaki tüm nesneler stil uygulamak için kullanılır.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<style> p *{background-color:#3CF;} </style> <p> <a>www.google.com</a><br> <strong>Kalın yazı</strong> </p> <div>Katman</div> <ul> <li> Liste 1 </li> <li> Liste 2 <br> <em>İtalik Yazı</em><br> <span>Span</span> </li> </ul> |
<p> nesnesinin altındaki bütün nesnelere mavi zemin stilini uyguladı.
ÖZELLİK SEÇİCİLERİ
Nesnelerin içerisinde barındıkları alt özelliklere göre de o nesnelere stil uygulayabiliriz.Örneğin; link kaynağı com ile biten linklere stil verebiliriz.
1 2 3 4 5 6 7 |
<style> a[href$="com"]{background-color:#3CF; text-decoration:none;} </style> <a href="www.google.com">www.google.com</a><br> <a href="www.yahoo.com">www.yahoo.com</a> |
Leave a reply