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