Css

CSS Temel – CSS Seçicileri (Selectors)

  Css    2 Mart 2019
Yorum Yok

Bir CSS seçici, bir HTML belgesindeki öğelerle eşleşen bir kalıptır. İlişkili stil kuralları, seçici kalıbına uyan öğelere uygulanır.

Seçici Nedir?

Seçiciler, bir web sayfasındaki öğeleri stilize etmeleri için seçmek için kullanıldığı için CSS’nin en önemli yönlerinden biridir. Seçicileri çeşitli şekillerde tanımlayabilirsiniz.

Evrensel Seçici (Universal Selector)

*Yıldız veya yıldız sembolü olarak yazılmış evrensel seçici, sayfadaki her bir öğeyle eşleşir. Hedef elemanda başka koşullar varsa, evrensel seçici ihmal edilebilir. Bu seçici genellikle hızlı sınama amacıyla varsayılan kenar boşluklarını ve dolguları elemanlardan çıkarmak için kullanılır.

*Seçici içindeki stil kuralları , bir belgedeki her öğeye uygulanacaktır.

Not: Evrensel seçicinin * üretim ortamında kullanılması önerilmez , çünkü bu seçici, tarayıcılara çok fazla gereksiz baskı uygulayan sayfadaki her öğeyle eşleşir.

Eleman Tipi Seçici (Element Type Selector)

Bir öğe türü seçicisi, belge içerisindeki öğenin her örneğini karşılık gelen öğe türü adıyla eşleştirir.

p Seçici içindeki stil kuralları <p>, belgedeki her öğeye uygulanır ve belge içerisindeki konumlarına bakılmaksızın mavi renklendirilir.

Kimlik Seçicileri (Id Selectors)

İd seçicitek veya benzersiz bir öğenin stil kurallarını tanımlamak için kullanılır .

Id seçici#hemen ardından id’ye bir değer isim verilir. örnek: #deger_Adi

Bu stil kuralı, id niteliği ayarlanmış olan bir öğenin metnini kırmızı olarak oluşturur.

Sınıf Seçicileri (Class Selectors)

Sınıf seçicileri, class özniteliği olan herhangi bir HTML öğesini seçmek için kullanılabilir . Bu sınıfa sahip tüm elemanlar, tanımlanmış kurala göre biçimlendirilecektir.

Sınıf seçici, hemen sınıf değerinin takip ettiği bir nokta işareti (.) ile tanımlanır .

Yukarıdaki stil kuralları, metinde class özniteliği ayarlanmış olan her öğenin metnini mavi renkte gösterir.

Soydan Seçiciler (Descendant Selectors)

Başka bir öğenin soyundan olan bir öğeyi seçmeniz gerektiğinde bu seçicileri kullanabilirsiniz. Örneğin, tüm bağlantı öğelerini hedeflemek yerine, yalnızca sıralanmamış bir listede bulunan bağlantı noktalarını hedeflemek istiyorsanız.

Seçicinin içindeki stil kuralları ul.menu li a, yalnızca sınıfa sahip olan sıralanmamış bir listede<a> yer alan bağlantı elemanlarına, yani sınıfa sahip olan ve belgenin içindeki diğer bağlantılar üzerinde etkisi olmayanlara uygulanır .

Gruplama Seçicileri (Grouping Selectors)

Genellikle bir stil sayfasındaki birkaç seçici, aynı stil kuralları bildirimlerini paylaşır. Stil sayfanızdaki kodu en aza indirmek için bunları virgülle ayrılmış bir listede gruplandırabilirsiniz. Aynı stil kurallarını (tekrar  tekrar) etmenizi önler.

Yukarıdaki örnekte de görebileceğiniz gibi, aynı stil kuralı font-weight: normal;seçicileri tarafından paylaşılmaktadır.

0 okunma

Etiketler : , , ,

  Benzer Yazılar


  Yorumlar

Bir Cevap Yazın

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

Bu yazıya henüz yorum yapılmamıştır, yazı hakkındaki düşüncelerinizi paylaşmaktan çekinmeyin.