มีหลายวิธีที่คุณสามารถใช้สไตล์ CSS กับหน้าเว็บรวมทั้งสไตล์ชีตภายนอกหรือแม้แต่รูปแบบอินไลน์ หากคุณใช้สไตล์ชีตภายนอกซึ่งเป็นวิธีที่แนะนำในการกำหนดรูปลักษณ์ของเอกสาร HTML วิธีหนึ่งก็คือการใช้
@import
@import ช่วยให้คุณสามารถใช้สไตล์ชีตภายนอกที่สำคัญในเอกสารของคุณได้ทั้งในหน้า HTML หรือแม้แต่เอกสาร CSS อื่น ๆ การแบ่งรูปแบบเป็นจำนวนเล็ก ๆ ไฟล์ที่โฟกัส (หนึ่งรูปแบบหนึ่งสำหรับการพิมพ์ตัวอักษรหนึ่งสำหรับรูปภาพ ฯลฯ ) บางครั้งอาจทำให้การจัดการไฟล์และรูปแบบต่างๆที่จัดไว้ง่ายขึ้น ถ้าคุณต้องการได้รับประโยชน์นั้นการนำเข้าไฟล์ต่างๆเหล่านี้คือสิ่งที่คุณจะต้องทำเพื่อให้ทุกอย่างทำงานสำหรับการแสดงผลบนหน้าเว็บของคุณ
นำเข้า HTML
เมื่อต้องการใช้
@import ใน HTML ของคุณคุณจะเพิ่มข้อมูลต่อไปนี้ลงใน
ของเอกสาร:
:
รหัสนี้จะนำเข้าสไตล์ชีตนี้สำหรับใช้กับเพจ HTML นี้และคุณสามารถจัดการรูปแบบทั้งหมดของคุณในไฟล์เดียวกันได้ ข้อเสียของ stylesheets สำคัญด้วยวิธีนี้คือวิธีนี้ไม่อนุญาตให้มีการดาวน์โหลดแบบขนาน หน้านี้ต้องดาวน์โหลดสไตล์ชีตก่อนที่จะย้ายไปยังส่วนที่เหลือรวมทั้งไฟล์ CSS อื่น ๆ ที่คุณกำลังนำเข้าโดยใช้วิธีนี้ ซึ่งจะมีผลเสียต่อความเร็วของหน้าและประสิทธิภาพการดาวน์โหลดของคุณ พิจารณาความสำคัญของประสิทธิภาพของหน้าเว็บในความสำเร็จของเว็บไซต์ข้อเสียเปรียบนี้เพียงอย่างเดียวอาจเป็นเหตุผลที่คุณต้องการหลีกเลี่ยงการใช้ @import
แนวทางทางเลือก
เป็นทางเลือกในการใช้
@import ใน HTML ของคุณคุณสามารถเชื่อมโยงไปยังไฟล์ CSS ดังต่อไปนี้:
ฟังก์ชันนี้มีลักษณะคล้ายกับ
@import ในที่จะช่วยให้คุณสามารถจัดการ CSS ทั้งหมดของคุณจากตำแหน่งที่ตั้งศูนย์กลาง / แฟ้มหนึ่ง แต่วิธีนี้เป็นที่นิยมจากมุมมองการดาวน์โหลด หากคุณต้องการแบ่งประเภทรูปแบบต่างๆออกเป็นไฟล์แยกกันคุณสามารถทำต่อไปได้และใช้ฟังก์ชัน @import ภายในไฟล์ CSS ต้นแบบของคุณ ซึ่งหมายความว่าไฟล์ CSS ภายนอกของคุณยังคงสามารถจัดการได้เป็นรายบุคคล แต่เนื่องจากไฟล์เหล่านี้ทั้งหมดนำเข้าสู่ CSS ต้นแบบหนึ่งประสิทธิภาพจะดีขึ้น
นำเข้า CSS
ใช้
ตัวอย่างด้านบนจะนำไฟล์ "default.css" มาใช้ในหน้า HTML ของคุณ ภายในไฟล์ CSS นั้นคุณจะมีรูปแบบเพจต่างๆของคุณ คุณสามารถมีรูปแบบเหล่านี้ได้ทั้งหมดในหนึ่งหน้าหรือคุณสามารถใช้ @import เพื่อแยกพวกเขาออกจากกันเพื่อให้สามารถจัดการได้ง่ายขึ้น ลองสมมติว่าเรากำลังใช้ไฟล์ CSS แยกต่างหาก 4 ไฟล์ - หนึ่งสำหรับรูปแบบหนึ่งสำหรับการพิมพ์ตัวอักษรและสำหรับภาพ ไฟล์ที่สี่คือไฟล์ "หลัก" ซึ่งเป็นหน้าที่เชื่อมโยงของเรา (ตัวอย่างนี้คือ "default.css") ที่ด้านบนสุดของไฟล์ CSS ต้นแบบที่เราสามารถเพิ่มกฎที่แสดงด้านล่าง:
@import url ('/ styles / layout.css'); @ import url ('/ styles / type.css'); @ import url ('/ styles / images.css');
โปรดทราบว่ากฎเหล่านี้ ต้อง ก่อนเนื้อหาอื่น ๆ ทั้งหมดในไฟล์ CSS ของคุณเพื่อให้สามารถทำงานได้ คุณไม่สามารถมีสไตล์ CSS อื่นก่อนกฎการนำเข้าเหล่านี้
ภายใต้กฎการนำเข้าเหล่านี้คุณสามารถเพิ่มรูปแบบ CSS อื่น ๆ ที่คุณต้องการได้ในแผ่นงานเริ่มต้นของคุณ เมื่อโหลดไฟล์ CSS หลักไฟล์แรกจะนำเข้าไฟล์แยกต่างหากเหล่านี้และเพิ่มสไตล์ลงในส่วนบนสุดของสไตล์ชีท จากนั้นจะมีสไตล์อื่น ๆ ทั้งหมดที่อยู่ภายใต้ไฟล์ที่นำเข้าเหล่านี้โดยสร้างไฟล์ CSS แบบเต็มรูปแบบซึ่งเว็บเบราเซอร์จะใช้เพื่อแสดงไซต์ของคุณ คุณจะได้รับประโยชน์ในการจัดการไฟล์ขนาดเล็กและเน้นมากขึ้นในขณะที่ยังมีสไตล์ชีตแบบเดียวที่เชื่อมโยงกับ HTML นั้น
ใช้ @import for Media Queries
สิ่งหนึ่งที่คุณอาจพิจารณาแยกออกจากข้อความค้นหาสื่อของเว็บไซต์ของคุณเกี่ยวกับรูปแบบเว็บไซต์ที่ปรับเปลี่ยนตามรูปแบบเป็นไฟล์แยกต่างหาก เนื่องจากรูปแบบที่ตอบสนองต่อเหล่านี้อาจสร้างความสับสนเมื่อเห็นควบคู่กับกฎสไตล์อื่น ๆ ในไซต์ของคุณหากมีรูปแบบเหล่านี้อยู่ในไฟล์อื่นอาจดูน่าสนใจ ข้อกังวลอย่างหนึ่งเกี่ยวกับแนวทางนี้คือตั้งแต่คุณ
@import กฎต้องเป็นอันดับแรกนั่นหมายความว่าจะมีการโหลดคำค้นหาสื่อของคุณก่อนส่วนที่เหลือของรูปแบบไซต์ของคุณ เมื่อสร้างไซต์ที่ตอบสนองสำหรับอุปกรณ์เคลื่อนที่ซึ่งคำนึงถึงผลการปฏิบัติงานนี่อาจเป็นปัญหา ด้วยเหตุนี้ขอแนะนำว่าคุณจะไม่แยกส่วนลักษณะการตอบสนองของไซต์ของคุณแยกต่างหากและใช้
@import เพื่อนำมาไว้ในไซต์ของคุณ ใช่ดูเหมือนว่าจะมีประโยชน์ในการดำเนินการดังกล่าว แต่ข้อเสียมากกว่าข้อดีเหล่านั้น
ฉันจำเป็นต้องใช้ @import หรือไม่?
ไม่คุณไม่ทำ ไซต์จำนวนมากแสดงรูปแบบหลักทั้งหมดภายในไฟล์เดียวและใหญ่เท่ากับไฟล์ดังกล่าวอาจมีการจัดการด้วยวิธีนี้ (นี่เป็นวิธีการที่ฉันทำในงานของฉันเอง) ถ้าคุณพบ
@import เป็นประโยชน์แล้วอาจเป็นส่วนหนึ่งของกระบวนการทำงานของคุณ มิฉะนั้นคุณสามารถสร้างเว็บเพจได้อย่างปลอดภัย สไตล์ชีตเดียวของคุณทั้งหมดของกฎ CSS
การสนับสนุนเบราว์เซอร์
เบราว์เซอร์เก่ามากมีปัญหากับกฎ @import เหล่านี้บางส่วน แต่เบราว์เซอร์เหล่านี้ไม่น่าจะเป็นปัญหาสำหรับคุณในปัจจุบัน นี่เป็นความจริงโดยเฉพาะอย่างยิ่งตอนที่สิ้นสุดของชีวิตสำหรับ Internet Explorer รุ่นเก่าแล้ว ท้ายสุดถ้าคุณตัดสินใจที่จะใช้
@import กฎใน HTML หรือ CSS ของคุณคุณไม่ควรใช้เป็นปัญหาเกี่ยวกับเว็บเบราเซอร์รุ่นเก่าเว้นแต่คุณจะมีความต้องการแปลก ๆ ในการสนับสนุน IE เวอร์ชันเก่าที่เหลือเชื่อ
แก้ไขโดย Jeremy Girard
