3.Gün: Gelişmiş Seçiciler

CSS’te class, id veya html etiketlerinden bir kombinasyon oluşturarak seçim yapılabilir. Örneğin bir Div etiketinde ki p elemanına ilişkin CSS kodu yazılacak olursa:
div p { /* CSS kodlarımız  */ }
yazılabilir.
Aynı şekilde bir ID’nin içindeki bir Class’a ait bir p elemanını seçmek için aşağıdaki yapı kullanılabilir.
#id’nin ismi .class’ın ismi p { /* CSS kodlarımız  */ }
Örnek:

 

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.

1. Gün: CSS’e başlamak

Bir web sayfası iki kısımdan oluşur. Bunlardan ilki HTML’nin yaptığı kısım işaretleme, ikincisi ise CSS’in yaptığı stil verme. Şimdi ilk olarak işaretleme ne demek onu açıklamak gerekiyor. HTML’yi biz paragraflarımız, yazılarımız, resimlerimiz, videolarımız gibi nesneleri sayfamıza yerleştirmek için kullanıyoruz o kadar. Buna işaretleme adını veriyoruz. Yani sayfada nerede yazı var onu işaret ediyoruz. CSS’te ise işte bu işaret ettiğimiz yazıların, resimlerin ne şekilde gözükeceğinizi ayarlıyoruz. Yani stil veriyoruz.

CSS ile stil nasıl verilir?

CSS ile stil vermek için önce neye stil vereceğimizi bilmemiz gerekir.  Hemen örnek verelim:

Yukarıdaki HTML belgesinde ki h1, h2 başlıklarına stil vermek istediğimizde ise 5,6 ve 7. satırdaki kodları ilave edebiliriz.

Sayfamıza böylelikle bir stil verdik. Unutmadan söylememiz gerekir ki sayfamızda ki 6. satır CSS kodları diğer tüm satırlar ise HTML kodları idi. Fazla kafa karıştırmadan devam edelim. Peki biz stil vermek için illa <style>….</style> etiketleri arasına mı yazmalıyız. Cevap:

Hayır

Peki stilleri (CSS) başka nasıl yazabiliriz ?

Üç yöntemi var. Asıl kullanacağımız yöntemi sonda anlatacağım 🙂

    1. Satıriçi stil verme (inline): Bu yöntemde html etiketine aşağıdaki gibi stil verilebilir.
      <p style="font:"Times New Roman",serif; color:#666;">İşte burdaki yazıya inline stil uygulayarak yazıtipini ve rengini değiştirdik </p>
      Peki neden bu yöntemi tercih etmiyoruz?  Çünkü sayfada ki tüm paragraflara stil vermeye kalktığımızda hepsini teker teker yazmak zorunda oluruzda ondan. O yüzden bu seçeneği eliyoruz.
    2. Gömülü stil verme (embedded): Bu yöntem ise bizim örnekte kullandığımız yöntem. <head> etiketleri arasına <style> etiketini açarak CSS kodlarımızı yazabiliyoruz.

      Bu yöntemin dezavantajı ise onlarca HTML sayfanız olduğunu düşünün ve hepsinde de aynı stilleri uygulayacaksak, her bir sayfaya tek tek bu stilleri yazmak durumunda olurduk. O yüzden bu seçenekte elenmiş oldu.
    3. Diğer ve son yöntemse harici bir stil dosyası kullanmak (external): Tıpkı bir html belgesinin olduğu gibi stil dosyasınında bir uzantısı vardır ve bu uzantı da .css ‘tir. Birden fazla html belgesi tek bir css dosyasını kullanarak sayfaların görünümü ayarlanabilir. Tam tersini söylersek: tek bir css dosyası düzenlenerek tüm html belgelerinin görünümü değiştirilebilir.  HTML belgesine hangi CSS dosyasını kullanacağını belirtmek için head etiketleri arasına

      yazılmalıdır. Tabi burada HTML dosyanızla CSS dosyanızın aynı klasörde olması gerekiyor ve CSS dosyamıza stil.css adını vermek gerekiyor. Şimdi ilk örneğimizi bu yöntemle nasıl kodlayacağız onu gösterelim.

      Şimdi de stil dosyamıza yazacağımız kodlara gelelim:

      Son olarak şunu da ifade ederek bu konuyu kapatalım. Bazı web sitelerinde head etiketleri arasına

      yazıldığını görebilirsiniz. HTML 5 ile birlikte bu tanımlama da type parametresinin yazılmasına gerek kalmadığından biz de ornek1.html dosyamızda bu parametreyi yazmadık.