Merhabalar. Bugün CSS seçicileri ile ilgileneceğiz. Bildiğiniz gibi CSS, HTML sayfalar için metin, format ve nesne biçimlendirmek için bizlere fazlaca olanak sağlayan bir web teknolojisidir. CSS hakkında bilgi için burayı ziyaret edebilirsiniz.
CSS için temel olarak üç seçici vardır. Bunlar id seçici, sınıf seçici ve tag seçicidir. Ek olarak hiyerarşik yapılarda (iç içe kullanılan HTML kodları için yazılan CSS kodları) değişik seçici metodları kullanılıyor. Şimdi bunları inceleyelim:
ID Seçiciler
Oluşturduğumuz web sayfalarında kullandığımız nesneler (DOM Elemanları) id değerlerine sahiptirler ve bu değer sadece o nesneye aittir. ID değerlerini kullanarak HTML sayfalarda kullandığımız elemanları birbirinden ayırabiliriz. ID özelliği sadece kullanıldığı nesneye ait olduğu için yapılan değişiklikler ve etkileşimler bir tek o nesneyi etkiliyor. (Burdaki etkişelimlerin CSS veya Javascript ile olduğu düşünülebilir.) CSS kodlarında istediğimiz ID değerine sahip elemanı seçebilmek için # (diyez) işaretini kullanacağız. Örnek verecek olursak:
<style type="text/css">
#element { font-size: 14px; font-family: Tahoma; color: #FF0000; }
</style>
Bu CSS kodlarına göre HTML kodumuzu oluşturalım:
<div id="alan">Font büyüklüğü:14px - Font Türü: Tahoma - Renk: Kırmızı</div>
SINIF Seçiciler
Sınıf seçiciler, oluşturulan stilin HTML sayfasında bir veya birden fazla elemana etki etmesi ve birden fazla stilin uygulanabilmesi durumunda kullanılan bir türdür. ID seçicinin aksine, Sınıf seçiciler birden fazla elemanı etkileyebilir. Bir örnek verecek olursak:
<style type="text/css">
.alan { background-color:#FF0000; }
.renk { background-color:#0000FF; }
</style>CSS kodlarımıza göre HTML kodlarımızı oluşturalım:
<div class="alan"> <span class="renk">Burak</span> </div> <p class="alan"> <span class="renk">Burak</span> </p>
Burada göreceğimiz üzere, div ve p taglarımıza alan stil sınıfı verdik. Böylece bu elemanlarımız alan sınıfının özelliklerini taşımaya başladı. Alan sınıfındaki nitelikleri değiştirdiğimizde, bu değişiklikler iki elemanıda etkileyecek.
TAG Seçiciler
Tag seçiciler, HTML sayfamızda kullandığımız aynı türden tüm elemanları seçmek için kullanılır. CSS tanımlaması yaparken, TAG ismi ile nitelik belirttiğimiz için, yapılan değişiklikler aynı TAG a sahip tüm elemanları etkiler. Örnek verecek olursak:
<style type="text/css">
div { background-color: #FF0000; }
p { background-color: #00FF00; }
span { background-color: #0000FF; }
</style>
CSS kodlarımıza göre, HTML kodlarımızı oluşturalım:
<div> <p> <span>Birinci Yazı</span><br /> <span>İkinci Yazı</span><br /> <span>Üçüncü Yazı</span> </p> </div> <p> <div>Örnek Yazı</div> </p>
Aynı türden elemanlar stilde belirtilen özellikleri bize yansıtacaklar. TAG ismine göre stil belirlediğimizde, sayfamızda kullandığımız TAG'ların hepsi, belirttiğimiz özellikleri alacak.
Bir sonraki yazımda, Üst Düzey CSS Seçicilerini inceleyeceğiz. (Kardeş, Çocuk, Torun, Özellik ve Evrensel Seçiciler) Tekrar görüşmek dileğiyle..