เรารู้ว่ามีสองวิธีในการอ้างอิง CSS ภายนอกในหน้าเว็บ ได้แก่: @import และลิงก์ เรามักจะได้ยินคนบอกว่าควรใช้ลิงก์เพื่อแนะนำ CSS ดีกว่า แต่คุณรู้ไหมว่าทำไม
ลิงค์ 
ตัวอย่างซอร์สโค้ด
[www.downcodes.com] ลิงค์คือการเชื่อมต่อ CSS ภายนอกกับหน้าเว็บ รูปแบบเฉพาะคือ <link href="http://www.downcodes.com/styles.css" type="text/css" />
ตัวอย่างซอร์สโค้ด
[www.downcodes.com] ความแตกต่างระหว่างการนำเข้าและลิงก์คือสามารถแนะนำไฟล์ CSS อื่นๆ หลายไฟล์เป็นไฟล์ CSS เดียวได้ รูปแบบเฉพาะคือ <style type="text/css">@import url("http://www.downcodes.com/ styles .css");</สไตล์>
ทำไมต้องใช้ @import
คนส่วนใหญ่ใช้ @import เนื่องจากเบราว์เซอร์รุ่นเก่าไม่รองรับ @import ซึ่งหมายความว่าเราสามารถใช้ @import เพื่อแนะนำสไตล์ CSS ที่สามารถแยกวิเคราะห์ได้เฉพาะเบราว์เซอร์รุ่นใหม่เท่านั้น
ใช้โค้ดต่อไปนี้เพื่อป้องกันไม่ให้เบราว์เซอร์ IE6 และต่ำกว่าแยกวิเคราะห์ CSS (วิธีการด้านล่าง IE6 อยู่ในสภาพทรุดโทรมและจะถูกละไว้ที่นี่)
@import url(../style.css) หน้าจอ;
เหตุผลหลักอีกประการหนึ่งคือเมื่อหน้าเว็บของคุณจำเป็นต้องแนะนำไฟล์ CSS ภายนอกหลายไฟล์ คุณต้องใช้ลิงก์เพื่อแนะนำ CSS จากนั้นใช้วิธี @import เพื่อแนะนำไฟล์ CSS อื่นๆ หลายไฟล์ในไฟล์ CSS นี้
ทำไมต้องใช้ลิงค์
สาเหตุหลักประการหนึ่งในการใช้วิธีการลิงก์คือคุณสามารถอนุญาตให้ผู้ใช้เปลี่ยนสไตล์ CSS ได้ เบราว์เซอร์สมัยใหม่ เช่น Firefox, Opera และ Safari ล้วนรองรับแอตทริบิวต์ rel="alternate stylesheet" (นั่นคือ คุณสามารถเลือกสไตล์ที่แตกต่างกันได้ บนเบราว์เซอร์) แน่นอนคุณสามารถใช้ Javascript เพื่อเปิดใช้งาน IE เพื่อรองรับผู้ใช้ที่เปลี่ยนสไตล์ได้
ปัญหาเล็กๆ น้อยๆ กับ @import หากแท็ก head ของหน้าเว็บของคุณเรียบง่ายมาก โดยมีเพียงแอตทริบิวต์ @import เท่านั้น เมื่อผู้ใช้เรียกดูอินเทอร์เน็ตด้วยความเร็วต่ำ เขาจะเห็นหน้าเว็บที่ไม่มีสไตล์ จากนั้นไฟล์ CSS จะเป็น ดาวน์โหลดแล้ว คุณสามารถดูสไตล์ที่เหมาะสมได้ เพื่อหลีกเลี่ยงปัญหานี้ คุณต้องแน่ใจว่ามีสคริปต์หรือแท็กลิงก์อย่างน้อยหนึ่งรายการในส่วนหัว
ควรใช้วิธีใด ในปัจจุบันดูเหมือนว่าสำหรับเว็บไซต์ขนาดเล็กการใช้ลิงก์จะเหมาะสมกว่า (หรือเป็นที่นิยมมากกว่า) แน่นอนว่าหากเราจำเป็นต้องทำให้ CSS เป็นโมดูลในอนาคต เราจะใช้ @import อย่างแน่นอน
บทความนี้แปลบางส่วนจากความแตกต่างระหว่าง @import และลิงก์สำหรับ CSS เพื่อการเรียนรู้ ยินดีต้อนรับสู่เพิ่ม
