सीएसएस वापस मूल बातें शब्दावली समझाया
CSS या Cascading Stylesheets हमारे वेब के लिए डिज़ाइन नियमों की परिभाषित भाषा को पूरा करते हैं। हर जगह कलाकार सीएसएस का उपयोग दैनिक आधार पर बुनियादी वेबसाइट लेआउट के लिए नियमों के सेट बनाने, व्यवस्थित करने और सांकेतिक शब्दों में बदलने के लिए कर रहे हैं। यह फ्रंट-एंड डिज़ाइन के लिए सबसे लोकप्रिय भाषा बन गई है और सीएसएस 3 की हालिया रिलीज़ के साथ अद्भुत क्षमता प्रदान करती है। लेकिन इस कोड का वास्तव में क्या मतलब है?
अब कुछ वर्षों के लिए भाषा पूरी तरह से विकसित हो गई है। गलतफहमी और समान शर्तों के दुरुपयोग के कारण भ्रम पैदा हो सकता है। सीएसएस मेज पर बहुत सी नई अवधारणाएँ लाता है। हम सीएसएस गुरु के रूप में मास्टर करने के लिए कुछ सबसे लोकप्रिय शब्दावली को कवर करेंगे.
क्यों सीएसएस के साथ विशेषज्ञता?
यह प्रश्न पहले भी सामने आ चुका है, और 2011 में प्रवेश करते हुए हम समान परिणाम देख सकते हैं। CSS एक मजबूत भाषा है जो स्क्रिप्टिंग या प्रोग्रामिंग की पसंद में नहीं है। यह एक शैली की भाषा है, अधिक विशेष रूप से कोड का वर्णन किया जाता है कि वेब पेज को कैसे व्यवहार करना चाहिए.
CSS का उपयोग करके हम व्यक्तिगत HTML तत्वों से विशेषताओं में सीधे हेरफेर कर सकते हैं। सीएसएस नियमों के माध्यम से सभी ब्लॉक, पैराग्राफ, लिंक और चित्र प्रभावित हो सकते हैं। वेब के लिए प्रस्तुतीकरण शब्दार्थ को हमेशा परिष्कृत करना एक बहुत बड़ा कदम है। यह मुख्य कारण है कि CSS अभी भी डिजाइनरों के लिए अग्रणी खिलाड़ी है - किसी ने भी कुछ बेहतर नहीं बनाया है!
गुण और मूल्य
यह CSS में तोड़ने का सबसे सरल तरीका है। सभी कोड दो कार्यों में नीचे आते हैं: डिजाइन लागू करने के लिए एक तत्व चुनना और क्या लागू करना है। उत्तरार्द्ध संपत्ति / मूल्य जोड़े के माध्यम से बनाया गया है.
उदाहरण के तौर पे लाल रंग; एक बहुत ही सरल संपत्ति / मूल्य जोड़ी है। हमारे द्वारा उपयोग की गई संपत्ति है रंग जो हमें किसी भी स्वीकार्य में पारित करने की अनुमति देता है मूल्य पाठ का रंग बदलने के लिए। यह हेक्स कोड या RGB (रेड-ग्रीन-ब्लू) कलर डेटा भी हो सकता है। कई बार डिजाइनर मूल्यों के विचार का उल्लेख नहीं करेंगे क्योंकि यह भ्रामक हो सकता है.
गुण और मूल्य वास्तव में एक ही विचार हैं। प्रत्येक संपत्ति की घोषणा के लिए एक मूल्य की आवश्यकता होती है, और अपने दम पर मूल्य अर्थहीन होते हैं। ऑनलाइन बहुत सारे दस्तावेज हैं जो कई अलग-अलग गुणों से अधिक हैं और वे HTML तत्वों को कैसे प्रभावित करते हैं। मैं किसी भी पास बुक स्टोर से CSS संदर्भ पुस्तक खरीदने की सलाह दूंगा। वे काफी सस्ते होते हैं और आपको उन सभी सूचनाओं को रखने की ज़रूरत होती है, जिनकी आपको ज़रूरत होती है.
चयनकर्ता मान
सीएसएस कोड की एक पूरी लाइन को पूरा करने के लिए चयनकर्ताओं की आवश्यकता होती है। ये वे हैं जो हम यह निर्धारित करने के लिए घोषित करते हैं कि हम किस प्रकार के तत्व को लक्षित कर रहे हैं। कई चयनकर्ता हैं और कई लोग इतने जटिल हैं कि औसत डिजाइनर को कौशल की आवश्यकता नहीं होगी। यदि आप अधिक जानकारी प्राप्त करना चाहते हैं तो W3 के चयनकर्ता डॉक्स की जाँच करें.
शैली परिभाषाओं को शुरू करने का सबसे सरल तरीका संपत्ति चयनकर्ताओं के रूप में नंगे तत्वों का उपयोग करना है। इसका मतलब है रूट कोड में हेरफेर करना जैसे पी पैराग्राफ के लिए, div डिवीजनों के लिए, और यहां तक कि तन तथा एचटीएमएल पूरे वेब पेज दस्तावेज़ में हेरफेर करने के लिए इस्तेमाल किया जा सकता है। नीचे सभी पैराग्राफ तत्वों को स्टाइल करने का एक त्वरित उदाहरण है.
p फ़ॉन्ट-परिवार: एरियल, संस-सेरिफ़; रंग: # 222; फोंट की मोटाई: बोल्ड;
सीएसएस वास्तविक वजन क्या देता है चयनकर्ता छींकने में कितना सटीक है। लक्षित शैलियों को पूरा करने का सबसे अच्छा तरीका 2 तरीकों के रूप में जाना जाता है कक्षाएं तथा आईडी. ये HTML में सामान्य विचार हैं जहाँ आप किसी भी तत्व को गुण के माध्यम से ID और वर्ग मान दे सकते हैं। फिर CSS का उपयोग करके उस विशिष्ट ब्लॉक में शैलियों को लागू करना सरल है.
p # Firstpar font-size: 14px; / * "फर्स्टपार्क" की आईडी के साथ स्टाइल पैराग्राफ * / p.comment फ़ॉन्ट-आकार: 1.0em; लाइन-ऊँचाई: 1.3em; / * शैलियों पैराग्राफ (ओं) को "टिप्पणी" के वर्ग के साथ * /
लंबाई इकाइयाँ और मान
अक्सर कई बार ये शब्द मिश्रित हो जाते हैं, न कि बड़ा आश्चर्य। मान पहले बताए गए थे जैसे कि हम किसी संपत्ति का वर्णन करने के लिए उपयोग करते हैं। लंबाई की इकाइयाँ भी इस मायने में हैं कि उनका उपयोग किसी संपत्ति का वर्णन करने के लिए किया जाता है.
अंतर यह है कि इन मानों के लिए संख्यात्मक डेटा की आवश्यकता होती है और इसलिए कुछ इकाइयों को वापस करना चाहिए। पिक्सेल (px) सबसे अधिक प्रचलित हैं और इसका इस्तेमाल कुछ भी करने के लिए किया जा सकता है: चौड़ाई / ऊँचाई, फ़ॉन्ट आकार, पैडिंग / मार्जिन, कुछ का नाम.
इनके अलावा आप तरल पदार्थ के माध्यम से अक्सर उपयोग किए जाने वाले प्रतिशत (%) को देख सकते हैं। चौड़ाई मानों को एक प्रतिशत पर सेट करते समय कंपाइलर वेब ब्राउज़र की संपूर्ण चौड़ाई मानकर 100% हो जाएगा। यह लेआउट संरचनाओं और यहां तक कि पेज टाइपोग्राफी के लिए शैलियों को लागू करते समय डिजाइनरों को बहुत अधिक सटीकता देता है.
घोषणा पत्र
अब इन सभी शब्दों को एक साथ रखने के बाद हम आखिरकार स्टाइलशीट के पीछे के मूल विचार पर चर्चा करने में सक्षम हैं। कोड के ब्लॉक का उपयोग विषय क्षेत्रों को चित्रित करने और तत्व विवरण को निर्दिष्ट करने के लिए किया जाता है। उदाहरण के लिए, नीचे एक साधारण नेविगेशन कंटेनर के लिए कोड की एक पंक्ति है:
div # nav प्रदर्शन: ब्लॉक; चौड़ाई: 100%; गद्दी: 3px 6px; मार्जिन-बॉटम: 20 पीएक्स;
इस कोड को प्रदर्शित करने का सबसे आसान तरीका गुणों को एक के बाद एक करना है। सीएसएस डेवलपर्स ने प्रत्येक संपत्ति को अपनी लाइन पर तोड़ने के लिए कोड के ब्लॉक का उपयोग किया है। यह एजेंडा न केवल अधिक कमरे लेता है, बल्कि क्षमता को कम करता है “हवा में घूमना” आपकी शीट ठीक वही है जो आपको चाहिए.
कोड के ब्लॉक को तोड़ने का एक बेहतर तरीका है कि थ्रेसहोल्ड तक पहुँचने के बाद कन्ट्रोल किए गए तत्वों को अपने आप में अलग कर दिया जाए। यह संख्या व्यक्तिगत है और डेवलपर्स के बीच भिन्न होगी। यह टिपिंग पॉइंट है जहां तर्क एक लाइन पर सब कुछ रखने के लिए मूर्खता से निर्देशित करता है, ज्यादातर पठनीयता के कारण.
नीचे मैंने एक साथ सभी नेविगेशन संपत्तियों के ब्लॉक का एक उदाहरण लिखा है। यह अभ्यास एक ही स्थान पर गहरे तत्वों को रखता है इसलिए सभी नेविगेशन तत्वों के संपादन बहुत सरल हैं.
div # nav प्रदर्शन: ब्लॉक; चौड़ाई: 100%; गद्दी: 3px 6px; मार्जिन-बॉटम: 20 पीएक्स; div # nav ul सूची-शैली: कोई नहीं; प्रदर्शन क्षेत्र; div # nav ul li float: left; मार्जिन-राइट: 10px; फ़ॉन्ट-आकार: 12 पीएक्स; div # nav ul li a color: # 0f0f0f; पाठ-सजावट: कोई नहीं; प्रदर्शन: इनलाइन-ब्लॉक; पैडिंग: 2 पीएक्स 5 पीएक्स;
CSS2 / CSS3 से संभावित प्रगति
सीएसएस 3 से आश्चर्यजनक लाभों के बारे में हाल ही में सुर्खियों में रहा है। लेकिन वास्तव में क्या है बदला हुआ भाषा में? स्पष्ट रूप से पुराना कोड अभी भी ठीक चलेगा। यह कम से कम कम्पाइलर (हमेशा एक अच्छी बात) के बीच पूर्ण पश्च-संगतता दिखाता है.
प्रमुख अंतर ज्यादातर नई संपत्तियों से संबंधित हैं। ये राउंडेड कॉर्नर और ड्रॉप-शैडो इफ़ेक्ट को ब्राउज़र में रेंडर करने की अनुमति देते हैं। CSS3 रंग-इन-दस्तावेज़ का वर्णन करने के लिए नए टूल भी प्रदान करता है। HSL (Hue-Saturation-Lightness) HSLA के अलावा सबसे नया है जिसमें अपारदर्शिता को कम करने के लिए एक अल्फा चैनल शामिल है.
सीधे मार्कअप स्टाइल के संबंध में विशेषता चयनकर्ता एक बड़ा कदम है। कोड की इस शैली के साथ आप एक विशिष्ट तत्व नाम को लक्षित कर सकते हैं जिसमें कुछ मानों के साथ विशेषताएँ होती हैं। ये ज्यादातर उपयोगी होते हैं जब मार्कअप के साथ काम करते हैं जैसे एक्सएमएल जहां नोड्स में हेरफेर करने के लिए मानक डिजाइन सिद्धांत नहीं हैं। नीचे दिया गया उदाहरण अपेक्षाकृत सरल विचार है:
div [अट्रिब ^ = "1"] / * शैलियाँ यहाँ * /
ऊपर दिया गया कोड CSS चयनकर्ताओं के पुस्तकालय का हिस्सा है। यह एक विशेषता के साथ सभी div तत्वों को प्रभावित करेगा “attrib” जो मूल्य भी रखता है “1”. यदि यह अभी भी भ्रमित कर रहा है तो नीचे दिए गए उदाहरण को स्पष्ट करें। सिद्धांत रूप में इन दोनों चयनकर्ताओं को एक ही क्रिया करनी चाहिए.
p [आईडी ^ = "प्राथमिक"] / * शैलियाँ * / p # प्राथमिक / * शैलियाँ * /
निष्कर्ष
कुछ अति-भ्रमित शर्तों को तोड़ने के बाद सीएसएस पार्क में टहलने जैसा लगता है। भाषा बहुत सहज है और शुरुआती कुछ घंटों के भीतर डिजाइनिंग शुरू कर सकते हैं। यह वही है जो वेब डेवलपर्स के बीच सीएसएस को इतना लोकप्रिय बनाता है.
CSS3 के लाभ केवल प्रभाव लेने के लिए शुरू हुए हैं। नए कुछ वर्षों में वेब रुझान विकसित करना हमें दिखाएगा कि वेब पेज डिजाइन पर वास्तव में हमारा कितना नियंत्रण है। वर्तमान में सीएसएस फ्रंट-एंड वेबसाइट स्टाइलिंग के लिए प्रमुख भाषा के रूप में गर्वित है। यहां तक कि अल्पविकसित मध्यवर्ती स्तर के कौशल में अभ्यास करने से भरपूर डिजाइन अनुभव और आगे के ज्ञान का उत्पादन किया जा सकता है.
