हम किसी अन्य CSS डिक्लेरेशन के अंदर अतिरिक्त CSS फाइल्स इम्पोर्ट कर सकते हैं। इस उद्देश्य के लिए @import नियम का उपयोग किया जाता है क्योंकि यह एक डॉक्यूमेंट में एक स्टाइलशीट को लिंक करता है। यह आमतौर पर तब उपयोग किया जाता है जब एक स्टाइलशीट दूसरी पर निर्भर होती है। इसे @charset डिक्लेरेशन के बाद <head> के अंदर डॉक्यूमेंट के शीर्ष पर निर्दिष्ट किया जाता है।
सिंटैक्स
@import नियम का सिंटैक्स निम्नानुसार है:
@import /*url or list-of-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; }
आउटपुट
यह निम्नलिखित आउटपुट देता है:
