कई तरीकों से आप वेब पेज पर सीएसएस शैलियों को लागू कर सकते हैं, जिसमें बाहरी स्टाइल शीट या इनलाइन शैलियों दोनों भी शामिल हैं। यदि आप बाहरी स्टाइल शीट का उपयोग कर रहे हैं, तो HTML दस्तावेज़ के स्वरूप और अनुभव को निर्देशित करने का अनुशंसित तरीका है, एक दृष्टिकोण का उपयोग करना है
@आयात।
@आयात नियम आपको अपने दस्तावेज़ में महत्वपूर्ण बाहरी स्टाइल शीट्स की अनुमति देता है - या तो एक HTML पृष्ठ में या यहां तक कि अन्य सीएसएस दस्तावेज़ों में भी। कई छोटी, केंद्रित फ़ाइलों (लेआउट के लिए एक, टाइपोग्राफी के लिए एक, छवियों के लिए एक इत्यादि) में कई शैलियों को तोड़ना कभी-कभी उन फ़ाइलों और विभिन्न शैली को प्रबंधित करना आसान बनाता है। यदि आप उस लाभ का आनंद लेना चाहते हैं, तो उन विभिन्न फ़ाइलों को आयात करना आपको अपने वेब पेज के प्रदर्शन के लिए सभी काम करने के लिए क्या करना होगा।
एचटीएमएल में आयात करना
का उपयोग करने के लिए
@आयात अपने एचटीएमएल में नियम, आप निम्नलिखित को जोड़ देंगे
दस्तावेज़ का:
:
यह कोड अब इस एचटीएमएल पेज पर उपयोग के लिए इस स्टाइल शीट को आयात करेगा और आप उस फाइल में अपनी सभी शैलियों का प्रबंधन कर सकते हैं। इस तरह महत्वपूर्ण स्टाइलशीट का नकारात्मक पक्ष यह है कि यह विधि समानांतर डाउनलोड की अनुमति नहीं देती है। पृष्ठ को शेष पृष्ठ पर जाने से पहले एक संपूर्ण स्टाइलशीट डाउनलोड करना होगा, जिसमें आप इस विधि का उपयोग कर आयात कर रहे किसी भी अन्य सीएसएस फाइलों को शामिल कर सकते हैं। इससे आपके पृष्ठ की गति पर नकारात्मक प्रभाव पड़ेगा और प्रदर्शन डाउनलोड होगा। वेबसाइट की सफलता के लिए पेज प्रदर्शन कितना महत्वपूर्ण है, यह देखते हुए अकेले यह दोष एक कारण हो सकता है कि आप @import का उपयोग करने से बचाना चाहते हैं।
वैकल्पिक दृष्टिकोण
उपयोग करने के विकल्प के रूप में
@आयात अपने एचटीएमएल में, आप इस सीएसएस फ़ाइल से इस तरह लिंक कर सकते हैं:
यह बहुत समान रूप से कार्य करता है
@आयात इसमें यह आपको अपने सभी सीएसएस को एक केंद्रीय स्थान / फ़ाइल से प्रबंधित करने की अनुमति देता है, लेकिन यह विधि डाउनलोड परिप्रेक्ष्य से बेहतर है। यदि आप अभी भी विभिन्न प्रकार की शैलियों को अलग-अलग फ़ाइलों में विभाजित करना चाहते हैं, तो आप ऐसा करना जारी रख सकते हैं और अपनी मास्टर सीएसएस फ़ाइल के अंदर @import कार्यक्षमता का उपयोग कर सकते हैं। इसका मतलब है कि आपकी बाहरी सीएसएस फाइलें अभी भी अलग-अलग प्रबंधित की जा सकती हैं, लेकिन चूंकि वे सभी एक मास्टर सीएसएस में आयात करते हैं, प्रदर्शन में सुधार हुआ है।
सीएसएस में आयात करना
का उपयोग करते हुए
उपरोक्त कोड उदाहरण आपके HTML पृष्ठ पर उपयोग करने के लिए "default.css" फ़ाइल लाएगा। उस सीएसएस फ़ाइल के अंदर, आपके पास विभिन्न पेज शैलियों होंगे। आप उन सभी शैलियों को उस पृष्ठ पर विस्तृत कर सकते हैं, या आप आसान प्रबंधन के लिए उन्हें अलग करने के लिए @import का उपयोग कर सकते हैं। एक बार फिर, मान लें कि हम 4 अलग सीएसएस फाइलों का उपयोग कर रहे हैं - एक लेआउट के लिए, एक टाइपोग्राफी के लिए, और छवियों के लिए एक। चौथी फ़ाइल हमारी "मास्टर" फ़ाइल है जो हमारा पृष्ठ लिंक करती है (इस उदाहरण के लिए, यह "default.css" है)। उस मास्टर सीएसएस फ़ाइल के शीर्ष पर हम नीचे दिखाए गए नियम जोड़ सकते हैं:
@import url ('/ शैलियों / layout.css'); @ आयात url ('/ शैलियों / type.css'); @ आयात url ('/ शैलियों / images.css');
ध्यान दें कि ये नियम जरूर उनके सीएसएस फ़ाइल में काम करने के लिए अन्य सभी सामग्री से पहले रहें। इन आयात नियमों से पहले आपके पास कोई अन्य सीएसएस शैली नहीं हो सकती है।
उन आयात नियमों के नीचे, आप अपनी डिफ़ॉल्ट शीट में जो भी सीएसएस शैलियों को रखना चाहते हैं उन्हें जोड़ सकते हैं। जब वह मुख्य सीएसएस फ़ाइल लोड हो जाती है, तो यह पहले इन अलग-अलग फ़ाइलों को आयात करेगी और स्टाइलशीट के शीर्ष पर अपनी शैलियों को जोड़ देगा। इसके बाद इन आयातित लोगों के नीचे आपकी सभी अन्य शैलियों का निर्माण होगा, पूर्ण सीएसएस फ़ाइल बनाना जो वेब ब्राउज़र आपकी साइट को प्रदर्शित करने के लिए उपयोग करेगा। आपको उस HTML में लिंक की गई एक स्टाइलशीट होने पर छोटी, अधिक केंद्रित फ़ाइलों को प्रबंधित करने का लाभ मिलता है।
मीडिया क्वेरीज़ के लिए @import का उपयोग करना
एक बात यह है कि आप अपनी वेबसाइट के मीडिया प्रश्नों को उत्तरदायी वेबसाइट शैलियों के लिए एक अलग फ़ाइल में अलग करने पर विचार कर सकते हैं। चूंकि ये उत्तरदायी शैलियों भ्रमित हो सकती हैं जब आपकी साइट के अन्य स्टाइल नियमों के साथ-साथ उन्हें अलग-अलग फ़ाइल में रखने के लिए आकर्षक हो सकता है। इस दृष्टिकोण के साथ एक चिंता यह है कि, आपके बाद से
@आयात नियम पहले होना चाहिए, इसका मतलब है कि आपकी मीडिया क्वेरी आपकी साइट की शेष शैलियों से पहले लोड की जाएगी। मोबाइल-पहली प्रतिक्रियाशील साइट बनाने पर जो खाते में प्रदर्शन लेता है, यह एक समस्या होने की संभावना है। इस कारण से, यह सुझाव दिया जाता है कि आप अपनी साइट की उत्तरदायी शैलियों को अलग से विभाजित नहीं करते हैं और उपयोग करते हैं
@आयात उन्हें अपनी साइट में लाने के लिए। हां, ऐसा करने के लाभ होने लगते हैं, लेकिन कमियां उन लाभों से अधिक हैं।
क्या मुझे @import का उपयोग करने की आवश्यकता है?
नहीं तुम नहीं। कई साइटें बस अपनी सभी मुख्य शैलियों को एक फ़ाइल के अंदर प्रदर्शित करती हैं और, जितनी बड़ी हो सकती है, यह इस तरह से प्रबंधित होती है (इस तरह मैं इसे अपने काम में करता हूं)। अगर तुम्हें मिले
@आयात सहायक, तो यह आपके वर्कफ़्लो का हिस्सा हो सकता है। अन्यथा, आप सुरक्षित रूप से वेबपृष्ठों का निर्माण कर सकते हैं आपके सभी सीएसएस नियमों की आपकी एकल स्टाइलशीट।
ब्राउज़र समर्थन
बहुत, पुराने ब्राउज़र में इनमें से कुछ @import नियमों में समस्या है, लेकिन इन ब्राउज़रों को इन दिनों आपके लिए समस्या होने की संभावना नहीं है। यह विशेष रूप से सच है कि इंटरनेट एक्सप्लोरर के पुराने संस्करणों के लिए जीवन की अंतिम तिथि समाप्त हो गई है। अंत में, यदि आप उपयोग करने का फैसला करते हैं
@आयात आपके एचटीएमएल या सीएसएस में नियम, आपको वेब ब्राउज़र के विरासत संस्करणों के साथ मुद्दों में नहीं भागना चाहिए जब तक कि आपके पास IE के अविश्वसनीय पुराने संस्करणों का समर्थन करने की कोई अजीब आवश्यकता न हो।
जेरेमी गिरार्ड द्वारा संपादित
