Takip Edin

CSS

Temel CSS Seçicileri

CSS te seçiciler, biçimlendirmek istediğimiz HTML elemanlarını seçmek için kullanılırlar.

CSS seçicilerini 5 kategori altında toplayabiliriz:

  • Basit Seçiciler : Elemanları isme, sınıfa ve kimliğe göre seçer.
  • Birleştirici Seçiciler : Elemanları, aralarındaki belli bir ilişkiye göre seçer.
  • Sözde Sınıf Seçicileri : Bir elemanın özel bir durumunu tanımlamak için kullanılır.
  • Sözde Eleman Seçiciler : Bir elemanın belirtilen bölümlerini biçimlendirmek için kullanılır.
  • Özellik Seçicileri : Elemanları bir özelliğe veya özellik değerine göre seçer.

Aşağıda temel CSS seçicileri açıklanmıştır:

Genel Seçici

Yıldız işareti(*) ile gösterilir ve sayfa üzerindeki tüm HTML elemanlarını seçer.

Bu seçici, genellikle hızlı test amacıyla elemanların varsayılan iç ve kenar boşluklarını kaldırmak için kullanılır.

Not : Genel seçiciyi çok sık kullanmamanız önerilir, çünkü genel seçiciler sayfa üzerindeki her elemanla eşleşmekte ve bu durum tarayıcı üzerinde gereksiz baskıya neden olmaktadır. Onun yerine eleman veya sınıf seçici kullanmanız önerilir.

Eleman Tipi Seçiciler

Bir eleman tipi seçici, eleman tipi ismiyle uyumlu olan belgedeki tüm elemanlarla eşleşir.

p seçicisinin sahip olduğu stil kuralları, belgedeki her p elemanına uygulanır ve rengini deniz mavisi yapar.

Sınıf Seçicileri

Sınıf seçicileri, sınıf özelliğine sahip olan herhangi bir HTML elemanını seçmek için kullanılır. Bu sınıfa sahip olan tüm elemanlar, tanımlanan kurala göre biçimlendirilirler.

Sınıf seçicileri, nokta işareti ve ardından gelen sınıf değeri ile tanımlanırlar.

Yukarıdaki örnekte sınıf değeri arkaplan olan her HTML elemanının arka plan rengi griye dönüşmüştür. Bu örnek, biraz daha özelleştirilebilir:

Bu örnekte p.arkaplan seçicisinin sahip olduğu stil kuralı, arkaplan sınıfına sahip olan p elemanının arka plan rengini griye dönüştürmüştür.

HTML elemanları, birden fazla sınıfa sahip olabilirler:

Yukarıda görüldüğü gibi p.arkaplan ve p.fontstili seçicilerinin sahip olduğu stil kuralları en alt satırdaki p elemanına verilerek elemanın arka plan rengini griye ve font stilini eğik yazıya çevirmiştir.

Not : Bir sınıf ismi, sayıyla başlayamaz!

Kimlik Seçicileri

Kimlik seçici, tek bir elemanın stil özelliklerini tanımlamak için kullanılır.

Kimlik seçiciler, kare işareti(#) ve ardından gelen kimlik değeri ile tanımlanırlar.

Yukarıda tanımlı stil kuralı, kimlik özelliği donusum olan elemana ait olan kelimelerin ilk harfini büyük harfe çevirir.

Not : Bir kimlik özelliğinin değeri özgün olmalıdır, yani bir HTML dokümanında iki eleman aynı kimlik değerini paylaşamaz!

Not : Bir kimlik adı, sayı ile başlayamaz!

Seçicileri Gruplandırma

Bir stil sayfasında seçiciler, aynı stil kurallarına sahip olabilmektedir. Stil sayfanızdaki kodu en aza indirgemek için bunları, virgülle ayrılmış bir liste içinde gruplandırabilirsiniz.

Yukarıdaki örnekte h1, h2 ve h3 seçicileri aynı stil kuralına sahiptir(text-transform: uppercase;), dolayısıyla virgülle ayrılan bir listede gruplandırılabilirler.

Devamını oku

Popüler

error: Content is protected !!