Anasayfa / Web Tasarım / Css / CSS Dersleri 2: Seçiciler ve Gruplama
css dersleri

CSS Dersleri 2: Seçiciler ve Gruplama

Css eğitim serisinin ilk dersinde css nedir, niçin css kullanmalıyız, yazım kuralları ve kodları nereye yazacağız konularına değinmiştik. Bu dersimizde ise css seçicileri (selectors) ve seçicilerin gruplanması konularına değineceğim.

Öncelikle bir css kodunun neye benzediğini kısaca hatırlayalım.

css yazım kuralı

Yukarıda ki resimde de görüldüğü üzere h1 ile belirtilen kısım css seçicisidir. Seçici biçimlendirmek istediğimiz html öğesine işaret eder. Yani yukarıda ki kod bloğu html sayfasında ki tüm h1 başlıkların rengini mavi, yazı büyüklüğünü ise 12 piksel yapar.

Fakat her zaman sayfada ki tüm html öğelerini aynı şekilde biçimlendirmek istemeyiz. Bu durumda seçiciler yardımımıza koşar.

Genel olarak 3 çeşit seçici türü kullanılır.

  • Element Seçicisi
  • Class Seçicisi
  • Id Seçicisi

Element Seçicisi

Element Seçicisi, bir html dokümanında ki belirtilen tüm etiketleri seçerek girilen biçimlendirmeyi uygular. Yukarıda ki örnekte h1 element seçicisi olarak kullanılmıştır. Element seçicisi kullanılırken direk biçimlendirilecek elementin ismi yazılır.

Bu örnekte ise p ile oluşturulan tüm paragraflardaki yazılar ortalanır ve rengi kırmızı yapılır. Tüm html elementleri bu şekilde biçimlendirilebilir.

ID Seçicisi

Id seçicisi, html dokümanında ki tek bir elementi biçimlendirmek için kullanılır. Id seçicisi kullanılmak istendiğinde bir # işareti ve arkasına herhangi bir isim yazılarak css kuralı oluşturulur.

Html Kısmı

Not: ID Seçicisi kuralları rakam ile başlayamaz.

Class Seçicisi

Class veya sınıf seçicisi bu niteliği atadığımız tüm html etiketlerine belirtilen biçimi uygular. Class seçicisi kullanılmak istendiğinde bir. İşareti arkasına herhangi bir isim yazılarak css kuralı oluşturulur.

Html Kısmı

Birden Fazla Class Seçicisi Kullanımı

Html etiketleri birden fazla class secicisini arka arkaya kullanabilir. Yani;

Seçicilerin Gruplanması

Eğer birden fazla HTML etiketine aynı biçimlendirmeyi uygulamak istiyorsak, bu etiketleri gruplayabiliriz. Örneğin;

Yerine aşağıdaki biçimlendirme kuralı uygulanırsa aynı etki oluşturulur.

CSS Yorum Satırları

Yavaş yavaş css kodlarını yazmaya başladık, Css kodlarını belirli kurallar belirleyerek yazarsanız, baktığınızda anlamanız kolaylaşır. Yorum satırları da css kodlarını anlamamızı kolaylaştıran unsurlardan biridir.

Yazdığınız bir css kodunun ne anlama geldiğini  /*    Burası yorum    */  bu şekilde yorum olarak belirtebilirsiniz.

Ayrıca bir css kodunu denerken silmek yerine yorum biçimine çevirirseniz, geri döndüğünüzde neyi değiştirdiğinizi de kolaylıkla fark edebilirsiniz.

Bir sonraki dersimizde css ile metin biçimlendirme özelliklerinden bahsedeceğim. Anlamadığınız yerleri sorarsanız sevinirim.

Düzeltme: Bazı yerlerde etiket bazı yerlerde element kelimesi kullandığımı belirten yorumlar aldım, iki kelimede aynı anlama gelmekte, en azından benim için.

İlginizi Çekebilir!

dikey açılır menü yapımı

Html ve Css Kullanarak Dikey Açılır Menü Yapımı

Site tasarımı yaparken bazen iç içe geçmiş birçok kategori bulunabilir, böyle durumlarda açılır menü kullanmak …


Bir cevap yazın

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

Time limit is exhausted. Please reload the CAPTCHA.