2. Gün: CSS kod yapısı

CSS kodları iki bileşenden meydana gelir. Bunlarda ilki seçici, ikincisi ise seçiciye ait olan tanımlamalardır. Bunu şöyle örnekleyebiliriz. Bir sınıftaki Hasan adlı bir öğrencimiz var ve Hasan adlı öğrenciyi tanımlayan kelimeler var. Mesela Hasan’ı tanımlarsak örnek olarak şunu verebiliriz.

Hasan { ders_durumu:Kötü, derse_hazirlik:yok denecek kadar az; }

Şimdi burdaki örnekte ki Hasan ile öğrenciyi seçtik. Yani Hasan –>seçici (selector)

Sonra da Hasan ile ilgili tanımlamalar yaptık. ders_durumu:Kötü, derse_hazirlik:yok denecek kadar az;

Tanımlamalarda ise şöyle bir durum söz konusu. Önce özelliği yazıyoruz sonrasında da bu özelliğin değerini yazıyoruz. Yani ders_durumu burada özellik (property), Kötü ise değeri (value) olmuş oluyor. Şimdi bu örneği CSS kodları için yazarsak şöyle bir sonuç ortaya çıkar.

h1 { color:#aabbcc; } ifadesinde h1–>seçici, color–>özellik, #aabbcc–>değer olmuş olur.

Bir CSS ifadesinde aynı özellik birden çok seçiciye verilebilir. Örnek: h1,h2 { color:#aabbcc; } Böylelikle hem h1 etiketine hem de h2 etiketine değer atamış olduk.

Yine bir CSS ifadesinde birden fazla özellik birden fazla seçiciye verilebilir. Örnek: h1,h2 { color:#aabbcc; font:Arial ; } Dikkat edersek seçiciler arasına virgül, özelliğin değerinden sonrada noktalı virgül yazıldı. Tabi CSS kuralları yazılırken de süslü parantezlerin yazılması gerektiğini de anlamışsınızdır.

Şimdi gelelim seçicileri derinlemesine incelemeye: Seçiciler farklı amaçlara göre farklı şekillerde yazılabilirler. Şimdi böyle cümle kurdum ama anlaşılmaması doğal karşılıyorum benimde kafam karışırdı diyerek cümleyi açalım. Şimdi şöyle düşünün bir HTML sayfasında ki mesela tüm h1 etiketlerini seçmek için kullanacağım seçici ile sadece belli h1 etiketleri seçmek için kullanacağım seçici aynı olur mu? Cevap:

Hayır

Yani bir sınıfta ki tüm erkek öğrencileri seçmek için yazacağım seçici ile erkekler arasında haylaz olanları seçmek için yazacağım seçici bir olur muydu? Cevap:

Olmazdı

Peki o zaman kaç türlü seçici var onlara bakalım:

  1. Tip Seçiciler: HTML etiketinin sadece kendisinin yazıldığı seçici türüdür. Örnek geliyor:

    Burada h1, p, body veya herhangi bir HTML etiketi de olabilir, önce HTML etiketi sonra da bu etikete ait tanımlamalar yapıldı. İşte bu tip seçicilere Tip Seçiciler adını veriyoruz.
  2. Sınıf Seçiciler (Class selector): Tip seçiciler ile tüm h1, p etiketlerine aynı değeri verirken, kimi yerlerde aslında h1’lerin, p’lerin aynı değerde olmasını istemeyebiliriz. Mesela paragraf içerisinde ki bir yazının diğerlerinden daha koyu gözükmesi veya farklı renkte gözükmesini istiyor olabiliriz. İşte bu gibi durumlarda sınıf seçicileri kullanırız. Örnek:

    Burada üç tane sınıf seçici oluşturduk.
    Nasıl anlarsınız peki sınıf seçici olduğunu? Başlarında nokta varda ondan.
    Peki bu seçicileri nasıl kullacağız? Şöyle:

    Sınıf seçicileri HTML sayfası içerisinde istediğimiz kadar kullanabiliriz.
  3. Kimlik Seçiciler (ID selector): Sınıf seçicilerin tersine ID seçicileri sayfa içerisinde bir defa kullanılacak olan elemanlara uygulanır. Mesela nerede kullanılır derseniz örnek olarak HTML sayfasında tek bir altbilgi olduğunu ve burada kullanılabileceğini görürüz. ID seçicilerde yine sınıf seçicilerden farklı olarak nokta yerine kare sembolü (#) kullanılır. Örnek:


    CSS seçicilerin farklı kombinasyonlarla yazılması da söz konusudur. Fakat onu bir sonra ki yazıya bırakıyorum.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir