Bentuk Mahir CSS

Penggabungan selector

Anda dapat menggabungkan selector, sehingga selector yang digabungkan dapat berbagi deklarasi yang sama. Dengan menggunakan tanda koma untuk memisahkan selector yang akan digabungkan. Dalam contoh di bawah ini, kami menggabungkan semua elemen judul. Semua elemen judul adalah biru.

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

Warisan dan masalahnya

Menurut CSS, elemen anak akan mewarisi atribut dari elemen induk. Tetapi ini tidak selalu beroperasi seperti yang diharapkan. Lihat aturan di bawah ini:

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

Menurut aturan di atas, elemen body situs akan menggunakan huruf Verdana (jika huruf ini ada di sistem pengguna).

Dengan warisan CSS, elemen anak akan mewarisi atribut dari elemen tingkat tertinggi (dalam kasus ini adalah body) yang dimiliki (elemen anak seperti p, td, ul, ol, ul, li, dl, dt, dan dd). Tidak perlu aturan lain, semua anak elemen body harus menampilkan huruf Verdana, dan anak anaknya juga demikian. Dan sebenarnya, ini seperti yang terjadi di sebagian besar penyedia layanan perekrutan modern.

Tetapi dalam zaman pertarungan penuh darah di antara penyedia layanan perekrutan, hal ini mungkin tidak terjadi, pada saat itu dukungan standar bukan prioritas utama untuk perusahaan. Misalnya, Netscape 4 tidak mendukung warisan, ia tidak hanya mengabaikan warisan, tetapi juga mengabaikan aturan yang berlaku untuk elemen body. IE/Windows sampai IE6 masih ada masalah yang relevan, gaya huruf di dalam tabel akan diabaikan. Bagaimana kami seharusnya berbuat?

Berikan perhatian kepada Netscape 4

Dahulu, anda boleh mengatasi masalah penyelesaian yang dianggap oleh penyedia layanan "Be Kind to Netscape 4" untuk penggunaan penyedia layanan pengecualian yang lama yang tidak dapat mengerti warisan.

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

Browser versi 4.0 tidak dapat memahami warisan, tetapi mereka dapat memahami pemilihan grup. Ini akan menghabiskan beberapa bandwith pengguna, tetapi jika perlu mendukung pengguna Netscape 4, maka hal ini harus dilakukan.

Adakah warisan adalah sihir?

Jika Anda tidak ingin font "Verdana, sans-serif" diwarisi ke semua elemen anak, bagaimana cara Anda? Misalnya, Anda ingin font paragraf adalah Times. Tidak ada masalah. Buat aturan khusus untuk p, sehingga ia akan lepas dari aturan orang tua:

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;
     }