Pelajari Apa Cascade di Cascading Style Sheets Means

Kursus Singkat CSS

Kaskade inilah yang membuat style CSS sangat berguna. Singkatnya, riam menentukan urutan prioritas untuk bagaimana gaya yang saling bertentangan harus diterapkan. Dengan kata lain, jika Anda memiliki dua gaya:

p {warna: merah; }
p {color: blue; }

Cascade menentukan warna paragraf yang seharusnya, meskipun style sheet menyatakan bahwa keduanya harus merah dan biru. Pada akhirnya hanya satu warna yang dapat diterapkan ke paragraf, jadi harus ada perintah.

Dan urutan ini diterapkan oleh pemilih mana (p dalam contoh di atas) memiliki prioritas tertinggi dan urutan mana yang muncul di dokumen.

Daftar berikut adalah penyederhanaan cara browser Anda memutuskan preseden untuk suatu gaya:

  1. Lihat pada lembar gaya untuk pemilih yang mencocokkan elemen. Jika tidak ada gaya yang ditentukan, gunakan aturan default di browser
  2. Lihat di lembar gaya untuk pemilih yang ditandai! Penting dan terapkan pada elemen yang sesuai.
  3. Semua gaya dalam lembar gaya akan mengesampingkan gaya peramban bawaan (kecuali dalam hal lembar gaya pengguna).
  4. Semakin spesifik pemilih gaya, semakin tinggi preseden yang dimilikinya. Sebagai contoh, div> p.class lebih spesifik daripada p.class yang lebih spesifik daripada p.
  5. Akhirnya, jika dua aturan berlaku untuk elemen yang sama dan memiliki preseden selektor yang sama, yang terakhir dimuat akan diterapkan. Dengan kata lain, style sheet dibaca dari atas ke bawah, dan style diterapkan di atas satu sama lain.

Berdasarkan aturan-aturan itu, dalam contoh di atas, paragraf akan ditulis dengan warna biru, karena p {color: blue; } datang terakhir di style sheet.

Ini adalah penjelasan yang sangat sederhana tentang kaskade. Jika Anda tertarik untuk mempelajari lebih lanjut tentang cara kerja kaskade, Anda harus membaca Apa artinya "Cascade" dalam Cascading Style Sheets? .