CSS Seçici Gruplama

Seçici Gruplama

h2 elementi ve paragrafların gri olmasını istediğinizi varsayalım. Bu amaca ulaşmak için en kolay yol aşağıdaki ifadeyi kullanmaktır:

h2, p {color:gray;}

h2 ve p seçicilerini kuralların soluna koyun, ardından virgülle ayırın ve bir kural tanımlanmış olur. Sağdaki stil (color:gray;) bu iki seçiciye atıfta bulunan elementlere uygulanacaktır. Virgül, kuralların iki farklı seçici içerdiğini tarayıcıya söyler. Eğer bu virgül yoksa, kuralın anlamı tamamen farklı olacaktır. Sonraki soyut seçicilere bakın.

Herhangi fazla sayıda seçici gruplandırabilirsiniz, bu konuda herhangi bir kısıtlama yoktur.

Örneğin, birçok elementi gri göstermek istiyorsanız, aşağıdaki gibi kurallar kullanabilirsiniz:

body, h2, p, table, th, td, pre, strong, em {renk: gri;}

İpucu:Gruplama ile, yaratıcılar belirli türdeki stilleri birlikte 'sıkıştırabilir', böylece daha basit bir stil tablosu elde edebilirler.

Aşağıdaki iki grup kuralları aynı sonucu elde eder, ancak hangisinin yazılması daha kolay olduğunu açıkça görebilirsiniz:

/* no grouping */
h1 {renk: mavi;}
h2 {renk: mavi;}
h3 {renk: mavi;}
h4 {renk: mavi;}
h5 {renk: mavi;}
h6 {renk: mavi;}
/* grouping */
h1, h2, h3, h4, h5, h6 {renk: mavi;}

Kişisel olarak deneyin

Gruplama, bazı ilginç seçenekler sunar. Örneğin, aşağıdaki örnekteki tüm kurallar grupları eşdeğerdir, her grup sadece seçici ve ifadeler grubunu farklı gösterim yöntemlerini sunar:

/* group 1 */
h1 {renk: altın; arkaplan: beyaz;}
h2 {renk: altın; arkaplan: gri;}
h3 {renk: beyaz; arkaplan: gri;}
h4 {renk: altın; arkaplan: beyaz;}
b {renk: gri; arkaplan: beyaz;}
/* group 2 */
h1, h2, h4 {renk: altın;}
h2, h3 {arkaplan: gri;}
h1, h4, b {arkaplan: beyaz;}
h3 {renk: beyaz;}
b {renk: gri;}
/* group 3 */
h1, h4 {renk: altın; arkaplan: beyaz;}
h2 {renk: altın;}
h3 {renk: beyaz;}
h2, h3 {arkaplan: gri;}
b {renk: gri; arkaplan: beyaz;}

deneyin:

Grup 3'te 'beyan gruplaması' kullanıldığını dikkat edin. Daha sonra 'beyan gruplaması' hakkında size bilgi vereceğiz.

Joker seçici

CSS2, yeni bir basit seçici - universal selector (evrensel seçici) getirdi, bir yıldız (*) olarak gösterilir. Bu seçici herhangi bir elementle eşleşebilir, bir joker gibi.

Örneğin, aşağıdaki kural belgedeki her elementi kırmızı yapabilir:

* {color:red;}

Kişisel olarak deneyin

Bu beyan, belgedeki tüm elementlerin bir grup seçici olarak listelendiğine eşittir. Tüm elementlerin color özellik değerini kırmızıya belirlemek için yalnızca bir tuşa basmanız yeterli (sadece bir yıldız).

Beyan gruplaması

Seçiciyi veya beyanları gruplayabiliriz.

H1 elementlerinin tümünün kırmızı arka plana sahip ve 28 pixel yükseklikte Verdana yazı tipiyle mavi metin olarak gösterilmesini istiyorsanız, aşağıdaki tarzı yazabilirsiniz:

h1 {font: 28px Verdana;}
h1 {color: blue;}
h1 {background: red;}

Ancak bu yöntemin verimliliği çok düşüktür. Özellikle birden fazla tarz olan bir element için bu tür bir liste oluşturmak oldukça zor olabilir. Aksine, beyanları birlikte gruplayabiliriz:

h1 {font: 28px Verdana; color: white; background: black;}

Bu, önceki 3 satır tarz tablosunun etkisiyle tamamen aynıdır.

Dikkat edin, beyanları gruplamak için, her beyanın sonunda nokta virgül kullanmak çok önemlidir. Tarayıcı tarayıcı tarayıcıdaki boşluk simgelerini göz ardı eder. Nokta virgül eklediğinizde, aşağıdaki gibi formatlarda tarz oluşturabilirsiniz:

h1 {
  font: 28px Verdana;
  color: blue;
  background: red;
  }

Kişisel olarak deneyin

Bu yazımın okunabilirliği ne kadar daha yüksek görünüyor?

Ancak, ikinci nokta virgülü göz ardı edildiğinde, kullanıcı aracısı bu tarzı tabloyu şu şekilde açıklayacak:

h1 {
  font: 28px Verdana;
  color: blue background: red;
  }

Kişisel olarak deneyin

background color için geçerli bir değer değil ve color'a sadece bir anahtar kelime atanabilir, bu yüzden kullanıcı aracısı bu color bildirimini tamamen göz ardı eder (background: black kısmı da dahil). Bu şekilde h1 başlıkları sadece mavi olarak görünecek, kırmızı arka plan olmayacak ve mavi h1'yi alamama olasılığı daha yüksek. Aksine, bu başlıklar sadece varsayılan renkte (genellikle siyah) görünecek ve arka plan rengi yok olacak. font: 28px Verdana bildirimi hala normal çalışacak, çünkü doğru bir nokta ile sona eriyor.

Seçici gruplama gibi, beyan gruplama da stil tablolarını kısaltmak ve daha net, daha kolay bakım için bir kolaylık yöntemidir.

İpucu:Kuralın son beyanı ardından da bir noktalama işareti eklemek iyi bir alışkanlıktır. Başka bir beyan eklerken, noktalama işaretini unutma konusunda endişelenmeyin.

Seçici ve beyan gruplaması

Seçici gruplamayı ve beyan gruplamayı bir kuralda birleştirerek, az sayıda ifade ile nispeten karmaşık stiller tanımlayabiliriz.

Aşağıdaki kurallar, tüm başlıklar için karmaşık bir stili belirtir:

h1, h2, h3, h4, h5, h6 {
  color:gray;
  background: white;
  padding: 10px;
  border: 1px solid black;
  font-family: Verdana;
  }

Kişisel olarak deneyin

Bu kurallar, tüm başlıkların stilini beyaz arka planlı gri metin olarak tanımlar, 10 piksel iç kenar boşluğu ve 1 piksel dolu siyah kenarlık ile birlikte, metin yazı tipi Verdana'dır.