Sudah lama sekali aku tidak mengupdate blogku. Banyak hal yang terjadi selama ini, dan aku kelelahan. Namun masih banyak hal yang ingin saya lakukan, seperti memperbarui merceCSS, memilah konten modular yang telah saya rangkum sejauh ini dan membagikannya kepada semua orang, berpartisipasi dalam pertemuan pertukaran, dll.
Saya telah banyak menyebutkan desain modular, seperti " Modularitas dari Desain Furnitur IKEA ", " Pemikiran Modular dalam Rekonstruksi Halaman ", " Poin Penting Produksi Komponen dalam Rekonstruksi Halaman " semuanya terkait dengan modularitas, tetapi saya belum pernah membicarakan secara spesifik konten implementasi sebelumnya, hanya beberapa pemikiran. Kali ini saya akan fokus pada aspek implementasi, dan saya akan merangkum beberapa modularisasi yang telah saya lakukan selama ini.
Untuk melakukan pekerjaan dengan baik dalam modularisasi , menurut saya sangat penting untuk memahami ruang lingkup gaya, jadi bagian ini adalah artikel pertama dalam seri ini.
Siswa yang telah menulis program harus tahu bahwa variabel memiliki ruang lingkup (jika Anda tidak tahu, tanyakan sendiri pada Google, saya tidak akan menjelaskannya di sini). Definisi gaya juga memiliki masalah ruang lingkup, yaitu ruang lingkup definisi .Mudah untuk memahaminya, seperti ruang lingkup p di bawah ini:
/*作用域：全局*/ p{text-indent:2em;}
/*作用域：.demo这个类中*/ .demo p{color:#000000;}
Prioritas penyeleksi gaya adalah pengetahuan dasar tentang gaya belajar. Mari kita ulas secara singkat:
Aturan yang digunakan juga sangat sederhana, yaitu bobot penyeleksi dijumlahkan, dan bobot yang lebih besar akan diutamakan; jika bobotnya sama, bobot yang ditentukan kemudian akan diutamakan . Meskipun sangat sederhana, jika Anda tidak memperhatikan saat menulis, hal ini dapat dengan mudah menyebabkan definisi CSS yang berulang dan kode yang berlebihan.
Dari penjelasan di atas kita dapat menarik dua faktor utama:
Apa gunanya mengetahui bobot gaya? Misalnya, dapat digunakan seperti ini: Untuk memberikan contoh paling sederhana,
body{color:#555555;}.demo{color:#000000;}
<p>这里的文字颜色受全局定义的影响</p>
<div class="demo"><p>这里的文字颜色受类demo定义的影响</p></div>
<p class="demo">这里的文字颜色受类demo定义的影响</p>
Mengetahui bobot gaya, Anda akan mengetahui bagaimana kinerja contoh di atas. Penerapan selanjutnya adalah modularisasi, seperti contoh di " Modularisasi dari Desain Furnitur IKEA ", silakan lanjutkan untuk detailnya.