Basit CSS Seçiciler (Etiket, ıd, Class Seçici)

CSS in temel çalışma prensibi, sayfamızda bulunan HTML elemanlarını seçmek ve bu elemanlara özellik vermektir. Dolayısıyla bir elamana istenilen özelliği vermeden önce o elemanı seçmemiz gerekir.
Aşağıda HTML nesnelerini seçmek için en sık kullanılan Etiket, ID ve Class seçicileri anlatılıp örnekler verilmiştir.

ID Seçici - Tekil Seçici

Bu seçici, seçilecek eleman sayfa içerisinde 1 tane varsa kullanılır.Bu sebeple ismi tekil seçicidir.
Kullanımı ise şu şekildedir, sayfamızın HTML kısmında id parametresine istenilen değer(değişken isimlendirme kurallarına dikkat edilerek) verilir.
CSS kısmında ise # işareti kullanılarak istenilen eleman seçilir.
Örneğin;
HTML kısmında

<div id="kutu1"> KUTU1 </div>
CSS kısmında #kutu1{background:pink;}
olarak kullanılır.

CLASS Seçici - Çoğul Seçici

Class seçici, seçilecek elemanlar sayfa içerisinde birden fazla ise kullanılır.Bu sebeple ismi çoğul seçicidir.
Kullanımı ise şu şekildedir, sayfamızın HTML kısmında class parametresine istenilen değer(değişken isimlendirme kurallarına dikkat edilerek) verilir.
CSS kısmında ise . işareti kullanılarak istenilen eleman seçilir.
Örneğin;
HTML kısmında

<div class="kutu2"> KUTU1 </div>
CSS kısmında #kutu2{background:lightblue;}
olarak kullanılır.

Etiket Seçici

Etiket seçiciler isminden de anlaşıldığı gibi sayfada o etikete ait tüm elemanları seçer.
Kullanımı ise şu şekildedir,CSS kısmında ise etiketin ismi yazılarak istenilen tüm eleman seçilir.
Not:Bu seçim aynı etikete sahip tüm HTML elamanlarını seçeceği için dikkatli kullanılmalıdır.
Örneğin;
HTML kısmında

<ul> <li>Eleman 1</li> <li>Eleman 2</li> </ul>
CSS kısmında li{background:lightgreen;}
olarak kullanılır.


Yorumlar


Yorum yapabilmek ve kaynak kodları indirebilmek için lütfen üye girişi yapın