ฉันไม่ได้อัพเดทบล็อกของฉันเป็นเวลานาน มีหลายสิ่งหลายอย่างเกิดขึ้นและฉันก็เหนื่อย แต่ยังมีหลายสิ่งที่ฉันอยากทำ เช่น อัปเดต merceCSS จัดเรียงเนื้อหาโมดูลาร์ที่ฉันสรุปไว้แล้วและแบ่งปันกับทุกคน การเข้าร่วมการประชุมแลกเปลี่ยน เป็นต้น
ฉันได้กล่าวถึงการออกแบบโมดูลาร์บ่อยครั้ง เช่น " โมดูลาร์จากการออกแบบเฟอร์นิเจอร์ของอิเกีย ", " การคิดแบบโมดูลาร์ในการสร้างเพจใหม่ ", " ประเด็นสำคัญของการผลิตส่วนประกอบในการสร้างเพจใหม่ " ล้วนเกี่ยวข้องกับความเป็นโมดูล แต่ฉันไม่เคยพูดถึงการออกแบบแบบเฉพาะเจาะจงเลย เนื้อหาการใช้งานก่อนหน้านี้เป็นเพียงความคิดบางประการ ครั้งนี้ ผมจะเน้นไปที่แง่มุมของการนำไปปฏิบัติ และผมจะสรุปบางส่วนของการทำให้เป็นโมดูลที่ผมได้ทำไปแล้ว
เพื่อให้ทำงานได้ดีใน รูปแบบโมดูลาร์ ฉันคิดว่าการเข้าใจขอบเขตของสไตล์เป็นสิ่งสำคัญมาก ดังนั้นส่วนนี้จึงเป็นบทความแรกในชุดนี้
นักเรียนที่เขียนโปรแกรมควรรู้ว่าตัวแปรมีขอบเขต (ถ้าไม่รู้ ถาม Google ด้วยตัวเอง ฉันจะไม่อธิบายในที่นี้) คำจำกัดความของสไตล์ก็มีปัญหาเกี่ยวกับขอบเขตเช่นกัน นั่นคือ ขอบเขตของคำจำกัดความ ง่ายต่อการเข้าใจ เช่น ขอบเขตของ p ด้านล่าง:
/*作用域：全局*/ p{text-indent:2em;}
/*作用域：.demo这个类中*/ .demo p{color:#000000;}
ลำดับความสำคัญของตัวเลือกสไตล์คือความรู้พื้นฐานเกี่ยวกับสไตล์การเรียนรู้ เรามาทบทวนกันสั้นๆ กันดีกว่า:
กฎที่ใช้นั้นเรียบง่ายมาก กล่าวคือ น้ำหนักของตัวเลือกจะถูกรวมเข้าด้วยกัน และน้ำหนักที่ใหญ่กว่าจะมีความสำคัญกว่า หากน้ำหนักเท่ากัน น้ำหนักที่กำหนดในภายหลังจะมีความสำคัญกว่า แม้ว่าจะง่ายมาก แต่ถ้าคุณไม่ใส่ใจเมื่อเขียน อาจทำให้เกิดคำจำกัดความซ้ำๆ ของ CSS และโค้ดที่ซ้ำซ้อนได้อย่างง่ายดาย
จากข้างต้นเราสามารถดึงปัจจัยสำคัญได้สองประการ:
การรู้น้ำหนักของสไตล์มีประโยชน์อย่างไร? ตัวอย่างเช่น สามารถใช้ดังนี้: เพื่อให้ตัวอย่างที่ง่ายที่สุด
body{color:#555555;}.demo{color:#000000;}
<p>这里的文字颜色受全局定义的影响</p>
<div class="demo"><p>这里的文字颜色受类demo定义的影响</p></div>
<p class="demo">这里的文字颜色受类demo定义的影响</p>
เมื่อทราบน้ำหนักของสไตล์ คุณจะรู้ว่าตัวอย่างข้างต้นทำงานอย่างไร การใช้งานเพิ่มเติมคือการทำให้เป็นโมดูล เช่น ตัวอย่างใน " การทำให้เป็นโมดูลจาก IKEA Furniture Design " โปรดดูรายละเอียดต่อไป