Thursday, Apr. 27, 2017

CSS Dersleri – 3 || Sınıf Seçiciler (CSS Seçiciler ve Çeşitleri)

Yazar:

|

31 Mayıs 2014

|

Kategori:

|2.875 kez Okundu
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.

CSS Dersleri - 3 || CSS Seçiciler

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)

Sosyal Medyada Paylaş

Diğer İlgili Haberler

CSS Dersleri – 4 || ID Seçiciler (CSS Seçiciler ve Çeşitleri)
CSS Dersleri – 2 || CSS ‘in Yapısı ve CSS Kullanımı
CSS Nedir Ne işe Yarar ? CSS Dersleri – 1

Yazar Hakkında

Yararlı İnsanlar Topluluğu

Sadece şimdiyi değil, aynı zamanda gelecekteki gelişmeleri de açık bir şekilde öngörebilen bir kimse bilgiye sahiptir.



Yorum Yap (Mesaj Bırak)

Bir Cevap Yazın

Ya da

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