- 14 Tem 2013
- 1,402
- 0
Merhaba arkadaşlar bugün css'te selektör yapısından bahsedeceğim.Nedir bu selektör yapısı derseniz html kodlarını incelediğiniz zaman ID ve Class'lar görürsünüz.ID ve Classlarımızı belirleyerek bunların özelliklerini değiştirebiliyoruz.Daha iyi anlayabilmek için bir örnekle inceleyelim.
<div class="baslik">Anasayfa</div>
<div class="baslik">İletişim</div>
Yukarda "baslik" adında bir class'ımız var.Bu class sayesinde CSS kodları ile biçimlendirme yapabiliyoruz.
.baslik
{
color:yellow;
}
Bu da css kodumuz olsun.Burda baslik class'ındaki(sınıfındaki) bütün yazıların rengi sarı olsun dedik.Class'ımızı belirtirkende başına .(nokta) koyduk.
Şimdi ID selektör yapısı ile devam edelim.
<div id="baslik">Anasayfa</div>
şeklinde kodumuzu CSS ile biçimlendirmek için aşağıdaki gibi id değerinin önüne #(diyez) işareti koymalıyız.
#baslik
{
color:green;
}
Bu sefer id değeri baslik olan yazı yeşil oldu.
________________________________________________________________________________
Not:
Class değeri birden fazla yerde kullanılabilir ancak ID değeri tek bir yapıya özgüdür.
Yani aşağıdaki gibi bir id değerini birden fazla yere atayamayız.
<div id="baslik">Anasayfa</div>
<div id="baslik">İletişim</div>
________________________________________________________________________________
Başka bir örnekle devam edelim.
<div class="baslik"><a href="www.site.com">Anasayfa</a></div>
Yukarda baslik class değerine sahip link almış bir yazımız var.Bu yazının rengini kırmızı yapmak istediğimizi varsayalım.Bunun için aşağıdaki gibi bir kod yazmalıyız.
.baslik a
{
color:red;
}
Yukardaki CSS kodumuz ile baslik class'ı içindeki link alan yazıların rengini kırmızı yaptık.Burdaki a harfi link'leri belirtir.
.baslik a şeklinde kullanılabileceği gibi .baslik>a şeklindede kullanılabilir.Buna Child Selektör denir.
h1,h2,h3
{
color:blue;
}
Yukarda h1,h2 ve h3 taglarını grupladık.h1,h2 ve h3 taglarının yazı renginin mavi olmasını sağladık.Buna gruplama denir.
Kısaca bir tekrar yapcak olursak class(sınıf) değeri birden fazla yerde tekrar edebilir bu sayede aynı özellikleri vereceğimiz nesneleri az kodla biçimlendirmiş oluruz.ID yapısı sayesinde belirlediğimiz ID değerine sahip nesnelere kendilerine has özellikler verebiliriz.
Classlar kullanılırken başına . alır.ID ise # işareti alır.
Elimden geldiğince anlaşılabilcek biçimde anlatmaya çalıştım.Bir sonraki makale görüşmek üzere-xMaterdom
<div class="baslik">Anasayfa</div>
<div class="baslik">İletişim</div>
Yukarda "baslik" adında bir class'ımız var.Bu class sayesinde CSS kodları ile biçimlendirme yapabiliyoruz.
.baslik
{
color:yellow;
}
Bu da css kodumuz olsun.Burda baslik class'ındaki(sınıfındaki) bütün yazıların rengi sarı olsun dedik.Class'ımızı belirtirkende başına .(nokta) koyduk.
Şimdi ID selektör yapısı ile devam edelim.
<div id="baslik">Anasayfa</div>
şeklinde kodumuzu CSS ile biçimlendirmek için aşağıdaki gibi id değerinin önüne #(diyez) işareti koymalıyız.
#baslik
{
color:green;
}
Bu sefer id değeri baslik olan yazı yeşil oldu.
________________________________________________________________________________
Not:
Class değeri birden fazla yerde kullanılabilir ancak ID değeri tek bir yapıya özgüdür.
Yani aşağıdaki gibi bir id değerini birden fazla yere atayamayız.
<div id="baslik">Anasayfa</div>
<div id="baslik">İletişim</div>
________________________________________________________________________________
Başka bir örnekle devam edelim.
<div class="baslik"><a href="www.site.com">Anasayfa</a></div>
Yukarda baslik class değerine sahip link almış bir yazımız var.Bu yazının rengini kırmızı yapmak istediğimizi varsayalım.Bunun için aşağıdaki gibi bir kod yazmalıyız.
.baslik a
{
color:red;
}
Yukardaki CSS kodumuz ile baslik class'ı içindeki link alan yazıların rengini kırmızı yaptık.Burdaki a harfi link'leri belirtir.
.baslik a şeklinde kullanılabileceği gibi .baslik>a şeklindede kullanılabilir.Buna Child Selektör denir.
h1,h2,h3
{
color:blue;
}
Yukarda h1,h2 ve h3 taglarını grupladık.h1,h2 ve h3 taglarının yazı renginin mavi olmasını sağladık.Buna gruplama denir.
Kısaca bir tekrar yapcak olursak class(sınıf) değeri birden fazla yerde tekrar edebilir bu sayede aynı özellikleri vereceğimiz nesneleri az kodla biçimlendirmiş oluruz.ID yapısı sayesinde belirlediğimiz ID değerine sahip nesnelere kendilerine has özellikler verebiliriz.
Classlar kullanılırken başına . alır.ID ise # işareti alır.
Elimden geldiğince anlaşılabilcek biçimde anlatmaya çalıştım.Bir sonraki makale görüşmek üzere-xMaterdom
Son düzenleme:
