CSS @import Rule
Introduction to CSS @import Rule
किसी भी HTML page के लिए CSS styles कई प्रकार से define की जा सकती है। उदाहरण के लिए आप HTML file के अंदर भी CSS style define कर सकते है या फिर आप चाहे तो एक external file create करके उसमे सभी styles define कर सकते है।
जब आप कोई बड़ी web application create करते है तो उसे design करने के लिए बहुत अधिक CSS styles define करते है। यदि आप इन styles को HTML file के अंदर ही define करते है तो ये इतनी अधिक होती है की आप इन्हें मैनेज नहीं कर सकते है।
क्योंकि जब आप HTML file के अंदर CSS define करते है तो वह categorized नहीं होती है। जब भी आपको कोई changes करने की आवश्यकता होती है तो आपको पूरी HTML file को search करना पड़ता है।
इसके अलावा जब आप HTML file में बहुत अधिक CSS styles define करते है तो इससे page की loading speed भी effect होती है। ऐसी situations के लिए CSS में @import rule introduce किया गया है।
CSS @import rule के द्वारा आप दूसरी style sheets से CSS styles import कर सकते है। Stylesheet वह file होती है जिसमें बहुत सी CSS styles defined होती है। Style sheet को .css extension के साथ save किया जाता है।
आप <link> tag द्वारा भी external stylesheet को webpage में include कर सकते है। जब आप <link> tag को use करते है तो उसमें parallel loading allow होती है। यानी की एक से अधिक stylesheet एक साथ load हो सकती है।
लेकिन जब आप @import rule use करते है तो parallel loading allow नहीं होती है। यानी की यदि आपने HTML file में एक से अधिक stylesheet import की है तो जब तक पहली stylesheet पूरी तरह से load नहीं होगी तब तक दूसरी stylesheet की loading शुरू नहीं होगी।
CSS @import rule के साथ आप media type (Computer, laptop, mobile आदि) भी define कर सकते है। यानी की आप define कर सकते है की import की जाने वाली style sheet किस तरह के media type पर apply होगी।
Media type के अलावा आप complete media query भी इस rule के साथ define कर सकते है। Media types आप <link> tag में भी define कर सकते है।
CSS @import rule को बहुत कम use किया जाता है। हालाँकि कई situations में यह rule बहुत useful होता है। उदाहरण के लिए जब आप चाहते है की जब तक कोई special stylesheet load ना हो तब तक बाकि stylesheets load ना हो तो इसके लिए आप इसे use कर सकते है।
Syntax of CSS @import Rule
CSS @import rule का general syntax निचे दिया जा रहा है।
@import url("url-of-stylesheet-here");
आप चाहे तो url() function ना define करके URL को directly एक string के रूप में भी define कर सकते है।
@import url-of-stylesheet-here;
जैसा की मैने आपको पहले बताया @import rule के साथ media type या media query को भी define किया जा सकता है। इन्हें URL के बाद सबसे आखिर में define किया जाता है।
@import url("url-of-stylesheet-here") media-type/media-query;
Media types और media queries से सम्बंधित अधिक जानकारी के लिए आप @media rule tutorial पढ़ सकते है।
Example of CSS @import Rule
CSS @import rule का simple उदाहरण निचे दिया जा रहा है।
myWebPage.html:
<html>
<head>
<title>CSS @import Rule Demo</title>
<style>
@import url("/project1/files/bht.css");
</style>
</head>
<body>
<h1>Best Hindi Tutorials</h1>
</body>
</html>
bht.css:
h1
{
color:lime;
}
यह उदाहरण निचे दिया गया output generate करता है।
