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.
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.
1 2 3 4 |
p { text-align: center; color: red; } |
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.
1 2 3 4 |
#paragraf1 { text-align: center; color: blue; } |
Html Kısmı
1 2 |
<p id=”paragraf1”>Bu metin ortalı ve mavi renkli olarak gözükür.</p> <p> Bu paragraf biçimlendirmeden etkilenmez.</p> |
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.
1 2 3 |
.kirmizi{ color: red; } |
Html Kısmı
1 2 3 |
<p class=”kirmizi”>Bu metin kırmızı renkli görünür.</p> <p> Bu paragraf biçimlendirmeden etkilenmez.</p> <p class=”kirmizi”>Bu metin de kırmızı renkli görünür.</p> |
Birden Fazla Class Seçicisi Kullanımı
1 2 3 4 5 6 7 |
.ortala { text-align: center; } .kirmizi { color:red; } |
Html etiketleri birden fazla class secicisini arka arkaya kullanabilir. Yani;
1 |
<p class="ortala kirmizi">Bu paragrafa 2 adet css kuralı etki etmektedir.</p> |
Seçicilerin Gruplanması
Eğer birden fazla HTML etiketine aynı biçimlendirmeyi uygulamak istiyorsak, bu etiketleri gruplayabiliriz. Örneğin;
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
h1 { text-align: center; color: red; } h2 { text-align: center; color: red; } p { text-align: center; color: red; } |
Yerine aşağıdaki biçimlendirme kuralı uygulanırsa aynı etki oluşturulur.
1 2 3 4 |
h1, h2, p { text-align: center; color: red; } |
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.