เราสามารถนำเข้าไฟล์ CSS เพิ่มเติมภายในการประกาศ CSS อื่นได้ กฎ @import ใช้สำหรับวัตถุประสงค์นี้ เนื่องจากมันเชื่อมโยงไฟล์สไตล์ชีทในเอกสาร เรื่องนี้มักใช้เมื่อไฟล์สไตล์ชีทหนึ่งขึ้นอยู่กับอีกไฟล์หนึ่ง ระบุที่ด้านบนของเอกสารหลังการประกาศ @charset ภายใน <head>
ไวยากรณ์
ไวยากรณ์ของกฎ @import ดังนี้:
@import /*url or list-of-media-queries*/
Media queries สามารถเป็นข้อความประกอบซึ่งอาจระบุพฤติกรรมของเอกสารในสื่อต่างๆ
ตัวอย่าง
ตัวอย่างต่อไปนี้ใช้กฎ @import:
เอกสาร HTML:
<!DOCTYPE html> <html> <head> <style type="text/css"> @import url(style.css); body { background-color: honeydew; } </style> </head> <body> <p>This is demo paragraph one. </p> <p class="two">This is demo paragraph two.</p> <p>This is demo paragraph three</p> </body> </html>
เอกสาร CSS: style.css
p { color: navy; font-style: italic; } .two { color: darkgreen; font-size: 24px; }
ผลลัพธ์
ผลลัพธ์ที่ได้:
ตัวอย่างเพิ่มเติม
เอกสาร HTML:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div></div> </body> </html>
เอกสาร CSS:
div { height: 50px; width: 100px; border-radius: 20%; border: 2px solid blueviolet; box-shadow: 22px 12px 3px 3px lightblue; position: absolute; left: 30%; top: 20px; }
ผลลัพธ์
ได้ผลลัพธ์ดังนี้:
