CSS Dersleri – 3 || Sınıf Seçiciler (CSS Seçiciler ve Çeşitleri)
Daha önceki CSS dersleri ‘mizde CSS yapısını ve CSS kullanımını görmüştük. Orada da aslında seçicileri kullanmıştık. Şimdi bu dersimizde CSS yapısı içerindeki seçicileri daha detaylı bir şekilde inceleyeceğiz.
Öncelikle seçici nedir tanımlayalım. Seçiciler web sayfasında hangi kısımlarla ilgili stil tanımlanacağını belirlediğiniz bölümdür. Hatırlıyorsanız CSS yapısı aşağıdaki resimdeki gibi birçok bildirimden oluşur. Bildirimler ayarlanacak olan sayfa stilinin özelliklerini belirler. (Örneğin kırmızı renk, kenarlığın kalın olması vb..)
Ancak sayfa bir bütünden ibaret değildir. Web sayfasında bir çok alan bulunur. Örneğin bu alanları bazı bölümlerini kırmızı bazı bölümlerini mavi yapmak isteyebilirsiniz. İşte burada belirttiğimiz sayfanın birbirinden bağımsız bölümlerini seçiciler sayesinde tanımlarsınız.
Yukarıdaki örneği dikkatle inceleyelim. “h1” aslında bir HTML başlık etiketidir. CSS kuralı “h1” etiketi kullanılarak tanımlanmıştır. Bunun anlamı şudur; yazdığınız stil şablonu özellikleri sadece “h1” etiketi için geçerlidir. (Yazı rengini mavi renk yapar.)
CSS Dersleri – 3 || CSS Çeşitleri
CSS ‘de farklı türde birçok seçici vardır. Ancak biz bu dersimizde 3 önemli CSS seçicisinin üzerinde duracağız. Bu CSS türleri; etiket seçici, ID seçicisi ve sınıf seçicisidir. Şimdi bu çeşitleri birer birer inceleyelim.
CSS Sınıf Seçicisi (Class Selectors) – (CSS Dersleri)
Sınıf seçiciler CSS ‘ de en yoğun bir şekilde kullanılan seçici türlerinden biridir. Sınıf seçiciyi sayfa içerisindeki birden fazla öğeye tekrar tekrar uygulayabilirsiniz.
Sınıf seçiciler tanımlanırken . (nokta) ile başlamak zorundadırlar. Tanımlandıktan sonra çağrılırken de çağrılacak olan HTML etiketinin “class” parametresiyle çağrılırlar. Ayrıca seçiciler genellikle <head> etiketi içerisinde ya da ayrı bir still.css dosyasında tanımlanırlar. (Not: CSS kullanım alanları daha sonraki derslerde detaylı bir şekilde anlatılacaktır.) Bir örnek üzerinde daha iyi anlayabiliriz.
Örneğin “sinif1” adında bir bir sınıf seçicisi tanımlayalım ve stil bildirimi olarak da yazı boyutunu 12 pt, yazı rengini de kırmızı olarak ayarlayalım. Aşağıdaki kodu web sayfanızın <head> </head> etiketleri arasında bir bölüme ekleyin.
<style>
.sinif1 {
font-size:12pt;
color:red;}
</style>
Yukarıda da gördüğünüz gibi sınıf seçiciler tanımlanırken . (nokta) ile başlıyor. Bildirimlerin yapısını zaten bir önceki dersimizde bahsetmiştik. Şimdi bu sınıf seçiciyi bir HTML bölümünde yani bir HTML etiketinde aktif edelim yani çağıralım.
Örneğin “Web Sitemize Hoşgeldiniz” şeklinde yazılan h1 başlığına bu tanımladığımız stili uygulayalım. Bildiğiniz gibi h1 başlığı varsayılan olarak siyah renklidir ve yaklaşık 2 em (36px) boyutlarındadır. Biz bu stili h1 için uyguladığımızda yazı rengi kırmızı, 12 pt ile yazılmış bir başlığa dönüşecektir.
Bunun için aşağıdaki kodu <body> </body> etiketleri arasında herhangi bir bölüme yazıyoruz;
<h1 class="sinif1"> Web Sitemize Hoşgeldiniz </h1>
Bu kodun derlenmiş hali aşağıdaki gibidir;
Web Sitemize Hoşgeldiniz
Yukarıda da gördüğünüz gibi dersin başında tanımladığımız “sinif1” isimli sınıf seçicisini h1 başlığı için uyguladık. Bunun için <h1> etiketi içerisinde “class” parametresini kullandık. class=”sinif1″ ile yukarıda <head> </head> etiketleri arasında tanımladığımız stil özelliklerini alarak <body> </body> etiketleri içerisindeki “Web Sitemiz Hoşgeldiniz” metnini kırmızıya ve 12 puntoluk bir stile dönüştürdük.
Sonuç olarak sınıf seçiciler tanımlanırken . (nokta) ile başlarlar ve “class” parametri kullanılarak çağrılırlar. Sayfanın istediğiniz herhangi bir bölümünde istediğiniz kez tanımladığınız bir sınıf seçiciyi çağırıp kullanabilirsiniz. Yazının başında da belirttiğimiz gibi sınıfı seçicicler CSS’ de en çok kullanılan seçici türlerinden birisidir.
Sonraki CSS dersleri ‘mizde ID seçiciyi ve sonrasında etiket seçicileri inceleyeceğiz. Görüşmek üzere.
Not: Makale özgün bir makaledir. Alıntı yapmadan kullanılamaz. @bilgisayar.name
CSS Dersleri – 3 || Sınıf Seçiciler (CSS Seçiciler ve Çeşitleri)
