Css syntax yapısı - seçiciler(selektörler)

Sezai AlkanFrontend Developer

Css #tag #id #class #seciciler #selektor #css

Css İle Oluşturduğumuz Her Bir Kod Parçacığına Selektör Denir. Peki Bu Selektörler Nasıl Oluşturulur. Her Selektörün Bir Seçici Ve Bildirim Alanı Vardır.
Aşağıdaki Alanda Göstelerilen Parçada 'a' Bir Seçicidir. Süslü Parantezler İçerside Bildirim Alanıdır. Seçici İle Html Üzerinden İstediğimiz Nesnesi Seçebilir. Bildirim Alanından da Bu Nesneye Özellikler Atabiliriz.

a{ color:#111; }

Yukarıdaki Örnekte a Seçicisine #111 Nolu Yazı Rengi Atanmış. Html Tarafında a Etiketi İle Oluşturulan Her Yazı #111 Nolu Yazı Rengine Sahip Olacaktır.

Seçici İsimleri Türkçe Ve Özel Karakterler İçermez.

Aynı Anda Birden Fazlada Seçicide Kullanıbiliriz. Bu Durumda Seçicileri Virgül(,) İle Ayırarak Yazabiliriz.

p, a{ color:#111; }

Yukarıdaki Örnekte Aynı Andan Birden Fazla Seçici Kullanılmıştır. Bu Seçicileri Birbirinden Ayırt Etmek İçin Aralarına Virgül(,) Konmuştur.

Tag Seçiciler

Yukarıdaki Örneklerde de Olduğu Gibi Html Tag Seçicileri Kullanırken Direk İstediğimiz Etiketin Adını Yazarak Nesne Üzerinde Stil Değişiklikleri Oluşturabiliriz. Aşağıdaki Örnekte Bir Başlık Etiketi Olan h1 Tagını Seçelim Ve Bunun Üzerinde Değişiklikler Yapalım.

h1{ color: red; font-size: 25px; }

Yukarıdaki Örnekte h1 Etiketi Üzerinde, Rengini Kırmızı, Yazı Boyutunu 25px Olacak Şekilde Ayarladık. Bu Selektör Html Tarafında Tüm h1 Etiketlerini Etkileyecektir. 

Peki Tek Bir Başlık Veya Nesneyi Seçmek İçin Ne Yapabiliriz? Aşağıya Doğru Okumaya Devam Doğru Yoldasın...

ID Seçiciler

Id' ler Bir İnsanında Tc Numarası Gibi Özel Olarak Tanımlanır. Yani Bir Sayfada Bir Tane id Tanımlaması Yapılabilir. Fakat Bu Kural Script Tarafında Geçerlidir. Css İçin Bu Kural Geçerli Değildir. id Leri Tanımlarken Başında '#' İşareti Konulur. Bu İşareti Koymadan Bir id Seçimi Söz Konusu Değildir.

Bir Tane Div Oluşturalım Bunada alkan Adında Bir id Tanımlayalım.

<div id="alkan"></div>

Oluşturduğumuz Div e Ulaşmak İçin İki Yol Vardır. Ya Direk div Etiketi İle Ulaşım Sağlarız Fakat Bu Tüm Sayfaki divleri Etkileyecektir. Yada id Üzerinden Ulaşım Sağlarız.

#alkan{ width:200px; height:200px; background-color: red; }

Yukarıdaki Selektörde alkan Divimize Genişlik Ve Yükseklik Değerleri Verdik Sonrasında Arka Plan Rengini Kırmızı Yaptık.

Sınıf(class) Seçiciler

Sınıfı Seçicileri id Gibi Tek Bir Yerde Kullanım Zorunluluğu Yoktur. Sayfada Birden Fazla Nesneye Sınıf Ataması Yapılabilir. Sınıf Ataması Yaparken Nokta(.) İşareti İle Kullanılır. 

Tekrar Bir Div Oluşturalım Ve Bu Div e Bir alkan Adında Sınıf Atayalım.

<div class="alkan"></div>

id Seçicisinde Olduğu Gibi Bundada Div e Ulaşmanın İki Yolu Vardır. Biz Div e Sınıf Üzerinden Ulaşım Sağlayacağız.

.alkan{ width:200px; height:200px; background-color: red; }

Yukarıdaki Selektörde alkan Divimize Genişlik Ve Yükseklik Değerleri Verdik Sonrasında Arka Plan Rengini Kırmızı Yaptık.