सीएसएस सिंटेक्स

CSS का उपयोग करके कोड लिखने से पहले आपको जिस विषय में महारत हासिल करनी होगी, वह है सिंटैक्स। शब्द syntax यह डराने वाला लग सकता है, लेकिन यह केवल उन नियमों को संदर्भित करता है जिनका उपयोग हम CSS में कोड लिखने के लिए करते हैं। ये नियम मानक हैं, जिससे अन्य लोगों के कोड को पढ़ना आसान हो जाता है।

CSS सिंटैक्स के दो सबसे महत्वपूर्ण भाग चयनकर्ता और घोषणा ब्लॉक हैं। चयनकर्ताओं का उपयोग उस तत्व (तत्वों) को इंगित करने के लिए किया जाता है, जिस पर आप एक वेब पेज पर एक शैली लागू करना चाहते हैं, और घोषणा ब्लॉक उन शैलियों की रूपरेखा तैयार करते हैं जिन्हें आप अपने द्वारा चुने गए तत्वों पर लागू करना चाहते हैं।

यह ट्यूटोरियल उदाहरणों के साथ, CSS सिंटैक्स की मूल बातें और CSS शैलियों की संरचना पर चर्चा करेगा। हम यह भी चर्चा करेंगे कि CSS में टिप्पणियाँ कैसे लिखें। इस ट्यूटोरियल को पढ़ने के अंत तक, आपके पास अपनी स्वयं की CSS शैलियाँ लिखने के लिए आवश्यक ज्ञान होगा।

सीएसएस स्टाइल नियम

CSS में, एक स्टाइलशीट नियमों का एक सेट संग्रहीत करती है जो यह निर्धारित करती है कि उपयोगकर्ता की स्क्रीन पर वेबसाइट कैसे दिखाई देनी चाहिए। उदाहरण के लिए, एक स्टाइलशीट वेब पेज पर टेक्स्ट के रंग या किसी विशेष हेडर द्वारा उपयोग किए जाने वाले फ़ॉन्ट आकार की रूपरेखा तैयार कर सकती है।

ये नियम एक मानक संरचना का पालन करते हैं, जो दो भागों से बना है:चयनकर्ता और घोषणाएं। कुल मिलाकर, CSS में एक शैली नियम इस प्रकार दिखाई देता है:

h1 { रंग:नीला;}

यह विशेष शैली सभी का रंग सेट करती है <h1> एक वेब पेज पर तत्वों को नीला करने के लिए। अब, इस शैली को इसके दो घटक भागों में विभाजित करते हैं ताकि हम विश्लेषण कर सकें कि यह कैसे काम करता है।

सीएसएस घोषणाएं

CSS स्टाइल का पहला भाग डिक्लेरेशन है। Declaration एक विशेष शैली के लिए एक और शब्द है जिसे आप वेब पेज पर किसी तत्व पर लागू करना चाहते हैं।

CSS शैली के नियम में कम से कम एक घोषणा शामिल होनी चाहिए और इसमें जितनी चाहें उतनी घोषणाएँ शामिल हो सकती हैं। इसलिए, यदि आप किसी वेब पेज पर किसी बॉक्स की चौड़ाई और ऊंचाई को 100px पर सेट करना चाहते हैं, और उसकी पृष्ठभूमि का रंग नीला करना चाहते हैं, तो आप एक घोषणा में ऐसा कर सकते हैं।

81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।

बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।

घोषणाओं में दो भाग होते हैं, जो इस प्रकार हैं:

• गुण। ये शैली गुण हैं जिन्हें किसी तत्व (यानी रंग, पृष्ठभूमि-रंग, चौड़ाई, ऊंचाई) पर लागू किया जाना चाहिए।
• मूल्य। यह भाग ब्राउज़र को बताता है कि संपत्ति को कैसे प्रदर्शित किया जाना चाहिए (यानी, एक बॉक्स का रंग "हरा" या "लाल" पर सेट किया जा सकता है)।

यहाँ एक CSS घोषणा के लिए वाक्य रचना है:

ध्यान दें कि हमारी सीएसएस संपत्ति पहले दिखाई देती है, और फिर एक कोलन (:) से अलग हो जाती है। कोलन आने के बाद वह मान आता है जिसे हम उस प्रॉपर्टी को असाइन करना चाहते हैं जिसे हमने परिभाषित किया है।

प्रत्येक CSS घोषणा एक अर्ध-बृहदान्त्र (;) में समाप्त होनी चाहिए।

यहाँ दो CSS घोषणाओं का एक उदाहरण दिया गया है:

रंग:नीला;फ़ॉन्ट-आकार:16px;

पहली घोषणा HTML तत्व के फ़ॉन्ट रंग को "नीला" पर सेट करती है। दूसरी घोषणा एकल तत्व के फ़ॉन्ट आकार को "16px" पर सेट करती है। ये दोनों चयनकर्ता एक संपत्ति के नाम से शुरू होते हैं और उसके बाद एक अल्पविराम और वह मूल्य होता है जिसे हम संपत्ति को निर्दिष्ट करना चाहते हैं।

घोषणाओं को घुंघराले कोष्ठक में संग्रहीत किया जाता है।

सीएसएस चयनकर्ता

पिछले खंड में, हमने चर्चा की कि वेब तत्व पर शैलियों को लागू करने के लिए घोषणाओं का उपयोग कैसे किया जाता है। लेकिन घोषणाएँ CSS सिंटैक्स का केवल एक हिस्सा हैं। दूसरा भाग चयनकर्ता है, जो ब्राउज़र को बताता है कि घोषणाओं का एक विशेष सेट किस तत्व पर लागू होना चाहिए।

यहाँ एक CSS चयनकर्ता के लिए वाक्य रचना है:

चयनकर्ता {// घोषणाओं की सूची}

चयनकर्ता ब्राउज़र को निर्देश देता है कि किस तत्व (तत्वों) पर शैलियों का एक सेट लागू होना चाहिए। इसलिए, उदाहरण के लिए, यदि हम सभी <div> . की चौड़ाई निर्धारित करना चाहते हैं तत्वों को "500px" तक, हम इस नियम का उपयोग करके ऐसा कर सकते हैं:

div {चौड़ाई:500px;}

div इस मामले में हमारा चयनकर्ता है और हमारे सीएसएस नियम की शुरुआत में आता है। फिर, हम पहले चर्चा किए गए सिंटैक्स का उपयोग करते हुए, अपनी घोषणाओं को घुंघराले कोष्ठक में परिभाषित करते हैं। यह नियम सभी <div> . की चौड़ाई निर्धारित करता है वेब पेज पर "500px" के तत्व।

यदि आप CSS चयनकर्ताओं के बारे में अधिक जानने में रुचि रखते हैं, तो CSS चयनकर्ताओं के लिए हमारी शुरुआती मार्गदर्शिका पढ़ें।

घोषणाएं और चयनकर्ता एक साथ मिलकर CSS शैली का नियम बनाते हैं।

सीएसएस टिप्पणियाँ

अब तक, हमने चर्चा की है कि CSS में स्टाइल रूल्स कैसे लिखें। हालांकि, स्टाइल शीट में लिखे गए सभी टेक्स्ट स्टाइल नियम नहीं हैं।

CSS स्टाइल शीट टिप्पणियों को संग्रहीत करने में भी सक्षम हैं। टिप्पणियाँ एक डेवलपर द्वारा स्टाइलशीट में कोड को समझना आसान बनाने के उद्देश्य से लिखे गए टेक्स्ट के ब्लॉक हैं। टिप्पणियों को ब्राउज़र द्वारा अनदेखा कर दिया जाता है, इसलिए आप स्टाइलशीट में जितनी चाहें उतनी टिप्पणियां जोड़ सकते हैं।

टिप्पणियाँ लिखना कई कारणों से फायदेमंद है।

सबसे पहले, टिप्पणियाँ लिखने से आप अपने कोड को लिखते समय उसका ट्रैक रख सकते हैं, और आपको अपने विचारों का एक रिकॉर्ड देता है जिसे आप भविष्य में कोड के एक ब्लॉक को समझने में सहायता की आवश्यकता होने पर संदर्भित कर सकते हैं। दूसरा, टिप्पणियां लिखने से उन डेवलपर्स को अनुमति मिलेगी जिन्होंने कोड का एक ब्लॉक नहीं लिखा है, इसके उद्देश्य और कोड लिखने के पीछे आपके इरादे को समझने के लिए।

CSS टिप्पणियाँ /* सिंटैक्स से शुरू होती हैं और */ सिंटैक्स के साथ समाप्त होती हैं।

एकल-पंक्ति और बहु-पंक्ति टिप्पणियाँ

CSS में दो प्रकार की टिप्पणियाँ दिखाई दे सकती हैं:सिंगल-लाइन और मल्टी-लाइन।

सिंगल-लाइन टिप्पणियां ऐसी टिप्पणियां हैं जो स्टाइल शीट पर केवल एक पंक्ति तक फैली हुई हैं। यहाँ CSS में सिंगल-लाइन कमेंट का एक उदाहरण दिया गया है जो एक स्टाइल रूल के ऊपर दिखाई देता है:

/* यह शैली सभी 

 टैग के फ़ॉन्ट आकार को 16px */p {font-size:16px;}

इस कोड में, हमारी टिप्पणी /* और */ मार्करों के बीच दिखाई देती है। हमारी टिप्पणी के नीचे एक शैली नियम है, जो उस वाक्य रचना का उपयोग करता है जिसकी हमने पहले चर्चा की थी।

बहु-पंक्ति टिप्पणियाँ ऐसी टिप्पणियाँ हैं जो स्टाइल शीट पर एक से अधिक पंक्तियों तक फैली हुई हैं। यहाँ एक CSS बहु-पंक्ति टिप्पणी का एक उदाहरण दिया गया है:

/* यह शैली सभी 

 टैग के फ़ॉन्ट आकार को 16px पर सेट करती है और टेक्स्ट का रंग ग्रे */p {font-size:16px; रंग:ग्रे;}

यह टिप्पणी दो पंक्तियों में फैली हुई है और एक सीएसएस शैली का वर्णन करती है।

निष्कर्ष

किसी भी प्रोग्रामिंग भाषा की तरह, CSS में कुछ बुनियादी सिंटैक्स होते हैं जो यह परिभाषित करते हैं कि आप भाषा का उपयोग करके कोड कैसे लिख सकते हैं।

CSS में, दो घटक हैं जो एक शैली नियम बनाते हैं:घोषणा और चयनकर्ता। घोषणाएँ वे शैलियाँ हैं जिन पर आप किसी तत्व पर लागू करना चाहते हैं, और चयनकर्ताओं का उपयोग उन तत्वों का चयन करने के लिए किया जाता है जिन पर आपकी घोषणाएँ लागू की जाएँगी।

इसके अलावा, सीएसएस में एक टिप्पणी सुविधा है जो आपको भविष्य के संदर्भ के लिए अपने कोड पर नोट्स लिखने की अनुमति देती है। टिप्पणियों को ब्राउज़र द्वारा अनदेखा कर दिया जाता है।

इस ट्यूटोरियल ने CSS सिंटैक्स की मूल बातें और CSS स्टाइल शीट पर टिप्पणी करने के तरीके पर चर्चा की। अब आप एक पेशेवर वेब डेवलपर की तरह CSS शैली के नियमों और टिप्पणियों को लिखना शुरू करने के लिए तैयार हैं!