सीएसएस शामिल करने का सबसे अच्छा तरीका? @Import का उपयोग क्यों करें?

Si Esa Esa Samila Karane Ka Sabase Accha Tarika Import Ka Upayoga Kyom Karem



वेबसाइट और वेब ऐप विकसित करते समय, वेब ऐप की निरंतरता बनाए रखने के लिए अक्सर हर वेब पेज में एक ही स्टाइल की आवश्यकता होती है। उदाहरण के लिए, यदि किसी वेब ऐप के मुख्य पृष्ठ के रंग गुलाबी और बैंगनी रंग के संयोजन हैं, तो यह अजीब लगेगा यदि वेब ऐप का अगला पृष्ठ काले और नारंगी जैसे किसी अन्य रंग का हो।

लेकिन कोडिंग करते समय, प्रत्येक वेब पेज के लिए अलग-अलग CSS गुणों को शामिल करना मुश्किल होता है। इसलिए, एक ऐसे समाधान का उपयोग करना आवश्यक है जिसके माध्यम से एकल स्टाइल शीट बनाई जा सकती है और फिर कई फाइलों द्वारा आसानी से पहुँचा जा सकता है।

सीएसएस में @import नियम क्या है?

CSS शैली गुणों को शामिल करने का सबसे अच्छा तरीका @import नियम का उपयोग करना है। @import का उपयोग किसी अन्य स्टाइल शीट से CSS स्टाइलशीट को आयात या एक्सेस करने के लिए किया जाता है। यह डेवलपर के प्रयास को कम करता है क्योंकि आयातित स्टाइल शीट में जोड़े गए सभी गुणों को सीधे @import और फिर स्टाइल शीट का सटीक नाम लिखकर सीधे कार्यान्वित किया जाता है।







@Import नियम का सिंटैक्स

किसी अन्य स्टाइलशीट से स्टाइल शीट तक पहुँचने के लिए @import नियम जोड़ने का सिंटैक्स निम्नलिखित है:



@आयात 'स्टाइलशीटनाम.सीएसएस' ;

@Import नियम को निम्न विधि से भी जोड़ा जा सकता है:



@आयात यूआरएल ( स्टाइलशीटनाम.सीएसएस ) ;

सीधे शब्दों में, सीएसएस स्टाइलशीट फ़ाइल का नाम या तो उल्टे अल्पविराम में या 'के साथ गोल कोष्ठक में जोड़ें' यूआरएल 'लिखने के बाद' @आयात ”।





उदाहरण: @import नियम जोड़ना

यह समझने के लिए कि @import नियम कैसे काम करता है, हम एक साधारण कोड स्निपेट लिखते हैं:

< एच 1 > यह एक साधारण पाठ है! < / एच 1 >

उपरोक्त कोड स्निपेट में, HTML दस्तावेज़ में एक सरल एक-पंक्ति वाक्य के साथ एक

शीर्षक है। यह सरल कोड निम्न आउटपुट उत्पन्न करेगा:



चलिए कुछ CSS गुणों को परिभाषित करने के लिए एक स्टाइलशीट बनाते हैं जिसे बाद में उस फ़ाइल से आयात किया जा सकता है जिसके माध्यम से उपरोक्त वेब पेज इंटरफ़ेस बनाया गया है। हम एक और फाइल बनाते हैं और इसे नाम देते हैं ' शैली पत्रक ” के रूप में घोषित फ़ाइल प्रकार के साथ सीएसएस ”, और केवल

शीर्षक और मुख्य भाग के लिए कुछ गुण जोड़ें:

एच 1 {

रंग : मिडनाइट ब्लू ;

पृष्ठभूमि का रंग : नीला ;

पाठ संरेखित : केंद्र ;

}

शरीर {

पृष्ठभूमि का रंग : हल्का नीला रंग ;

}

शीर्षक और मुख्य भाग के लिए शैली गुणों वाली स्टाइलशीट फ़ाइल तक पहुँचने के लिए, हमें बस @import नियम को किसी भी CSS फ़ाइल में जोड़ने की आवश्यकता है जहाँ उस शैली की आवश्यकता है।



बस एक सरल @import नियम जोड़ने से प्रत्येक वेब पेज पर अलग-अलग गुणों को टाइप किए बिना वेब पेज इंटरफ़ेस में सभी शैली गुण लागू हो जाएंगे।

इसलिए, @import नियम को इस प्रकार लिखना आवश्यक है:

@आयात 'स्टाइलशीट.सीएसएस' ;

लिखकर @import नियम जोड़ना ' यूआरएल ” और गोल कोष्ठक में CSS फ़ाइल का नाम भी वही परिणाम प्रदर्शित करेगा:

@आयात यूआरएल ( स्टाइलशीट.सीएसएस ) ;

में परिभाषित गुण ' शैली पत्रक 'फ़ाइल को केवल एक साधारण जोड़कर कार्यान्वित किया जाता है' @आयात इसके लिए नियम:

बिना किसी अतिरिक्त प्रयास के फ़ाइल में CSS गुणों को शामिल करने का यह सबसे आसान तरीका है।

CSS में @import नियम के लाभ

@Import नियम आमतौर पर निम्नलिखित कारणों से उपयोग किया जाता है:

  • @Import नियम का उपयोग करने से डेवलपर का समय और प्रयास कम हो जाता है क्योंकि यह @import के बाद उस शीट का नाम लिखकर किसी विशेष स्टाइल शीट के सभी गुणों को लागू करता है।
  • बड़े और जटिल वेब ऐप्स में, @import नियम बहुत फायदेमंद साबित होता है क्योंकि स्टाइल शीट फ़ाइल का नाम जोड़कर एक ही शैली के गुणों को कई फाइलों में लागू किया जा सकता है।
  • स्टाइल शीट तत्वों जैसे हेडर, फुटर, बॉडी इत्यादि को अलग स्टाइल शीट फाइलों में संग्रहीत किया जा सकता है, और फिर @import नियम का उपयोग करके, आवश्यक स्टाइल में से किसी को शैली गुणों को जोड़ने, हटाने या टिप्पणी करने की आवश्यकता के बिना आयात किया जा सकता है। फ़ाइल।

यह @import नियम के उपयोग को सारांशित करता है और बताता है कि कैसे इस नियम को CSS को शामिल करने का सबसे अच्छा तरीका माना जाता है।

निष्कर्ष

एक सीएसएस स्टाइल शीट को किसी अन्य स्टाइल शीट से सीधे आयात या एक्सेस किया जा सकता है और आयातित स्टाइल शीट में सभी गुण सीधे फ़ाइल के वेब पेज पर लागू होते हैं जहां इसे आयात किया गया है। प्रत्येक वेब पेज इंटरफ़ेस के लिए प्रत्येक CSS संपत्ति को अलग से लिखने की आवश्यकता नहीं है। इसके लिए केवल CSS स्टाइल शीट फ़ाइल का नाम @import के साथ जोड़ना है। और, यह CSS को जोड़ने का सबसे अच्छा तरीका माना जाता है।