CSS Söz dizimi ve Seçiciler

CSS Söz dizimi ve Seçiciler

  Aralık 09, 2017    Gökhan Krl

---

Söz Dizimi

Söz dizimleri bir seçiciden ve bir bildirim bloğundan oluşur.

Element Seçiciler

Yukarıdaki görsele baktığımızda h1 etiketi seçilmiş ve köşeli parantez açılarak, bu etikete bazı değerler girilmiş.

Verilecek değerler her zaman köşeli parantezler içine yazılır.

Örnek kullanımı 

h1 {
değerler...
}

Bu yöntem ile bir sayfa içerisindeki tüm h1 etiketlerine otomatik olarak değer atamış oluyoruz. Yani bu bir Genel Seçicidir. Tüm HTML etiketilerine bu şekilde değer atayabiliriz. Aynı zamanda bir özelliği birden fazla HTML etiketi üzerinde de gruplama yaparak uygulayabiliriz.

h1, h2, p {
değerler...
}

İşte bu da Grup Seçicileri olarak adlandırılır.

ID ve Class(Sınıf) Seçicileri

Genel ve Grup seçicileri öğrendikten sonra. Şimdi ise sırada ID ve Class seçicileri var. Bu seçicilerin özelliklerini sırasıyla başlıklar halinde anlatalım.

ID Seçicileri

ID Seçiciler bir sayfa içerisinde daima bir defa kullanılmaktadır. Yani bir etikete vermiş olduğunuz bir ID, yalnızca o etikete aittir. Bu yüzden ID 'ler bir sayfa içerisinde yalnızca bir defa çağırılmaktadır.

#yenielement {
    degerler...
}

gördüğünüz gibi yeni bir ID oluşturduk ve adını "yenielement" koyduk. İstediğiniz isimi koyabilirsiniz. ID tanımlarken başına "#" işareti koyuyoruz ve adını yazıyoruz. İşte bu kadar kolay.

Dikkat edilmesi gereken yer Türkçe Karakter kullanılmaması gerektiğidir.

HTML içinde kullanımı

<h1 id="yenielement"> Merhaba </h1>

Bu örnek bir ID kullanımı.

Class(Sınıf) Seçicileri

Class seçicileri ID 'den farklı olarak istenildiği kadar bir sayfa üzerinde kullanılabilir.

.yenielement {
    degerler...
}

Bu da bir Class oluşturma örneği. Sınıf oluşturmak için başına "." işareti koyuyor ve adını yazıyoruz. Hepsi bu kadar.

Yine bir etikete ID veya Class ataması yapmak için o etiketin içerisine ne tanımlayacağımızı yazıyoruz ve tanımın içine tanımladığımız ismi yazıyoruz.

Class kullanımı da ID ile aynı mantıktadır.

<h1 class="yenielement"> Merhaba </h1>

İlave olarak çeşitli ön izleme siteleri ile akılda kalıcı örnekler yapabilir kendinizi geliştirebilirsiniz.

CSS Yorumlar

CSS içerisinde bir değerin kullanılmamasını sağlayabilir veya isteğe bağlı yorum belirtebilirsiniz. Bir CSS yorumu eklemek için /* ve */ işaretleri kullanılır. Bu işaretler içerisinde kullanılan kısım yorum kısmıdır.

p {
    degerler...
   /* Burası yorum kısmıdır. */
}
/* Ve ya sayfanın herhangi bir alana yorum yazabilirsiniz. */