सीएसएस (CSS) नोट्स
सीएसएस (कैस्केडिंग स्टाइल शीट्स) एक स्टाइलिंग भाषा है जो डेवलपर्स को वेबसाइट के लुक और फील को नियंत्रित करने की अनुमति देती है। यह आपको अपनी साइट के लिए लेआउट, रंग, फ़ॉन्ट और अन्य डिज़ाइन तत्व निर्दिष्ट करने में सक्षम बनाता है।
Example:
<div class="w3-container w3-teal">
<h1>My Header</h1>
</div>
<img src="img_car.jpg" alt="Car">
<div class="w3-container">
<p>A car is a wheeled, self-powered motor vehicle used for transportation.</p>
</div>
<div class="w3-container w3-teal">
<p>My Footer</p>
</div>W3.CSS Tutorial "Online सीखें"
सीएसएस एचटीएमएल तत्वों को स्टाइल करके काम करता है, जो बदले में निर्धारित करता है कि पृष्ठ पर तत्व कैसे प्रदर्शित होते हैं।
सीएसएस का उपयोग किसी वेबसाइट की सामग्री और प्रस्तुति को अलग करने के लिए किया जाता है, जिससे डेवलपर्स अंतर्निहित एचटीएमएल सामग्री को संशोधित किए बिना वेबसाइट की उपस्थिति और लेआउट को आसानी से बदल सकते हैं।
सीएसएस के बारे में अधिक जानकारी के लिए, हमारे व्यापक लेख को देखें: सीएसएस के बारे में सब कुछ जानें।
सीएसएस के प्रकार सीएसएस के 3 प्रकार हैं:
इनलाइन: यह सीधे एक HTML तत्व पर लागू होता है। आंतरिक: यह "शैली" विशेषता के साथ एक HTML दस्तावेज़ के शीर्ष अनुभाग में परिभाषित किया गया है। बाहरी: इस प्रकार के सीएसएस को "लिंक" टैग द्वारा लिंक किए गए HTML दस्तावेज़ से एक अलग फ़ाइल में परिभाषित किया गया है। सामान्य तौर पर, इनलाइन का उपयोग अद्वितीय शैलियों के लिए किया जाता है, विशिष्ट पृष्ठों के लिए आंतरिक, कई पृष्ठों के लिए बाहरी, और सबसे लचीला है।
सभी प्रकार के सीएसएस को अच्छी तरह से सीखने और उपयोग करने के लिए, हमारे लेख को पढ़ें: "सीएसएस प्रकार सीखें और उनका उपयोग कैसे करें"।
सीएसएस सिंटैक्स सीएसएस के मूल सिंटैक्स में एक चयनकर्ता शामिल होता है, इसके बाद घुंघराले ब्रेसिज़ {} का एक सेट होता है, जिसमें वे शैलियाँ होती हैं जिन्हें आप उस चयनकर्ता पर लागू करना चाहते हैं।
उदाहरण के लिए, यदि आप अपनी वेबसाइट पर सभी शीर्षकों को बोल्ड बनाना चाहते हैं, तो आप निम्न सीएसएस कोड लिख सकते हैं:
H1, H2, H3, H4, H5, H6 { फ़ॉन्ट-वजन: बोल्ड; }
"CSS Comments का उपयोग आपके CSS कोड में नोट्स और स्पष्टीकरण जोड़ने के लिए किया जाता है। टिप्पणियाँ आपको और अन्य डेवलपर्स को आपकी शैलियों के उद्देश्य को समझने में मदद करती हैं और समय के साथ आपके कोड को बनाए रखना आसान बनाती हैं।
CSS में, टिप्पणियों को फ़ॉरवर्ड स्लैश और तारांकन वर्ण /* और */ का उपयोग करके परिभाषित किया जाता है।
उदाहरण के लिए, आप अपने CSS कोड में इस तरह एक टिप्पणी जोड़ सकते हैं:
/* This is a comment in CSS */ body { background-color: lightgray; }"
(सीएसएस चयनकर्ता) सीएसएस चयनकर्ता" का अनुवाद करता है। सीएसएस चयनकर्ता आपको वेब पेज पर विशिष्ट एचटीएमएल तत्वों को लक्षित करने और उन पर शैलियों को लागू करने की अनुमति देते हैं। चयनकर्ताओं का उपयोग करके, आप अपनी वेबसाइट के लेआउट, रंग और उपस्थिति को नियंत्रित कर सकते हैं। यह एक आकर्षक और उपयोगकर्ता के अनुकूल वेबसाइट बनाने के लिए आवश्यक है।
"सीएसएस यूनिट्स सीएसएस इकाइयों" का अनुवाद करता है। सीएसएस इकाइयों का उपयोग तत्वों के आकार को निर्दिष्ट करने के लिए किया जाता है, जैसे कि उनकी चौड़ाई, ऊंचाई और फ़ॉन्ट आकार। सीएसएस में कई प्रकार की इकाइयाँ हैं, जिनमें पिक्सेल (पीएक्स), ईएमएस और प्रतिशत (%) शामिल हैं।
सीएसएस इकाइयों को समझना आपकी वेबसाइट के डिजाइन में स्थिरता और सटीकता सुनिश्चित करने के लिए महत्वपूर्ण है, जिससे इसे बनाना और अपडेट करना आसान हो जाता है, और क्रॉस-डिवाइस संगतता सुनिश्चित होती है।
"सीएसएस प्रॉपर्टी" सीएसएस संपत्ति" का अनुवाद करता है। सीएसएस गुण व्यक्तिगत विशेषताएं हैं जो वेब पेज की उपस्थिति और स्वरूपण को परिभाषित करती हैं। कुछ सामान्य सीएसएस गुणों में शामिल हैं:
रंग: पाठ और अन्य तत्वों का रंग सेट करता है। फ़ॉन्ट आकार: पाठ का आकार सेट करता है. पृष्ठभूमि-रंग: किसी तत्व की पृष्ठभूमि का रंग सेट करता है। चौड़ाई: किसी तत्व की चौड़ाई सेट करता है। ऊंचाई: एक तत्व की ऊंचाई निर्धारित करता है।
सीएसएस में कई अन्य गुण हैं जिनका उपयोग वेब पृष्ठों को स्टाइल और प्रारूपित करने के लिए किया जा सकता है।
"सीएसएस में रंगों का उपयोग करना" आपको सिखाता है कि सीएसएस रंग का उपयोग कैसे करें, जो महत्वपूर्ण है क्योंकि यह आपको अपनी वेबसाइट की रंग योजना को नियंत्रित करने, एक एकजुट ब्रांड पहचान बनाने, पहुंच बढ़ाने, मनोदशा या भावना व्यक्त करने और पठनीयता में सुधार करने की अनुमति देता है।
सीएसएस में पृष्ठभूमि छवि जोड़ने के लिए, आप दृश्य रुचि जोड़ने और अपनी वेबसाइट की उपस्थिति को बढ़ाने के लिए सीएसएस पृष्ठभूमि छवियों का उपयोग कर सकते हैं। यह ठोस रंगों से परे अनुकूलन की अनुमति देता है, अद्वितीय तत्वों को जोड़ता है, और वांछित वातावरण बना सकता है। सीएसएस पृष्ठभूमि छवियों का उचित उपयोग एक वेबसाइट के समग्र डिजाइन और उपयोगकर्ता अनुभव में सुधार कर सकता है।
सीएसएस बॉर्डर सीएसएस में एक शैलीगत तत्व है जो एक एचटीएमएल तत्व को रेखांकित करता है, दृश्य रुचि जोड़ता है, और तत्व के आकार और स्थिति को परिभाषित करने में मदद करता है।
यह एक वेब पेज पर संरचना बनाने और तत्वों को अलग करने के लिए महत्वपूर्ण है, जिससे उपयोगकर्ताओं के लिए सामग्री पदानुक्रम को समझना आसान हो जाता है।
सीएसएस मार्जिन एक एचटीएमएल तत्व के बाहर का स्थान है, जिसका उपयोग तत्वों और व्हाइटस्पेस के बीच जगह बनाने के लिए किया जाता है।
यह दृश्य पदानुक्रम बनाने, पठनीयता में सुधार करने और तत्वों को बाहर खड़ा करने और आकर्षक दिखने के लिए महत्वपूर्ण है।
सीएसएस मार्जिन के बारे में अधिक जानकारी के लिए, कृपया देखें:
हिंदी में सीएसएस मार्जिन (मार्जिन प्रॉपर्टी)
सीएसएस पैडिंग एक एचटीएमएल तत्व के अंदर इसकी सामग्री और इसकी सीमा के बीच का स्थान है।
यह दृश्य पदानुक्रम बनाने, सामग्री और सीमा के बीच की दूरी को नियंत्रित करने, वेबसाइट के समग्र डिजाइन और उपयोगकर्ता अनुभव में सुधार करने के लिए महत्वपूर्ण है।
सीएसएस पैडिंग के बारे में अधिक जानकारी के लिए, कृपया देखें: www.w3school.com
हिंदी में सीएसएस पैडिंग (सभी पैडिंग गुण)
सीएसएस पाठ स्वरूपण सी.एस.एस. पाठ स्वरूपण HTML तत्व की पाठ्य सामग्री के शैलीगत नियंत्रण को संदर्भित करता है, जिसमें फ़ॉन्ट आकार, फ़ॉन्ट शैली, रेखा ऊँचाई, रंग और बहुत कुछ शामिल हैं. यह पाठ सामग्री को पठनीय, सुलभ बनाने के लिए महत्वपूर्ण है,और एक वेब पेज पर नेत्रहीन रूप से आकर्षक, एक वेबसाइट के समग्र डिजाइन और उपयोगकर्ता अनुभव में सुधार करता है।
सीएसएस बॉक्स मॉडल एक एचटीएमएल तत्व की संरचना का संदर्भ है, जिसमें सामग्री, पैडिंग, बॉर्डर और मार्जिन शामिल हैं। यह एक वेब पेज पर तत्वों के आकार और स्थिति को निर्धारित करने के साथ-साथ दृश्य पदानुक्रम बनाने, व्हाइटस्पेस को नियंत्रित करने और आकर्षक डिजाइन बनाने के लिए महत्वपूर्ण है।
वेब विकास के लिए सीएसएस बॉक्स मॉडल को समझने के लिए, कृपया इस लिंक को देखें:www.w3school.com
CSS बॉक्स मॉडल in Hindi (बॉक्स मॉडल को सीखें)
सीएसएस फ्लोट्स और क्लियर्स का उपयोग वेबसाइट पर तत्वों के लेआउट को नियंत्रित करने के लिए किया जाता है।
फ्लोट्स तत्वों को अन्य तत्वों के बाईं या दाईं ओर स्थित करने की अनुमति देते हैं, जबकि क्लियर तत्वों को तैरने वाले तत्वों के नीचे शुरू करने की अनुमति देते हैं।
यहां सीएसएस फ्लोट्स और क्लियर का एक उदाहरण दिया गया है:
/* फ्लोट उदाहरण */ .बाएं {फ्लोट: बाएं; }
.राइट {फ्लोट: राइट; }
/* स्पष्ट उदाहरण */ .स्पष्ट { स्पष्ट: दोनों; }
सीएसएस ग्रिड और फ्लेक्सबॉक्स आधुनिक लेआउट सिस्टम हैं जो वेबसाइट पर तत्वों के लेआउट को नियंत्रित करने के लिए शक्तिशाली और लचीले विकल्प प्रदान करते हैं।
ग्रिड और फ्लेक्सबॉक्स एक ग्रिड सिस्टम पर आधारित हैं, जिससे डेवलपर्स के लिए जटिल और उत्तरदायी लेआउट बनाना आसान हो जाता है।
यहां सीएसएस ग्रिड का एक उदाहरण दिया गया है:
/ * सीएसएस ग्रिड उदाहरण * /
सीएसएस फ्रेमवर्क सीएसएस के पूर्व-निर्मित पुस्तकालय हैं जो सीएसएस का उपयोग करके वेब पेजों की आसान, मानकीकृत स्टाइल िंग की अनुमति देते हैं। कई अलग-अलग सीएसएस फ्रेमवर्क उपलब्ध हैं, जिनमें शामिल हैं:
बूटस्ट्रैप।
बुनियाद।
बुलमा।
सिमेंटिक यूआई।
सीएसएस प्रीप्रोसेसर उन भाषाओं की स्क्रिप्टिंग कर रहे हैं जो नियमित सीएसएस की क्षमताओं का विस्तार करती हैं। वे चर, कार्यों, घोंसले के घोंसले और मॉड्यूलराइजेशन जैसी प्रोग्रामिंग अवधारणाओं को पेश करते हैं, जिससे डेवलपर्स को क्लीनर, अधिक संगठित और गतिशील स्टाइलशीट लिखने की अनुमति मिलती है। वे सीएसएस कोड लिखना और बनाए रखना आसान बनाते हैं। कुछ लोकप्रिय सीएसएस प्रीप्रोसेसर में सास, लेस और स्टाइलस शामिल हैं। सीएसएस एक स्टाइलशीट भाषा है जिसका उपयोग एचटीएमएल में लिखे गए वेब पेज की प्रस्तुति का वर्णन करने के लिए किया जाता है। सीएसएस अभ्यास और धैर्य के साथ सीखना मुश्किल नहीं है। सीएसएस सामग्री की प्रस्तुति को नियंत्रित करके HTML के साथ काम करता है। सीएसएस का लक्ष्य वेब पेज की सामग्री और प्रस्तुति को अलग करना है, जिससे इसे बनाना और अपडेट करना आसान हो जाता है, और विभिन्न उपकरणों और स्क्रीन आकारों में स्थिरता सुनिश्चित होती है।
एक आकर्षक और कार्यात्मक वेबसाइट बनाने के लिए, सीएसएस एक आवश्यक उपकरण है, और सीएसएस में महारत हासिल करना आपके वेब विकास कौशल को अगले स्तर पर ले जाएगा। यह सीएसएस नोट्स गाइड इसके वाक्यविन्यास और चयनकर्ताओं को समझने के लिए एक व्यापक मार्गदर्शिका प्रदान करता है, साथ ही उन्नत विषयों जैसे बॉक्स मॉडल, फ्लोट और क्लियर, और ग्रिड और फ्लेक्सबॉक्स। अपनी वेब विकास परियोजनाओं की सफलता सुनिश्चित करने के लिए, नवीनतम सीएसएस प्रगति और सर्वोत्तम प्रथाओं के साथ अभ्यास करना और अद्यतित रहना याद रखें।
