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