इनलाइन, एम्बेडेड, और बाहरी स्टाइल शीट्स: यहां आपको जो जानने की आवश्यकता है
फ़्रंट-एंड वेबसाइट विकास को अक्सर 3-पैर वाले मल के रूप में दर्शाया जाता है। ये पैर निम्नानुसार हैं:
इस मल, सीएसएस या कैस्केडिंग स्टाइल शीट का दूसरा चरण, आज हम यहां देख रहे हैं। विशेष रूप से, हम 3 प्रकार की शैलियों को संबोधित करना चाहते हैं जिन्हें आप दस्तावेज़ में जोड़ सकते हैं।
- इनलाइन शैलियों
- एम्बेडेड शैलियों
- बाहरी शैलियों
इनमें से प्रत्येक प्रकार की सीएसएस शैलियों में उनके फायदे और कमियां होती हैं, इसलिए आइए उनमें से प्रत्येक को व्यक्तिगत रूप से गहराई से देखें।
इनलाइन शैलियां
इनलाइन शैलियों वे शैलियों हैं जो सीधे HTML दस्तावेज़ में टैग में लिखी जाती हैं। इनलाइन शैलियों को केवल उस विशिष्ट टैग को प्रभावित करता है जिसे वे लागू होते हैं। यहां एक मानक लिंक, या एंकर, टैग पर लागू एक इनलाइन शैली का एक उदाहरण दिया गया है:
यह सीएसएस नियम इस लिंक के मानक मानक रेखांकन टेक्स्ट सजावट को बंद कर देगा। हालांकि, पृष्ठ पर कोई अन्य लिंक नहीं बदलेगा। यह इनलाइन शैलियों की सीमाओं में से एक है। चूंकि वे केवल एक विशिष्ट आइटम पर बदलते हैं, इसलिए आपको एक वास्तविक पृष्ठ डिज़ाइन प्राप्त करने के लिए इन शैलियों के साथ अपने HTML को कूड़े रखना होगा। यह एक अच्छा अभ्यास नहीं है। वास्तव में, यह "फ़ॉन्ट" टैग के दिनों और वेब पृष्ठों में संरचना और शैली के मिश्रण से एक कदम हटा दिया गया है।
इनलाइन शैलियों में भी बहुत अधिक विशिष्टता है।
इससे उन्हें अन्य, गैर-इनलाइन शैलियों के साथ ओवरराइट करना बहुत मुश्किल हो जाता है। उदाहरण के लिए, यदि आप साइट को उत्तरदायी बनाना चाहते हैं और मीडिया प्रश्नों का उपयोग करके कोई तत्व कुछ ब्रेकपॉइंट्स को कैसे देखता है, तो तत्व पर इनलाइन शैलियों को यह करना बहुत मुश्किल हो जाएगा।
आखिरकार, इनलाइन शैलियों वास्तव में केवल तभी उपयुक्त होते हैं जब बहुत कम इस्तेमाल किया जाता है।
असल में, मैं कभी भी कभी भी अपने वेबपृष्ठों पर इनलाइन शैलियों का उपयोग नहीं करता हूं।
एम्बेडेड शैलियाँ
एम्बेडेड शैलियों शैलियों हैं जो दस्तावेज़ के सिर में एम्बेडेड हैं। एंबेडेड शैलियों में केवल उस पृष्ठ पर टैग को प्रभावित किया जाता है, जिसमें वे एम्बेड किए गए हैं। एक बार फिर, यह दृष्टिकोण सीएसएस की शक्तियों में से एक को अस्वीकार करता है। चूंकि प्रत्येक पृष्ठ में शैलियों की शैली होगी
, यदि आप साइटसाइड परिवर्तन करना चाहते हैं, जैसे लाल रंग से हरे रंग के लिंक को बदलने की तरह, आपको प्रत्येक पृष्ठ पर यह परिवर्तन करना होगा, क्योंकि प्रत्येक पृष्ठ एक एम्बेडेड स्टाइल शीट का उपयोग करता है। यह इनलाइन शैलियों की तुलना में बेहतर है, लेकिन कई मामलों में अभी भी समस्याग्रस्त है।
स्टाइलशीट जो में जोड़े गए हैं
किसी दस्तावेज़ के उस पृष्ठ पर मार्कअप कोड की एक महत्वपूर्ण मात्रा भी जोड़ती है, जो पृष्ठ को भविष्य में प्रबंधित करने के लिए कठिन बना सकती है।
एम्बेडेड स्टाइल शीट का लाभ यह है कि अन्य बाहरी फाइलों को लोड करने की आवश्यकता के बजाय पृष्ठ के साथ तुरंत लोड। यह डाउनलोड गति और प्रदर्शन परिप्रेक्ष्य से लाभ हो सकता है ।
बाहरी स्टाइल शीट्स
अधिकांश वेबसाइटें आज बाहरी स्टाइल शीट का उपयोग करती हैं। बाहरी शैलियों वे शैलियों हैं जो एक अलग दस्तावेज़ में लिखी जाती हैं और फिर विभिन्न वेब दस्तावेज़ों से जुड़ी होती हैं। बाहरी स्टाइल शीट उन दस्तावेज़ों को प्रभावित कर सकती हैं जिनसे वे जुड़े हुए हैं, जिसका अर्थ है कि यदि आपके पास 20-पेज वाली वेबसाइट है, जहां प्रत्येक पृष्ठ एक ही स्टाइल शीट का उपयोग करता है (यह आमतौर पर यह किया जाता है), तो आप प्रत्येक में एक दृश्य परिवर्तन कर सकते हैं उस स्टाइल शीट को संपादित करके उन पृष्ठों का।
इससे दीर्घकालिक साइट प्रबंधन बहुत आसान हो जाता है।
बाहरी स्टाइल शीट्स का नकारात्मक पक्ष यह है कि उन्हें इन बाहरी फ़ाइलों को लाने और लोड करने के लिए पृष्ठों की आवश्यकता होती है। प्रत्येक पृष्ठ सीएसएस शीट में प्रत्येक शैली का उपयोग नहीं करेगा, इसलिए बहुत से पेज वास्तव में आवश्यकतानुसार एक बहुत बड़ा सीएसएस पृष्ठ लोड करेंगे।
हालांकि यह सच है कि बाहरी सीएसएस फ़ाइलों के लिए एक प्रदर्शन हिट है, यह निश्चित रूप से कम किया जा सकता है। वास्तव में, सीएसएस फाइलें केवल टेक्स्ट फाइलें हैं, इसलिए वे आम तौर पर शुरू करने के लिए बहुत बड़ी नहीं हैं। यदि आपकी पूरी साइट 1 सीएसएस फ़ाइल का उपयोग करती है, तो आपको प्रारंभ में लोड होने के बाद उस दस्तावेज़ का कैश किया जा सकता है।
इसका मतलब है कि पहले पृष्ठ पर कुछ विज़िट्स पर थोड़ा सा प्रदर्शन किया जा सकता है, लेकिन बाद के पृष्ठ कैश किए गए सीएसएस फ़ाइल का उपयोग करेंगे, इसलिए किसी भी हिट को अस्वीकार कर दिया जाएगा। बाहरी सीएसएस फाइलें हैं कि मैं अपने सभी वेबपृष्ठ कैसे बनाते हैं।