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