หลักสูตรระยะสั้น CSS
น้ำตกเป็นสิ่งที่ทำให้ สไตล์ชีท CSS เป็นประโยชน์ ในระยะสั้นน้ำตกจะกำหนดลำดับความสำคัญสำหรับวิธีที่จะใช้รูปแบบที่ขัดแย้งกัน กล่าวอีกนัยหนึ่งถ้าคุณมีสองรูปแบบ:
p (สี: แดง; }
p (สี: ฟ้า; }
น้ำตกจะกำหนดสีที่ย่อหน้าควรเป็นแม้ว่าแบบชีตจะระบุว่าควรเป็นสีแดงและสีน้ำเงิน ในที่สุดสีเดียวสามารถใช้กับย่อหน้าได้ดังนั้นจึงต้องมีคำสั่งซื้อ
และลำดับนี้ถูกใช้โดย selectors (p ในตัวอย่างข้างต้น) มีลำดับความสำคัญสูงสุดและลำดับใดที่ปรากฏในเอกสาร
รายการต่อไปนี้เป็นการลดความซับซ้อนของวิธีการที่เบราว์เซอร์กำหนดลำดับความสำคัญของสไตล์:
- ดูในสไตล์ชีตสำหรับตัวเลือกที่ตรงกับองค์ประกอบ หากไม่มีรูปแบบที่กำหนดไว้ให้ใช้กฎเริ่มต้นในเบราเซอร์
- ดูในสไตล์ชีตสำหรับ selectors ที่ทำเครื่องหมายไว้! สำคัญและใช้กับองค์ประกอบที่เหมาะสม
- สไตล์ทั้งหมดในสไตล์ชีตจะแทนที่รูปแบบเบราเซอร์เริ่มต้น (ยกเว้นในกรณีของสไตล์ชีตของผู้ใช้)
- ตัวเลือกสไตล์ที่เจาะจงมากขึ้นจะมีความสำคัญมากกว่า ตัวอย่างเช่น div> p.class มีความเฉพาะเจาะจงมากกว่า p.class ซึ่งเฉพาะเจาะจงมากกว่า p
- สุดท้ายหากกฎสองข้อนำไปใช้กับองค์ประกอบเดียวกันและมีลำดับความสำคัญของตัวเลือกเดียวกันระบบจะใช้กฎที่มีการโหลด ล่าสุด กล่าวอีกนัยหนึ่งสไตล์ชีตจะอ่านจากบนลงล่างและใช้สไตล์กับส่วนอื่น ๆ
ขึ้นอยู่กับกฎเหล่านั้นในตัวอย่างข้างต้นย่อหน้าจะเขียนด้วยสีฟ้าเพราะ p {color: blue; } จะมาพร้อมกับสไตล์ชีตล่าสุด
นี่เป็นคำอธิบายที่เรียบง่ายของน้ำตก หากคุณสนใจในการเรียนรู้เพิ่มเติมเกี่ยวกับวิธีการทำงานของน้ำตกคุณควรอ่าน "Cascade" ใน Cascading Style Sheets คืออะไร? .