CSS İleri Gramer

Seçicilerin gruplandırılması

Seçiciyi gruplandırabilirsiniz, böylece gruplandırılan seçiciler aynı açıklamaları paylaşabilir. Gerekli seçicileri virgülle ayırın. Aşağıdaki örnekte, tüm başlık elementlerini grupladık. Tüm başlık elementleri yeşil.

h1,h2,h3,h4,h5,h6 {
  color: green;
  }

Miras ve sorunları

CSS'ye göre, alt elemanlar ebeveyn elemanından özellikleri devralır. Ancak, bu her zaman bu şekilde çalışmaz. Aşağıdaki kuralı inceleyin:

body {
     font-family: Verdana, sans-serif;
     }

Yukarıdaki kurala göre, sitesinin body elemanı Verdana yazı tipini kullanacaktır (eğer ziyaretçinin sisteminde bu yazı tipi varsa).

CSS miras sayesinde, alt elemanlar (bu örnekte body) sahip olduğu özellikleri (p, td, ul, ol, ul, li, dl, dt ve dd gibi bu alt elemanlar) devralır. Ek bir kurala ihtiyaç yok, tüm body'nin alt elemanları Verdana yazı tipini göstermeli, alt elemanların alt elemanları da öyle. Ayrıca, çoğu modern tarayıcıda da bu durum böyle.

Ancak, kanlı tarayıcı savaşlarının yaşandığı o yıllarda bu durum her zaman gerçekleşmez, o zamanlar standartlara olan destek işletmelerin öncelikli seçimi değildi. Örneğin, Netscape 4 miras desteğini desteklemiyordu, sadece mirası göz ardı etmiyordu, aynı zamanda body elemanına uygulanan kuralları da göz ardı ediyordu. IE/Windows IE6'ya kadar bu tür sorunlar devam etti, tablo içindeki yazı stilleri göz ardı ediliyordu. Peki biz ne yapmalıyız?

Netscape 4'ye nazik olun

Şanslısınız ki, eski tarayıcıların miras anlayamadığı sorunları çözmek için "Be Kind to Netscape 4" adlı yedekleme kuralını kullanabilirsiniz.

body  {
     font-family: Verdana, sans-serif;
     }
p, td, ul, ol, li, dl, dt, dd  {
     font-family: Verdana, sans-serif;
     }

4.0 tarayıcılar mirası anlamaz, ancak grup seçicileri anlamazlar. Bu, bazı kullanıcıların bant genişliğini boşa harcamasına rağmen, Netscape 4 kullanıcılarını desteklemek zorunda olduğunuz zaman bu yapılmalıdır.

Miras bir lanet midir?

Eğer "Verdana, sans-serif" yazı tipinin tüm alt öğelere devredilmesini istemezseniz, ne yapmalısınız? Örneğin, paragrafların yazı tipini Times olmasını istiyorsanız. Sorun yok. p için özel bir kural oluşturun, böylece kendisi ebeveyn kuralından kurtulur:

body  {
     font-family: Verdana, sans-serif;
     }
td, ul, ol, ul, li, dl, dt, dd  {
     font-family: Verdana, sans-serif;
     }
p  {
     font-family: Times, "Times New Roman", serif;
     }