แต่ในขณะเขียนโค้ด เป็นเรื่องยากที่จะรวมคุณสมบัติ CSS เดียวกันสำหรับหน้าเว็บแต่ละหน้าแยกกัน ดังนั้นจึงจำเป็นต้องใช้โซลูชันที่สามารถสร้างสไตล์ชีตเดียวแล้วเข้าถึงโดยไฟล์หลายไฟล์ได้อย่างง่ายดาย
@import Rule ใน CSS คืออะไร
วิธีที่ดีที่สุดในการรวมคุณสมบัติของสไตล์ CSS คือการใช้กฎ @import @import ใช้เพื่อนำเข้าหรือเข้าถึงสไตล์ชีต CSS จากสไตล์ชีตอื่น สิ่งนี้ช่วยลดความพยายามของนักพัฒนาเนื่องจากคุณสมบัติทั้งหมดที่เพิ่มในสไตล์ชีตที่นำเข้าจะถูกนำไปใช้โดยตรงโดยเพียงแค่เขียน @import แล้วตามด้วยชื่อที่ถูกต้องของสไตล์ชีต
ไวยากรณ์ของ @import Rule
ไวยากรณ์ในการเพิ่มกฎ @import เพื่อเข้าถึงสไตล์ชีตจากสไตล์ชีตอื่นมีดังต่อไปนี้:
@นำเข้า 'stylesheetname.css' ;
กฎ @import สามารถเพิ่มได้ด้วยวิธีการต่อไปนี้:
@นำเข้า URL ( stylesheetname.css ) ;
เพียงเพิ่มชื่อไฟล์สไตล์ชีต CSS ในเครื่องหมายจุลภาคกลับหัวหรือในวงเล็บเหลี่ยมด้วย “ URL ” หลังจากเขียน “ @นำเข้า '.
ตัวอย่าง: การเพิ่ม @import Rule
เพื่อทำความเข้าใจว่ากฎ @import ทำงานอย่างไร เราเขียนข้อมูลโค้ดอย่างง่าย:
< h1 > นี่เป็นข้อความธรรมดา! < / h1 >ในตัวอย่างโค้ดข้างต้น มีส่วนหัว
ที่มีประโยคหนึ่งบรรทัดง่ายๆ เพิ่มในเอกสาร HTML รหัสง่าย ๆ นี้จะสร้างผลลัพธ์ต่อไปนี้:
ให้สร้างสไตล์ชีตเพื่อกำหนดคุณสมบัติ CSS บางอย่างที่สามารถนำเข้าจากไฟล์ซึ่งสร้างส่วนต่อประสานเว็บเพจด้านบนได้ในภายหลัง เราสร้างไฟล์อื่นและตั้งชื่อว่า “ สไตล์ชีต ” โดยระบุประเภทไฟล์เป็น “ css ” และเพิ่มคุณสมบัติบางอย่างสำหรับ
ส่วนหัวและเนื้อหา: h1 {
สี : มิดไนท์บลู ;
สีพื้นหลัง : สีฟ้า ;
จัดข้อความ : ศูนย์ ;
}
ร่างกาย {
สีพื้นหลัง : ฟ้าอ่อน ;
}
ในการเข้าถึงไฟล์สไตล์ชีตที่มีคุณสมบัติสไตล์สำหรับส่วนหัวและเนื้อหา
เราจำเป็นต้องเพิ่มกฎ @import ในไฟล์ CSS ใดๆ ที่ต้องการสไตล์นั้น
การเพิ่มกฎ @import อย่างง่ายจะใช้คุณสมบัติสไตล์ทั้งหมดกับอินเทอร์เฟซของหน้าเว็บโดยไม่ต้องพิมพ์คุณสมบัติแยกกันในแต่ละหน้าเว็บ
ดังนั้นจึงจำเป็นต้องเขียนกฎ @import เป็น:
@นำเข้า 'stylesheet.css' ;เพิ่ม @import rule โดยเขียน “ URL ” และชื่อไฟล์ CSS ในวงเล็บเหลี่ยมก็จะแสดงผลเช่นเดียวกัน:
@นำเข้า URL ( stylesheet.css ) ;คุณสมบัติที่กำหนดไว้ในหัวข้อ “ สไตล์ชีต ” ไฟล์ถูกนำไปใช้โดยเพียงแค่เพิ่ม “ @นำเข้า ” กฎสำหรับมัน:
นี่เป็นวิธีที่ง่ายที่สุดในการรวมคุณสมบัติ CSS ไว้ในไฟล์โดยไม่ต้องใช้ความพยายามเพิ่มเติม
ประโยชน์ของ @import Rule ใน CSS
กฎ @import ถูกใช้โดยทั่วไปด้วยเหตุผลดังต่อไปนี้:
- การใช้ @import Rule ช่วยลดเวลาและความพยายามของนักพัฒนาเนื่องจากใช้คุณสมบัติทั้งหมดของสไตล์ชีตเฉพาะโดยเพียงแค่เขียนชื่อของชีตนั้นตามหลัง @import
- ในเว็บแอปขนาดใหญ่และซับซ้อน กฎ @import พิสูจน์แล้วว่ามีประโยชน์มากเนื่องจากคุณสมบัติสไตล์เดียวกันสามารถนำไปใช้ในหลายๆ ไฟล์ได้เพียงแค่เพิ่มชื่อของไฟล์สไตล์ชีต
- องค์ประกอบสไตล์ชีต เช่น ส่วนหัว ส่วนท้าย เนื้อหา ฯลฯ สามารถจัดเก็บไว้ในไฟล์สไตล์ชีตแยกต่างหาก จากนั้นใช้กฎ @import จะสามารถนำเข้าสไตล์ที่จำเป็นใดๆ ได้โดยไม่ต้องเพิ่ม ลบ หรือแสดงความคิดเห็นคุณสมบัติสไตล์จาก ไฟล์.
สรุปการใช้กฎ @import และอธิบายว่ากฎนี้ถือเป็นวิธีที่ดีที่สุดในการรวม CSS อย่างไร
บทสรุป
สไตล์ชีต CSS สามารถนำเข้าหรือเข้าถึงได้โดยตรงจากสไตล์ชีตอื่น และคุณสมบัติทั้งหมดในสไตล์ชีตที่นำเข้าจะถูกนำไปใช้โดยตรงบนหน้าเว็บของไฟล์ที่ถูกนำเข้า ไม่จำเป็นต้องเขียนพร็อพเพอร์ตี้ CSS แต่ละรายการแยกกันสำหรับทุกอินเทอร์เฟซของหน้าเว็บ เพียงเพิ่มชื่อไฟล์สไตล์ชีต CSS ด้วย @import และนี่ถือเป็นวิธีที่ดีที่สุดในการเพิ่ม CSS