CSS Kya Hai सीएसएस क्या है ? इसके लाभ
सीएसएस, यानी कैस्केडिंग स्टाइल शीट्स, एक महत्वपूर्ण पूर्ण वेब डेवलपमेंट लैंग्वेज है जो वेबसाइट के विजुअल डिजाइन को तय करता है। "CSS Kya Hai" ये सवाल एक नई शुरुआत करने वाले वेब डेवलपर्स के लिए अहम होता है। CSS का इस्तमाल HTML के साथ होता है, जैसे हम अपने वेब पेजों को सुंदर और आकर्षण बनाने में सक्षम होते हैं।
जब आप किसी वेबसाइट पर विजिट करते हैं, तो जो रंग, फॉन्ट, स्पेसिंग, और सारा समग्र लेआउट आपको दिखाता है, वह सब सीएसएस के माध्यम से तैयार होता है। क्या भाषा की मदद से आप अपने वेब पेजों को रिस्पॉन्सिव बना सकते हैं, जिसमें वे अलग-अलग डिवाइस पर सही समय पर दिख सकें।
सीएसएस के बारे में, आप अपने एचटीएमएल तत्वों को स्टाइल दे सकते हैं, जिसका आपका वेब पेज एक पेशेवर और आकर्षक लुक प्रदान करता है। जब आप "CSS Kya Hai" के कॉन्सेप्ट को समझते हैं, तब आप अपने वेब डेवलपमेंट स्किल्स को और भी बेहतर तरीके से देख सकते हैं। इसके माध्यम से आप अपने वेब पेजों को कस्टमाइज करके उन्हें एक बेहतरी और व्यवसायिक डिजाइन दे सकते हैं। ये एक अहम टूल है जो वेबसाइट के समग्र डिजाइन को बेहतर बनाने में मदद करता है और एक अच्छा उपयोगकर्ता अनुभव तैयार करता है।
 |
| सीएसएस क्या है |
परिचय
1. सीएसएस ( CSS ) का संक्षिप्त अवलोकन
सीएसएस का अर्थ "कैस्केडिंग स्टाइल शीट्स" है और यह एक वेब डिज़ाइन भाषा है जिसका उपयोग वेब पेजों को प्रारूपित करने के लिए किया जाता है। सीएसएस आपको वेब पेजों की रूपरेखा, रंग, फ़ॉन्ट और अन्य दृश्य स्टाइलिंग विशेषताओं को सेट करने देता है।
डेवलपर्स को वेब साइटों को आकर्षक और उपयोगकर्ता के अनुकूल बनाने में सक्षम बनाने के लिए सीएसएस का उपयोग अन्य वेब भाषाओं, जैसे HTML या XML के साथ किया जाता है। यह एक अच्छी तकनीक है जो डिज़ाइन और संरचना को अलग-अलग फाइलों में रखकर वेब पेजों को बेहतर बनाने में मदद करती है, जिससे निर्माण और रखरखाव में सुधार होता है।
सीएसएस का उपयोग करके, आप साइट के ब्रांड और पहचान में सुधार करते हुए, कई वेब पेजों पर एक सुसंगत रूपरेखा और डिज़ाइन बना सकते हैं।
2. वेब विकास में महत्व
कैस्केडिंग स्टाइल शीट्स (सीएसएस) कई कारणों से वेब विकास में महत्वपूर्ण भूमिका निभाती है:
- चिंताओं को अलग करना: सीएसएस डेवलपर्स को वेब पेज की संरचना (एचटीएमएल) और प्रस्तुति (सीएसएस) को अलग करने की अनुमति देता है। यह मॉड्यूलर दृष्टिकोण डेवलपर्स के बीच कोड पठनीयता, रखरखाव और सहयोग को बढ़ाता है।
- सुसंगत स्टाइलिंग: सीएसएस के साथ, आप उन शैलियों को परिभाषित कर सकते हैं जो कई वेब पेजों पर लगातार लागू होती हैं। यह पूरी वेबसाइट के लिए एक समान और पेशेवर लुक सुनिश्चित करता है, जो ब्रांड पहचान और उपयोगकर्ता अनुभव में योगदान देता है।
- रिस्पॉन्सिव डिज़ाइन: सीएसएस रिस्पॉन्सिव वेब डिज़ाइन के निर्माण की सुविधा देता है जो विभिन्न स्क्रीन आकारों और उपकरणों के अनुकूल होते हैं। स्मार्टफोन, टैबलेट और डेस्कटॉप सहित आज के विविध उपकरणों के युग में यह आवश्यक है।
- लचीलापन और नियंत्रण: डेवलपर्स के पास वेब तत्वों के लेआउट, रंग, फ़ॉन्ट और रिक्ति पर सूक्ष्म नियंत्रण होता है। यह लचीलापन किसी वेबसाइट या एप्लिकेशन की विशिष्ट आवश्यकताओं को पूरा करने वाले रचनात्मक और अनुकूलित डिज़ाइन की अनुमति देता है।
- दक्षता: सीएसएस के माध्यम से शैलियों को लागू करके, आप एकल स्टाइलशीट को संशोधित करके किसी वेबसाइट के रंगरूप में वैश्विक परिवर्तन कर सकते हैं। यह दक्षता कई पृष्ठों वाली बड़ी वेबसाइटों के लिए विशेष रूप से फायदेमंद है।
- पृष्ठ लोड करने की गति: शैली की जानकारी को बाहरी सीएसएस फ़ाइलों में अलग करने से ब्राउज़र इन फ़ाइलों को कैश कर सकते हैं। परिणामस्वरूप, बाद के पेज लोड तेज़ हो सकते हैं क्योंकि ब्राउज़र को उसी स्टाइलशीट को दोबारा डाउनलोड करने की आवश्यकता नहीं होती है।
- अभिगम्यता: सीएसएस वेब सामग्री को अधिक सुलभ बनाने में योगदान देता है। डेवलपर्स सामग्री को तार्किक रूप से संरचित करने के लिए सीएसएस का उपयोग कर सकते हैं, जिससे स्क्रीन रीडर और अन्य सहायक तकनीकों के लिए विकलांग उपयोगकर्ताओं तक जानकारी की व्याख्या करना और उसे संप्रेषित करना आसान हो जाता है।
- एनिमेशन और इंटरएक्टिविटी: सीएसएस एनिमेशन और ट्रांज़िशन का समर्थन करता है, जिससे डेवलपर्स बाहरी प्लगइन या स्क्रिप्ट पर भरोसा किए बिना वेब पेजों पर इंटरैक्टिव और गतिशील तत्व जोड़ सकते हैं।
संक्षेप में, देखने में आकर्षक, प्रतिक्रियाशील और रखरखाव योग्य वेबसाइट बनाने के लिए सीएसएस वेब विकास में मौलिक है। संरचना और प्रस्तुति को अलग करने की इसकी क्षमता, इसके लचीलेपन और नियंत्रण के साथ, इसे आधुनिक और उपयोगकर्ता के अनुकूल वेब इंटरफेस डिजाइन करने के लिए एक अनिवार्य उपकरण बनाती है।
3. ऐतिहासिक पृष्ठभूमि
वेब विकास में कैस्केडिंग स्टाइल शीट्स (सीएसएस) की ऐतिहासिक पृष्ठभूमि वर्ल्ड वाइड वेब के शुरुआती दिनों से मिलती है।
सीएसएस के विकास में प्रमुख मील के पत्थर यहां दिए गए हैं:
- WWW (डब्ल्यूडब्ल्यूडब्ल्यू) का उद्भव: 1990 के दशक की शुरुआत में, जैसे ही इंटरनेट जनता के लिए सुलभ हो गया, वेबसाइटें मुख्य रूप से हाइपरटेक्स्ट मार्कअप लैंग्वेज (एचटीएमएल) का उपयोग करके बनाई गईं। हालाँकि, HTML को दस्तावेज़ों की संरचना के लिए डिज़ाइन किया गया था, न कि स्टाइलिंग या प्रस्तुति के लिए।
- HTML के साथ स्टाइलिंग चुनौतियाँ: वेब डिज़ाइनरों को HTML के भीतर स्टाइलिंग और लेआउट विकल्पों में सीमाओं का सामना करना पड़ा। प्रत्येक HTML टैग की अपनी डिफ़ॉल्ट शैली होती है, और इन शैलियों को संशोधित करने के लिए इनलाइन HTML विशेषताओं की आवश्यकता होती है। इस दृष्टिकोण के कारण कोड अतिरेक और असंगति पैदा हुई।
- सीएसएस प्रस्ताव: 1994 में, हाकोन वियम ली और बर्ट बोस ने HTML की स्टाइलिंग सीमाओं के समाधान के रूप में कैस्केडिंग स्टाइल शीट्स की अवधारणा का प्रस्ताव रखा। सीईआरएन में काम करने वाले ली ने प्रारंभिक सीएसएस प्रस्ताव विकसित करने के लिए वर्ल्ड वाइड वेब के आविष्कारक टिम बर्नर्स-ली के साथ सहयोग किया।
- CSS1 विशिष्टता: पहला आधिकारिक CSS विनिर्देश, CSS1, W3C (वर्ल्ड वाइड वेब कंसोर्टियम) द्वारा दिसंबर 1996 में जारी किया गया था। CSS1 ने फ़ॉन्ट गुण, पाठ संरेखण और रंग जैसे बुनियादी स्टाइलिंग गुणों को पेश किया, जो स्टाइलिंग वेब के लिए एक अलग परत प्रदान करता है। दस्तावेज़.
- CSS2 और व्यापक अंगीकरण: 1998 में पेश किया गया CSS2, पोजिशनिंग, टेबल और मीडिया प्रकारों सहित अधिक उन्नत स्टाइलिंग क्षमताएं लेकर आया। बेहतर ब्राउज़र समर्थन के साथ, वेब डेवलपर्स ने अपनी परियोजनाओं में सीएसएस को शामिल करना शुरू कर दिया, जिससे वेबसाइटों की दृश्य प्रस्तुति में सुधार हुआ।
- CSS3 और मॉड्यूलैरिटी: CSS3 की शुरुआत के साथ CSS का विकास जारी रहा, जो 1990 के दशक के अंत में शुरू हुआ और 2000 के दशक तक बढ़ा। CSS3 एक एकल अखंड विनिर्देश नहीं है, बल्कि मॉड्यूल का एक संग्रह है, प्रत्येक स्टाइल के विशिष्ट पहलुओं, जैसे बॉर्डर, पृष्ठभूमि और एनिमेशन को संबोधित करता है।
- ब्राउज़र युद्ध और संगतता: 1990 के दशक के अंत और 2000 के दशक की शुरुआत में, सीएसएस मानकों को लागू करने में ब्राउज़र असंगतियों के कारण वेब विकास को चुनौतियों का सामना करना पड़ा। इंटरनेट एक्सप्लोरर, नेटस्केप और अन्य ब्राउज़रों में सीएसएस की अलग-अलग व्याख्याएं थीं, जिससे वेब पेजों को प्रदर्शित करने के तरीके में विसंगतियां पैदा हुईं।
- W3C मानकीकरण: प्रारंभिक चुनौतियों के बावजूद, W3C ने CSS को परिष्कृत और मानकीकृत करना जारी रखा, जिससे क्रॉस-ब्राउज़र संगतता में सुधार हुआ। जैसे-जैसे ब्राउज़र W3C विनिर्देशों का अधिक बारीकी से पालन करते गए, डेवलपर्स को सुसंगत स्टाइलिंग के लिए CSS का उपयोग करने में अधिक विश्वास प्राप्त हुआ।
आज, सीएसएस वेब विकास का एक अभिन्न अंग है, जो डेवलपर्स को दिखने में आकर्षक, प्रतिक्रियाशील और सुलभ वेबसाइट बनाने के लिए शक्तिशाली उपकरण प्रदान करता है। नई सुविधाओं और मानकों के विकास के साथ सीएसएस का निरंतर विकास, ऑनलाइन अनुभव के दृश्य पहलुओं को आकार देने में इसकी निरंतर प्रासंगिकता सुनिश्चित करता है।
सीएसएस के प्रकार Types of CSS
CSS (कैस्केडिंग स्टाइल शीट्स) के तीन मुख्य प्रकार हैं:
( i ) इनलाइन सीएसएस:
- इनलाइन सीएसएस में स्टाइल विशेषता का उपयोग करके सीधे HTML टैग के भीतर HTML तत्वों को स्टाइल करना शामिल है।
- इनलाइन सीएसएस में निर्दिष्ट शैलियाँ केवल उस विशिष्ट तत्व पर लागू होती हैं जहाँ उन्हें परिभाषित किया गया है।
उदाहरण:
<p style="color: blue; font-size: 16px;">This is a blue paragraph with a font size of 16 pixels.</p>
( ii ) आंतरिक या एंबेडेड सीएसएस:
- आंतरिक या एम्बेडेड सीएसएस को HTML दस्तावेज़ के <head> अनुभाग में <style> तत्व के भीतर परिभाषित किया गया है।
- शैलियाँ संपूर्ण HTML दस्तावेज़ या चयनकर्ताओं के आधार पर विशिष्ट अनुभागों पर लागू होती हैं।
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: green;
}
</style>
</head>
<body>
<h1>This is a green heading</h1>
<p>Some text in the body.</p>
</body>
</html>
( iii ) बाहरी सीएसएस:
- बाहरी सीएसएस में .css एक्सटेंशन के साथ एक अलग सीएसएस फ़ाइल में शैलियों को परिभाषित करना शामिल है।
- CSS फ़ाइल <head> अनुभाग के भीतर <link> तत्व का उपयोग करके HTML दस्तावेज़ से जुड़ी हुई है।
- यह दृष्टिकोण स्टाइल और सामग्री को अलग करने की अनुमति देता है, जिससे कई पृष्ठों में शैलियों को बनाए रखना और अपडेट करना आसान हो जाता है।
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>This heading uses styles from an external CSS file.</h1>
<p>Some text in the body.</p>
</body>
</html>
Example (styles.css):
/* styles.css */
h1 {
color: blue;
font-size: 24px;
}
p {
margin: 10px;
}
ये विभिन्न प्रकार के सीएसएस डेवलपर्स को वेब पेजों की प्रस्तुति को प्रबंधित करने में लचीलापन प्रदान करते हुए, विशिष्टता और मॉड्यूलरिटी के विभिन्न स्तरों पर शैलियों को लागू करने की अनुमति देते हैं। किस प्रकार का उपयोग करना है इसका चुनाव परियोजना की विशिष्ट आवश्यकताओं और संरचना पर निर्भर करता है।
CSS Basics
1. CSS Kya Hai in Hindi सीएसएस क्या है ?
CSS का मतलब कैस्केडिंग स्टाइल शीट्स है। यह एक स्टाइल शीट भाषा है जिसका उपयोग वेब विकास में लेआउट, रंग, फ़ॉन्ट और अन्य दृश्य पहलुओं सहित HTML या XML में लिखे दस्तावेज़ की प्रस्तुति का वर्णन करने के लिए किया जाता है। सीएसएस वेब डेवलपर्स को एक वेब पेज की संरचना और सामग्री (एचटीएमएल द्वारा संचालित) को उसकी प्रस्तुति और स्टाइल से अलग करने में सक्षम बनाता है, जिससे एक वेबसाइट के कई पेजों में अधिक कुशल और सुसंगत डिजाइन की अनुमति मिलती है।
सीएसएस एक वेब पेज पर HTML तत्वों का चयन करके और उन पर शैलियों को लागू करके काम करता है। यह परिभाषित करने के लिए कि विभिन्न तत्व कैसे दिखाई देने चाहिए, यह नियमों, चयनकर्ताओं और घोषणाओं के एक सेट का उपयोग करता है। सीएसएस में "कैस्केडिंग" शब्द प्राथमिकता के क्रम को संदर्भित करता है जब परस्पर विरोधी शैलियों को लागू किया जाता है - विशिष्टता और महत्व के आधार पर शैलियाँ एक स्रोत से दूसरे स्रोत तक कैस्केड हो सकती हैं।
संक्षेप में, सीएसएस वेब पेजों की दृश्य अपील, प्रतिक्रियाशीलता और स्थिरता को बढ़ाने में महत्वपूर्ण भूमिका निभाता है, जो इंटरनेट पर बेहतर उपयोगकर्ता अनुभव में योगदान देता है।
2. वेब डिज़ाइन में CSS का उद्देश्य
वेब डिज़ाइन में कैस्केडिंग स्टाइल शीट्स (सीएसएस) का उद्देश्य बहुआयामी है, जो वेबसाइटों के समग्र विकास और प्रस्तुति को बढ़ाने के लिए कई प्रमुख कार्य करता है।
वेब डिज़ाइन में CSS के कुछ प्राथमिक उद्देश्य इस प्रकार हैं:
- चिंताओं को अलग करना: सीएसएस डेवलपर्स को वेब पेज की संरचना (एचटीएमएल) और प्रस्तुति (सीएसएस) को अलग करने की अनुमति देता है। यह पृथक्करण कोड को अधिक मॉड्यूलर, पठनीय और बनाए रखने में आसान बनाता है। HTML संरचना में बदलाव किए बिना दृश्य शैली में परिवर्तन लागू किए जा सकते हैं।
- सुसंगत स्टाइलिंग: सीएसएस डिजाइनरों को एक वेबसाइट के कई पृष्ठों पर लगातार स्टाइल लागू करने में सक्षम बनाता है। स्टाइलिंग में यह एकरूपता एक सामंजस्यपूर्ण और पेशेवर लुक बनाने में मदद करती है, जो ब्रांड की पहचान और उपयोगकर्ता अनुभव में योगदान करती है।
- रिस्पॉन्सिव डिज़ाइन: सीएसएस के साथ, डेवलपर्स रिस्पॉन्सिव डिज़ाइन तकनीकों को लागू कर सकते हैं, जिससे वेबसाइटें विभिन्न स्क्रीन आकारों और उपकरणों के अनुकूल बन सकती हैं। स्मार्टफोन, टैबलेट और डेस्कटॉप जैसे विभिन्न उपकरणों के युग में यह महत्वपूर्ण है।
- लचीलापन और नियंत्रण: सीएसएस वेब तत्वों के लेआउट, रंग, फ़ॉन्ट और रिक्ति पर सूक्ष्म नियंत्रण प्रदान करता है। यह लचीलापन डिजाइनरों को किसी वेबसाइट या एप्लिकेशन की विशिष्ट आवश्यकताओं के अनुरूप सौंदर्यपूर्ण रूप से मनभावन और अनुकूलित डिज़ाइन बनाने की अनुमति देता है।
- दक्षता: सीएसएस का उपयोग करके, डिज़ाइनर एकल स्टाइलशीट को संशोधित करके किसी वेबसाइट के स्वरूप में वैश्विक परिवर्तन कर सकते हैं। यह दक्षता कई पृष्ठों वाली बड़ी वेबसाइटों के लिए विशेष रूप से फायदेमंद है, जिससे शैलियों को अद्यतन करने में समय और प्रयास की बचत होती है।
- बेहतर पेज लोडिंग गति: बाहरी सीएसएस फ़ाइलों को ब्राउज़र द्वारा कैश किया जा सकता है, जिससे लौटने वाले आगंतुकों के लिए पेज लोडिंग समय तेज हो जाता है। यह अनुकूलन किसी वेब पेज को प्रस्तुत करने में लगने वाले समय को कम करके बेहतर उपयोगकर्ता अनुभव में योगदान देता है।
- अभिगम्यता: सीएसएस सुलभ वेब सामग्री के निर्माण का समर्थन करता है। डिज़ाइनर सामग्री को तार्किक रूप से संरचित करने के लिए सीएसएस का उपयोग कर सकते हैं, जिससे विकलांग उपयोगकर्ताओं के लिए पहुंच में सुधार हो सकता है जो स्क्रीन रीडर जैसी सहायक प्रौद्योगिकियों पर भरोसा करते हैं।
- एनिमेशन और इंटरएक्टिविटी: सीएसएस बाहरी प्लगइन्स या स्क्रिप्ट की आवश्यकता के बिना एनिमेशन और ट्रांज़िशन के कार्यान्वयन की अनुमति देता है। यह किसी वेबसाइट के इंटरैक्टिव और गतिशील तत्वों को बढ़ाता है, और अधिक आकर्षक उपयोगकर्ता अनुभव में योगदान देता है।
3. CSS HTML के साथ कैसे काम करता है
कैस्केडिंग स्टाइल शीट्स (सीएसएस) वेब पेजों की प्रस्तुति, लेआउट और स्टाइल को परिभाषित और नियंत्रित करने के लिए HTML (हाइपरटेक्स्ट मार्कअप लैंग्वेज) के साथ मिलकर काम करती है। यहां इस बात का अवलोकन दिया गया है कि CSS HTML के साथ कैसे इंटरैक्ट करता है:
चिंताओ का विभाजन:
- HTML किसी वेब पेज की सामग्री को संरचित करने के लिए मुख्य रूप से जिम्मेदार है। यह शीर्षकों, पैराग्राफों, छवियों, लिंक आदि जैसे तत्वों को परिभाषित करता है।
- CSS सीएसएस स्टाइल और प्रस्तुति पर ध्यान केंद्रित करता है। यह निर्देश देता है कि HTML तत्व कैसे दिखने चाहिए, रंग, फ़ॉन्ट, मार्जिन और स्थिति जैसी विशेषताओं को निर्दिष्ट करते हुए।
CSS को HTML से लिंक करना:
- CSS को HTML दस्तावेज़ से तीन मुख्य तरीकों से जोड़ा जा सकता है: बाहरी, आंतरिक या इनलाइन।
- बाहरी: सीएसएस को एक अलग फ़ाइल में संग्रहीत किया जाता है (आमतौर पर .css एक्सटेंशन के साथ) और दस्तावेज़ के <head> अनुभाग में <link> तत्व का उपयोग करके HTML से लिंक किया जाता है।
- आंतरिक: सीएसएस शैलियों को <head> अनुभाग के भीतर <style> तत्व का उपयोग करके सीधे HTML दस्तावेज़ में एम्बेड किया जा सकता है।
- इनलाइन: HTML टैग्स के भीतर शैली विशेषता का उपयोग करके शैलियों को सीधे HTML तत्वों पर भी लागू किया जा सकता है। बाहरी लिंकिंग का उदाहरण:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<!-- HTML content here -->
</body>
</html>
चयनकर्ता और घोषणाएँ:
- सीएसएस उन HTML तत्वों को लक्षित करने के लिए चयनकर्ताओं का उपयोग करता है जिन्हें स्टाइल की आवश्यकता होती है। चयनकर्ता तत्व के नाम, वर्ग, आईडी, विशेषताएँ आदि पर आधारित हो सकते हैं।
- घोषणाएँ चयनित तत्वों पर लागू वास्तविक शैलियाँ हैं। एक घोषणा में एक संपत्ति (उदाहरण के लिए, रंग, फ़ॉन्ट-आकार) और एक मान (उदाहरण के लिए, लाल, 16px) शामिल होते हैं।
उदाहरण:
/* styles.css */
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
.main-content {
width: 80%;
margin: 0 auto;
}
शैलियों का अनुप्रयोग:
- एक बार जब CSS HTML में लिंक या एम्बेड हो जाता है, तो ब्राउज़र HTML और CSS दोनों फ़ाइलों को पढ़ता है।
- फिर ब्राउज़र चयनकर्ताओं और घोषणाओं के आधार पर निर्दिष्ट शैलियों को संबंधित HTML तत्वों पर लागू करता है।
कैस्केडिंग क्रम:
- यदि कई शैलियाँ किसी विशेष तत्व के लिए संघर्ष करती हैं, तो सीएसएस के "कैस्केडिंग" पहलू के नियम यह निर्धारित करते हैं कि कौन सी शैली को प्राथमिकता दी जाएगी। महत्व का क्रम इनलाइन शैलियाँ, आंतरिक (एम्बेडेड) शैलियाँ और बाहरी शैलियाँ हैं।
संक्षेप में, सीएसएस डेवलपर्स को एक अलग परत में शैलियों को परिभाषित करने, वेब पेजों की प्रस्तुति और दृश्य अपील को बढ़ाने की अनुमति देकर HTML के साथ काम करता है। HTML और CSS के बीच चिंताओं का स्पष्ट पृथक्करण कोड मॉड्यूलरिटी, रखरखाव और दृश्यमान आकर्षक और उत्तरदायी वेब डिज़ाइन बनाने की क्षमता में योगदान देता है।
चयनकर्ताओं को समझना ( Understanding Selectors )
1.सीएसएस चयनकर्ताओं के प्रकार
CSS (Cascading Style Sheets) selectors are patterns that are used to select and style HTML elements.
There are several types of CSS selectors:
Universal selector (*):
Selects all elements on the page.
Example: * {color: red; ,
Type or element selector (eg, p, h1, div):
Selects all instances of the specified HTML element type.
Example: p {font-size: 16px; ,
Class selector (eg, .classname):
Selects all elements with a specific class attribute.
Example: .highlight { background-color: yellow; ,
ID selector (eg, #idname):
Selects a specific element with a unique ID attribute.
Example: #header { font-size: 20px; ,
Descendant selector (eg, div p):
Selects all elements that are descendants of a specified element.
Example: article p {color: blue; ,
Child selector (eg, div > p):
Selects all direct children of the specified parent element.
Example: nav > ul { list-style-type: none; ,
Adjacent sibling selector (e.g., h2+p):
Selects an element that is immediately preceded by a specified sibling element.
Example: h2 + p { font-weight: bold; ,
Attribute selector (e.g., [attribute=value]):
Selects elements with a specific attribute and value.
Example: input[type='text'] {width: 200px; ,
Pseudo-classes (e.g., :hover, :nth-child()):
Selects elements based on their position or position.
Example: a:hover { text-decoration: underline; ,
Pseudo elements (eg, ::before, ::after):
Selecting and styling a specific part of an element.
Example: p::first-line { font-weight: bold; ,
These CSS selectors provide a powerful way to target and style different elements within HTML documents. Developers often use combinations of these selectors to create specific styling rules based on the structure and attributes of HTML elements.
( i ) सार्वभौमिक चयनकर्ता
सीएसएस में सार्वभौमिक चयनकर्ता को तारांकन चिह्न (*) द्वारा दर्शाया जाता है और इसका उपयोग वेब पेज पर सभी तत्वों का चयन करने के लिए किया जाता है। लागू होने पर, सार्वभौमिक चयनकर्ता के लिए परिभाषित शैलियाँ दस्तावेज़ में प्रत्येक HTML तत्व को प्रभावित करेंगी। यहाँ एक उदाहरण है:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
इस उदाहरण में, सार्वभौमिक चयनकर्ता का उपयोग सभी तत्वों में मार्जिन, पैडिंग और बॉक्स-आकार गुणों के लिए एक सुसंगत शैली सेट करने के लिए किया जाता है। यह एक सामान्य उपयोग का मामला है, विशेष रूप से सीएसएस रीसेट या सामान्यीकरण स्टाइलशीट में, जहां डेवलपर्स का लक्ष्य डिफ़ॉल्ट ब्राउज़र शैलियों को ओवरराइड करने के लिए एक सुसंगत बेसलाइन शैली स्थापित करना है।
( ii ) Types of selectors
चयनकर्ताओं के प्रकार जिन्हें तत्व चयनकर्ता के रूप में भी जाना जाता है, सीएसएस चयनकर्ताओं की एक मौलिक श्रेणी है जो HTML तत्वों को उनके तत्व प्रकार या नाम के आधार पर लक्षित करते हैं। इनका उपयोग किसी विशेष HTML तत्व के सभी उदाहरणों पर शैलियाँ लागू करने के लिए किया जाता है। यहां प्रकार चयनकर्ताओं के कुछ उदाहरण दिए गए हैं:
Paragraph Selector (
p):p {
font-size: 16px;
color: #333;
}
यह चयनकर्ता पृष्ठ पर सभी <p> (पैराग्राफ) तत्वों पर शैलियाँ लागू करता है।
Heading Selector (
h1, h2, ..., h6):h1 {
font-size: 24px;
color: blue;
}
यह चयनकर्ता सभी <h1> तत्वों को लक्षित करता है और विशिष्ट स्टाइल सेट करता है।
List Item Selector (
li):li {
list-style-type: square;
margin-left: 20px;
}
यह चयनकर्ता सभी <li> (List item) तत्वों पर शैलियाँ लागू करता है, सूची आइटम मार्कर को बदलता है और बायां मार्जिन जोड़ता है।
Link Selector (
a):a {
text-decoration: none;
color: #0066cc;
}
यह चयनकर्ता सभी <a> (एंकर) तत्वों को स्टाइल करता है, डिफ़ॉल्ट अंडरलाइन को हटाता है और एक विशिष्ट टेक्स्ट रंग सेट करता है।
Table Row Selector (
tr):tr {
background-color: #f2f2f2;
}
यह चयनकर्ता बेहतर दृश्यता के लिए पृष्ठभूमि रंग सेट करते हुए सभी <tr> (तालिका पंक्ति) तत्वों को लक्षित करता है।
विशिष्ट HTML तत्वों में व्यापक शैलियों को लागू करने, एक वेब पेज पर स्थिरता और संरचना बनाने के लिए प्रकार चयनकर्ता आवश्यक हैं। वे सीएसएस स्टाइलिंग की नींव बनाते हैं, जिससे डेवलपर्स को विभिन्न तत्वों की उपस्थिति को सीधे और व्यवस्थित तरीके से परिभाषित करने की अनुमति मिलती है।
( iii ) Class selectors
Class selectors सीएसएस में क्लास चयनकर्ताओं का उपयोग HTML तत्वों को उनकी क्लास विशेषता के आधार पर लक्षित करने और शैलियों को लागू करने के लिए किया जाता है। कक्षाएं एक समान उद्देश्य या विशेषता साझा करने वाले कई तत्वों को समूहीकृत करने और शैलीबद्ध करने का एक तरीका प्रदान करती हैं।
यहां बताया गया है कि कक्षा चयनकर्ता कैसे काम करते हैं:
HTML with Class Attribute:
<p class="highlight">This is a paragraph with a highlight class.</p>
<div class="highlight">This is a div with a highlight class.</div>
CSS Class Selector:
.highlight {
background-color: yellow;
color: black;
font-weight: bold;
}
Class Selector .हाइलाइट के पहले एक बिंदु (.) होता है और इसका उपयोग उन शैलियों को परिभाषित करने के लिए किया जाता है जिन्हें वर्ग विशेषता के साथ "हाइलाइट" पर सेट किए गए किसी भी तत्व पर लागू किया जाएगा।
Result:
हाइलाइट क्लास वाले <p> और <div> दोनों तत्वों पर परिभाषित शैलियाँ लागू होंगी। यह पूरे दस्तावेज़ में समान वर्ग वाले तत्वों की लगातार स्टाइलिंग की अनुमति देता है।
वर्ग चयनकर्ता बहुमुखी हैं और वेब विकास में व्यापक रूप से उपयोग किए जाते हैं। वे तत्वों के विशिष्ट समूहों पर शैलियों को लागू करने का एक साधन प्रदान करते हैं, जिससे स्टाइलिंग के लिए एक मॉड्यूलर और संगठित दृष्टिकोण की सुविधा मिलती है। एकाधिक तत्व एक ही वर्ग को साझा कर सकते हैं, जिससे यह वेबपेज के विभिन्न हिस्सों में शैलियों का पुन: उपयोग करने का एक प्रभावी तरीका बन जाता है।
( iv ) ID selectors
सीएसएस में आईडी चयनकर्ताओं का उपयोग किसी विशिष्ट HTML तत्व को उसके विशिष्ट पहचानकर्ता के आधार पर लक्षित और स्टाइल करने के लिए किया जाता है। कक्षाओं के विपरीत, जिन्हें कई तत्वों पर लागू किया जा सकता है, एक दस्तावेज़ के भीतर एक आईडी अद्वितीय होनी चाहिए। यहां बताया गया है कि आईडी चयनकर्ता कैसे काम करते हैं:
HTML with ID Attribute:
<p id="intro">This is a paragraph with an ID of "intro."</p>
<div id="main-content">This is a div with an ID of "main-content."</div>
CSS ID Selector:
#intro {
font-size: 18px;
color: blue;
}
आईडी चयनकर्ता #intro के पहले एक हैश (#) होता है और इसका उपयोग उन शैलियों को परिभाषित करने के लिए किया जाता है जिन्हें विशेष रूप से HTML तत्व पर "परिचय" पर सेट आईडी विशेषता के साथ लागू किया जाएगा।
Result :
केवल "परिचय" की आईडी वाले <p> तत्व में परिभाषित शैलियाँ लागू होंगी। आईडी का उद्देश्य विशिष्ट पहचानकर्ता होना है, इसलिए आईडी चयनकर्ता के माध्यम से लागू की गई स्टाइलिंग पृष्ठ पर केवल एक तत्व को प्रभावित करती है।
टिप्पणी:
जबकि कक्षाओं का पुन: उपयोग किया जा सकता है, आईडी एक पृष्ठ के भीतर अद्वितीय होनी चाहिए। एकाधिक तत्वों के लिए एक ही आईडी का उपयोग करना अमान्य HTML माना जाता है और इससे अप्रत्याशित व्यवहार हो सकता है।
आईडी चयनकर्ताओं को अक्सर विशिष्ट और अद्वितीय तत्वों को स्टाइल करने के लिए नियोजित किया जाता है, जैसे कि हेडर, फ़ुटर, या किसी वेबपेज के अन्य अनुभाग जो केवल एक बार होते हैं। वे अलग-अलग तत्वों पर अलग-अलग शैलियों को लागू करने का एक तरीका प्रदान करते हैं, सीएसएस स्टाइल के लिए अधिक लक्षित और संगठित दृष्टिकोण में योगदान करते हैं।
विशेषता चयनकर्ता
सीएसएस में विशेषता चयनकर्ता आपको उनकी विशेषताओं की उपस्थिति या मूल्य के आधार पर HTML तत्वों को चुनने और स्टाइल करने की अनुमति देते हैं। यह विशिष्ट मानदंडों को पूरा करने वाले तत्वों को लक्षित करने का एक शक्तिशाली तरीका प्रदान करता है।
यहां विशेषता चयनकर्ताओं के कुछ उदाहरण दिए गए हैं:
Attribute Presence Selector (
[attribute]):[target] {
color: red;
}
यह चयनकर्ता लक्ष्य विशेषता वाले सभी तत्वों को लक्षित करता है, चाहे उसका मूल्य कुछ भी हो।
Attribute Value Selector (
[attribute=value]):[type="text"] {
border: 1px solid #ccc;
}
यह चयनकर्ता "टेक्स्ट" पर सेट प्रकार विशेषता वाले सभी तत्वों को लक्षित करता है।
Attribute Begins With Selector (
[attribute^="value"]):[href^="https://"] {
color: blue;
}
यह चयनकर्ता href विशेषता वाले सभी तत्वों को लक्षित करता है जो "https://" से शुरू होता है।
Attribute Ends With Selector (
[attribute$="value"]):[src$=".png"] {
border: 2px solid green;
}
यह चयनकर्ता एक src विशेषता वाले सभी तत्वों को लक्षित करता है जो ".png" पर समाप्त होता है।
Attribute Contains Selector (
[attribute*="value"]):[title*="important"] {
font-weight: bold;
}
यह चयनकर्ता "महत्वपूर्ण" शब्द वाले शीर्षक विशेषता वाले सभी तत्वों को लक्षित करता है।
विशेषता चयनकर्ता विशिष्ट विशेषताओं और उनके मूल्यों के आधार पर शैलियों को लागू करने का एक लचीला तरीका प्रदान करते हैं। वे विशेष रूप से स्टाइलिंग तत्वों के लिए उपयोगी होते हैं जो किसी दस्तावेज़ के भीतर सामान्य विशेषताओं या विशेषताओं को साझा करते हैं।
CSS Properties
1. Overview of commonly used CSS properties
आम तौर पर उपयोग की जाने वाली सीएसएस संपत्तियां लेआउट, टाइपोग्राफी, रंग, बॉर्डर और बहुत कुछ सहित स्टाइलिंग पहलुओं की एक विस्तृत श्रृंखला को कवर करती हैं। यहां कुछ व्यापक रूप से उपयोग की जाने वाली सीएसएस संपत्तियों का अवलोकन दिया गया है:
लेआउट ( Layout )
- प्रदर्शन: किसी तत्व (ब्लॉक, इनलाइन, फ्लेक्स, आदि) का लेआउट व्यवहार निर्धारित करता है।
- स्थिति: किसी तत्व की स्थिति निर्धारण विधि (सापेक्ष, निरपेक्ष, स्थिर, स्थैतिक) निर्दिष्ट करती है।
बॉक्स मॉडल ( Box Model )
- चौड़ाई और ऊंचाई: किसी तत्व के सामग्री बॉक्स की चौड़ाई और ऊंचाई निर्धारित करता है।
- मार्जिन: किसी तत्व के बाहर का स्थान निर्दिष्ट करता है।
- पैडिंग: किसी तत्व की सामग्री और उसकी सीमा के बीच के स्थान को परिभाषित करता है।
- सीमा: किसी तत्व की सीमा के गुण सेट करता है (उदाहरण के लिए, सीमा-चौड़ाई, सीमा-रंग)।
टाइपोग्राफी ( Typography )
- फ़ॉन्ट-परिवार: पाठ के लिए प्रयुक्त फ़ॉन्ट को परिभाषित करता है।
- फ़ॉन्ट-आकार: फ़ॉन्ट का आकार सेट करता है।
- फ़ॉन्ट-वजन: फ़ॉन्ट की मोटाई निर्दिष्ट करता है।
- लाइन-ऊंचाई: पाठ की एक पंक्ति की ऊंचाई को नियंत्रित करता है।
रंग की ( Colours )
- रंग: टेक्स्ट का रंग सेट करता है।
- पृष्ठभूमि-रंग: किसी तत्व की पृष्ठभूमि का रंग परिभाषित करता है।
- अपारदर्शिता: किसी तत्व के पारदर्शिता स्तर को निर्दिष्ट करता है।
मूलपाठ ( Text )
- टेक्स्ट-संरेखण: टेक्स्ट को एक तत्व (बाएं, केंद्र, दाएं) के भीतर संरेखित करता है।
- टेक्स्ट-सजावट: टेक्स्ट में सजावट जोड़ता है (उदाहरण के लिए, रेखांकित करें, ओवरलाइन करें)।
- टेक्स्ट-ट्रांसफ़ॉर्म: टेक्स्ट के बड़े अक्षरों को नियंत्रित करता है (उदाहरण के लिए, अपरकेस, लोअरकेस)।
रिक्ति ( Position )
- मार्जिन: किसी तत्व के बाहर का स्थान निर्दिष्ट करता है।
- पैडिंग: किसी तत्व की सामग्री और उसकी सीमा के बीच के स्थान को परिभाषित करता है।
स्थिति निर्धारण ( Positioning )
- स्थिति: किसी तत्व की स्थिति निर्धारण विधि (सापेक्ष, निरपेक्ष, स्थिर, स्थैतिक) निर्दिष्ट करती है।
फ्लेक्सबॉक्स और ग्रिड ( Flexbox and Grid )
- डिस्प्ले: फ्लेक्स और डिस्प्ले: ग्रिड: लचीला बॉक्स या ग्रिड लेआउट सक्षम करता है।
विभिन्न गुण जैसे औचित्य-सामग्री, संरेखित-आइटम, ग्रिड-टेम्पलेट-कॉलम इत्यादि।
परिवर्तन ( Transformation )
- परिवर्तन: किसी तत्व पर 2डी या 3डी परिवर्तन लागू करता है (उदाहरण के लिए, अनुवाद करना, घुमाना, स्केल करना)।
संक्रमण और एनिमेशन ( Transitions and Animations )
- ट्रांज़िशन: संपत्ति परिवर्तनों में सहज ट्रांज़िशन जोड़ता है।
- एनीमेशन: तत्वों के लिए कीफ़्रेम एनिमेशन को परिभाषित करता है।
ये उपलब्ध अनेक सीएसएस संपत्तियों के कुछ उदाहरण मात्र हैं। सीएसएस की बहुमुखी प्रतिभा डेवलपर्स को वेब पेजों में HTML तत्वों की दृश्य प्रस्तुति को सटीक रूप से नियंत्रित करने की अनुमति देती है।
2. Text properties
सीएसएस में टेक्स्ट गुण डेवलपर्स को टेक्स्ट स्टाइलिंग के विभिन्न पहलुओं को नियंत्रित करने की अनुमति देते हैं। यहां आमतौर पर उपयोग किए जाने वाले टेक्स्ट गुणों का अवलोकन दिया गया है:
रंग ( color )
पाठ का रंग परिभाषित करता है.
p {
color: #333;
}
font-family:Specifies the font for the text.
body {
font-family: "Helvetica", sans-serif;
}
फ़ॉन्ट आकार: font-size:
टेक्स्ट का आकार सेट करता है.
h1 {
font-size: 24px;
}
फ़ॉन्ट वजन ( font-weight )
पाठ की मोटाई निर्धारित करता है.
strong {
font-weight: bold;
}
ऊंची लाईन:line-height: पाठ की एक पंक्ति की ऊँचाई को नियंत्रित करता है।
p {
line-height: 1.5;
}
पाठ संरेखित:text-align:
टेक्स्ट को उसके कंटेनर के भीतर संरेखित करता है।
div {
text-align: center;
}
पाठ-सजावट text-decoration:
टेक्स्ट में सजावट जोड़ता है (जैसे, अंडरलाइन, ओवरलाइन, लाइन-थ्रू)।
a {
text-decoration: none; /* removes underline from links */
}
पाठ-परिवर्तन: text-transform:
पाठ के बड़े अक्षरों को नियंत्रित करता है.
p {
text-transform: uppercase;
}
पत्र अंतराल: letter-spacing:
वर्णों के बीच अंतर को समायोजित करता है.
h2 { letter-spacing: 2px; }
शब्द-अंतर: शब्दों के बीच अंतर को समायोजित करता है.
p {
word-spacing: 5px;
}
ये टेक्स्ट गुण वेबपेज पर टेक्स्ट की उपस्थिति पर सूक्ष्म नियंत्रण प्रदान करते हैं, जिससे डेवलपर्स को दृश्य रूप से आकर्षक और पढ़ने योग्य सामग्री बनाने की अनुमति मिलती है। डिज़ाइन आवश्यकताओं के आधार पर, वांछित टाइपोग्राफ़िक प्रभाव प्राप्त करने के लिए इन गुणों को समायोजित किया जा सकता है।
( i ) Font size
CSS में फ़ॉन्ट का आकार फ़ॉन्ट-आकार प्रॉपर्टी का उपयोग करके सेट किया जाता है। यह किसी तत्व के भीतर पाठ का आकार निर्धारित करता है।
यहाँ एक उदाहरण है:
body {
font-size: 16px;
}
h1 {
font-size: 24px;
}
p {
font-size: 14px;
}
इस उदाहरण में, संपूर्ण दस्तावेज़ के लिए आधार फ़ॉन्ट आकार 16px पर सेट है। एच1 और पी जैसे विशिष्ट तत्वों के अपने स्वयं के फ़ॉन्ट आकार होते हैं, जो अनुकूलित पाठ उपस्थिति की अनुमति देते हैं। डिज़ाइन आवश्यकताओं के आधार पर फ़ॉन्ट आकार को परिभाषित करने के लिए डेवलपर्स विभिन्न इकाइयों (जैसे, पिक्सेल, ईएम, रेम) का उपयोग कर सकते हैं।
( ii ) Color
CSS color को रंग गुण द्वारा नियंत्रित किया जाता है, जो किसी तत्व के भीतर पाठ का रंग निर्धारित करता है। यह विभिन्न रंग प्रस्तुतियों जैसे नामित रंग, हेक्साडेसिमल मान, आरजीबी और एचएसएल को स्वीकार करता है।
यहाँ एक उदाहरण है:
body {
color: #333; /* Hexadecimal color */
}
h1 {
color: blue; /* Named color */
}
p {
color: rgb(255, 0, 0); /* RGB color */
}
इस उदाहरण में, रंग गुण मुख्य भाग, h1 और p तत्वों के लिए पाठ का रंग निर्धारित करता है। दिखने में आकर्षक वेब पेज बनाने के लिए सीएसएस द्वारा प्रदान किए गए लचीलेपन का उपयोग करते हुए, डेवलपर्स अपनी पसंद या डिज़ाइन आवश्यकताओं के आधार पर रंग चुन सकते हैं।
( iii ) Alignment
सीएसएस में संरेखण को टेक्स्ट-एलाइन प्रॉपर्टी का उपयोग करके प्रबंधित किया जाता है, जो किसी तत्व के भीतर टेक्स्ट के क्षैतिज संरेखण को निर्धारित करता है।
यहाँ एक उदाहरण है:
h1 {
text-align: center;
}
p {
text-align: justify;
}
div {
text-align: right;
}
इस उदाहरण में, टेक्स्ट-एलाइन गुण विभिन्न तत्वों पर लागू होता है। h1 टेक्स्ट केन्द्रित है, p टेक्स्ट उचित है, और div में टेक्स्ट दाईं ओर संरेखित है। यह प्रॉपर्टी वेबपेज पर विभिन्न तत्वों के भीतर टेक्स्ट के लेआउट और उपस्थिति को नियंत्रित करने में लचीलापन प्रदान करती है।
3. Box model properties
सीएसएस में बॉक्स मॉडल में कई गुण होते हैं जो किसी तत्व के आयाम और रिक्ति को परिभाषित करते हैं।
यहां मुख्य बॉक्स मॉडल गुण हैं:
चौड़ाई और ऊंचाई:
सामग्री बॉक्स की चौड़ाई और ऊंचाई निर्धारित करता है।
div {
width: 200px;
height: 150px;
}
अंतर: Margin किसी तत्व के बाहर का स्थान निर्दिष्ट करता है।
p {
margin: 10px;
}
गद्दी: padding
किसी तत्व की सामग्री और उसकी सीमा के बीच के स्थान को परिभाषित करता है।
article {
padding: 20px;
}
सीमा: border
किसी तत्व की सीमा के गुण सेट करता है।
img {
border: 2px solid #ccc;
}
बॉक्स-आकार: box-sizing:
यह निर्धारित करता है कि किसी तत्व की कुल चौड़ाई और ऊंचाई की गणना कैसे की जाती है।
div {
box-sizing: border-box;
}
ये गुण सामूहिक रूप से किसी वेबपेज पर तत्वों के लेआउट और रिक्ति को नियंत्रित करते हैं। सीएसएस में अच्छी तरह से डिजाइन और उत्तरदायी लेआउट बनाने के लिए बॉक्स मॉडल को समझना और उसमें हेरफेर करना आवश्यक है।
( i ) Margin
सीएसएस में, मार्जिन प्रॉपर्टी का उपयोग किसी तत्व के बाहर की जगह को नियंत्रित करने के लिए किया जाता है। यह तत्व की सीमा और आसन्न तत्वों या कंटेनर के बीच के अंतर को परिभाषित करता है। मार्जिन प्रॉपर्टी में अलग-अलग मार्जिन निर्दिष्ट करने या उन सभी को एक साथ सेट करने के लिए अलग-अलग मान हो सकते हैं।
यहाँ एक उदाहरण है:
p {
margin-top: 10px; /* Top margin */
margin-right: 20px; /* Right margin */
margin-bottom: 10px; /* Bottom margin */
margin-left: 20px; /* Left margin */
}
Alternatively, you can use shorthand to set all margins at once:
div {
margin: 10px 20px; /* top/bottom 10px, left/right 20px */
}
आप अपनी डिज़ाइन आवश्यकताओं के आधार पर मार्जिन मानों को परिभाषित करने के लिए विभिन्न इकाइयों (पिक्सेल, ईएम, रेम) और प्रतिशत का उपयोग कर सकते हैं। मार्जिन प्रॉपर्टी सीएसएस में स्पेसिंग और लेआउट बनाने में महत्वपूर्ण भूमिका निभाती है।
( ii ) Padding
सीएसएस में, पैडिंग प्रॉपर्टी का उपयोग किसी तत्व की सामग्री और उसकी सीमा के बीच के स्थान को नियंत्रित करने के लिए किया जाता है। यह किसी तत्व के भीतर आंतरिक अंतर को परिभाषित करता है। पैडिंग प्रॉपर्टी में अलग-अलग पैडिंग निर्दिष्ट करने या उन सभी को एक साथ सेट करने के लिए अलग-अलग मान हो सकते हैं।
यहाँ एक उदाहरण है:
div {
padding-top: 10px; /* Top padding */
padding-right: 20px; /* Right padding */
padding-bottom: 10px; /* Bottom padding */
padding-left: 20px; /* Left padding */
}
Alternatively, you can use shorthand to set all paddings at once:
p {
padding: 10px 20px; /* top/bottom 10px, left/right 20px */
}
मार्जिन के समान, आप अपनी डिज़ाइन आवश्यकताओं के आधार पर पैडिंग मानों को परिभाषित करने के लिए विभिन्न इकाइयों (पिक्सेल, ईएम, रेम) और प्रतिशत का उपयोग कर सकते हैं। CSS में तत्वों की आंतरिक रिक्ति और लेआउट बनाने के लिए पैडिंग प्रॉपर्टी महत्वपूर्ण है।
( iii ) Border
सीएसएस में, बॉर्डर प्रॉपर्टी का उपयोग किसी तत्व के बॉर्डर की शैली, चौड़ाई और रंग को परिभाषित करने के लिए किया जाता है। यह डेवलपर्स को उनके दृश्य स्वरूप को बढ़ाने के लिए HTML तत्वों के चारों ओर बॉर्डर जोड़ने की अनुमति देता है। सीमा संपत्ति को तीन मुख्य घटकों में विभाजित किया जा सकता है: सीमा-चौड़ाई, सीमा-शैली, और सीमा-रंग।
यहाँ एक उदाहरण है:
div {
border-width: 2px; /* Border width */
border-style: solid; /* Border style (solid, dashed, dotted, etc.) */
border-color: #333; /* Border color */
}
Alternatively, you can use shorthand to set all border properties at once:
p {
border: 1px dashed #ccc; /* Width, style, and color combined */
}
यह उदाहरण div तत्व के चारों ओर 2-पिक्सेल ठोस काला बॉर्डर और एपी तत्व के चारों ओर हल्के भूरे रंग के साथ 1-पिक्सेल धराशायी बॉर्डर सेट करता है। किसी वेबपेज पर तत्वों के लिए अच्छी तरह से परिभाषित दृश्य सीमाएं बनाने के लिए सीमा संपत्ति आवश्यक है।
( iv ) Width and height
सीएसएस में, किसी तत्व के आयामों को परिभाषित करने के लिए चौड़ाई और ऊंचाई गुणों का उपयोग किया जाता है। वे क्रमशः तत्व के सामग्री बॉक्स का क्षैतिज और ऊर्ध्वाधर आकार निर्धारित करते हैं।
यहाँ एक उदाहरण है:
div {
width: 200px; /* Width of the element */
height: 150px; /* Height of the element */
}
ये गुण किसी वेबपेज पर तत्वों के आकार को नियंत्रित करने के लिए आवश्यक हैं। आप अपनी डिज़ाइन आवश्यकताओं के आधार पर आयाम निर्दिष्ट करने के लिए विभिन्न इकाइयों (पिक्सेल, ईएम, रेम, प्रतिशत) का उपयोग कर सकते हैं। सीएसएस में अच्छी तरह से संरचित और उत्तरदायी लेआउट बनाने में चौड़ाई और ऊंचाई गुण महत्वपूर्ण भूमिका निभाते हैं।
CSS Layouts
Introduction to Different Layout Types
1. Fixed layout
वेब डिज़ाइन में एक निश्चित लेआउट एक ऐसे लेआउट को संदर्भित करता है जहां वेब पेज या तत्वों का आकार सेट किया जाता है और उपयोगकर्ता के स्क्रीन आकार या डिवाइस के आधार पर नहीं बदलता है। सामग्री अपनी स्थिति में स्थिर रहती है, और उपयोगकर्ताओं को संपूर्ण पृष्ठ देखने के लिए स्क्रॉल करने की आवश्यकता हो सकती है। निश्चित लेआउट अक्सर पिक्सेल जैसी निश्चित इकाइयों का उपयोग करके निर्दिष्ट किए जाते हैं।
यहां एक उदाहरण दिया गया है कि आप एक निश्चित लेआउट कैसे बना सकते हैं:
body {
width: 960px; /* Fixed width for the entire page */
margin: 0 auto; /* Center the page within the viewport */
}
header, nav, main, aside, footer {
width: 100%; /* Elements take the full width of the container */
}
इस उदाहरण में, वेबपेज की कुल चौड़ाई 960 पिक्सेल पर सेट है, और अलग-अलग अनुभाग (हेडर, नेव, मेन, साइड, फ़ुटर) कंटेनर की पूरी चौड़ाई लेते हैं। निश्चित लेआउट दृष्टिकोण डिज़ाइन पर सटीक नियंत्रण प्रदान करता है, लेकिन यह विभिन्न स्क्रीन आकारों के लिए अच्छी तरह से अनुकूल नहीं हो सकता है, जिससे संभावित रूप से छोटे उपकरणों पर कम प्रतिक्रियाशील उपयोगकर्ता अनुभव हो सकता है।
2. Fluid layout
वेब डिज़ाइन में एक तरल लेआउट एक प्रतिक्रियाशील लेआउट को संदर्भित करता है जो विभिन्न स्क्रीन आकारों और उपकरणों के अनुकूल होता है। निश्चित लेआउट के विपरीत, द्रव लेआउट चौड़ाई के लिए प्रतिशत जैसी सापेक्ष इकाइयों का उपयोग करते हैं, जिससे सामग्री को उपयोगकर्ता के स्क्रीन आकार के आधार पर विस्तार या अनुबंध करने की अनुमति मिलती है। अधिक अनुकूलनीय और उपयोगकर्ता-अनुकूल अनुभव बनाने के लिए यह दृष्टिकोण अक्सर उत्तरदायी वेब डिज़ाइन से जुड़ा होता है।
यहां एक उदाहरण दिया गया है कि आप एक तरल लेआउट कैसे बना सकते हैं:
body {
width: 80%; /* Set the overall width of the page as a percentage */
margin: 0 auto; /* Center the page within the viewport */
}
header, nav, main, aside, footer {
width: 100%; /* Elements take the full width of the container */
}
@media screen and (max-width: 600px) {
body {
width: 100%; /* Adjust layout for smaller screens */
}
}
इस उदाहरण में, वेबपेज की कुल चौड़ाई व्यूपोर्ट की चौड़ाई के 80% पर सेट है। अलग-अलग अनुभाग अपने कंटेनर की पूरी चौड़ाई लेते हैं। इसके अतिरिक्त, 600 पिक्सेल की अधिकतम चौड़ाई वाली स्क्रीन के लेआउट को समायोजित करने के लिए एक मीडिया क्वेरी का उपयोग किया जाता है, जो इसे छोटे उपकरणों के लिए अधिक उपयुक्त बनाता है।
फ़्लुइड लेआउट उपकरणों और स्क्रीन आकारों की एक विस्तृत श्रृंखला को समायोजित करते हुए अधिक प्रतिक्रियाशील और उपयोगकर्ता-अनुकूल डिज़ाइन में योगदान करते हैं।
3. Responsive layout
वेब डिज़ाइन में एक रिस्पॉन्सिव लेआउट एक डिज़ाइन दृष्टिकोण को संदर्भित करता है जो यह सुनिश्चित करता है कि वेबसाइट की संरचना और सामग्री विभिन्न स्क्रीन आकारों और उपकरणों के लिए सहजता से अनुकूल हो। लक्ष्य डेस्कटॉप, टैबलेट और स्मार्टफ़ोन पर इष्टतम उपयोगकर्ता अनुभव प्रदान करना है। रिस्पॉन्सिव डिज़ाइन में आम तौर पर लचीले ग्रिड लेआउट, मीडिया क्वेरीज़ और तरल छवियों के संयोजन का उपयोग करना शामिल होता है।
यहां CSS का उपयोग करके प्रतिक्रियाशील लेआउट का एक मूल उदाहरण दिया गया है:
body {
font-size: 16px;
line-height: 1.6;
}
@media screen and (max-width: 768px) {
body {
font-size: 14px; /* Adjust font size for smaller screens */
}
}
इस उदाहरण में, स्क्रीन की चौड़ाई 768 पिक्सेल या उससे कम होने पर फ़ॉन्ट आकार को कम करने के लिए मीडिया क्वेरी का उपयोग किया जाता है। यह प्रतिक्रियाशील डिज़ाइन का केवल एक पहलू है; आम तौर पर, इसमें लेआउट में अधिक जटिल समायोजन शामिल होते हैं, जैसे ग्रिड सिस्टम को अनुकूलित करना, नेविगेशन मेनू को संशोधित करना और उपयोगकर्ता के डिवाइस के आधार पर छवियों का आकार बदलना।
उत्तरदायी लेआउट उपकरणों की एक विस्तृत श्रृंखला में एक सुसंगत और उपयोगकर्ता के अनुकूल अनुभव प्रदान करने में महत्वपूर्ण भूमिका निभाते हैं, जिससे बेहतर पहुंच और उपयोगकर्ता संतुष्टि में योगदान होता है।
How to create a basic layout using CSS
सीएसएस का उपयोग करके एक बुनियादी लेआउट बनाने में आपके HTML दस्तावेज़ में प्रमुख तत्वों की संरचना और स्टाइल को परिभाषित करना शामिल है। यहां दो-स्तंभ लेआउट का एक सरल
उदाहरण दिया गया है:
HTML Structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Basic CSS Layout</title>
</head>
<body>
<header>
<h1>My Website</h1>
</header>
<div class="container">
<main>
<section>
<h2>Main Content</h2>
<p>This is the main content of the website.</p>
</section>
</main>
<aside>
<h2>Sidebar</h2>
<p>Additional information goes here.</p>
</aside>
</div>
<footer>
<p>© 2024 My Website</p>
</footer>
</body>
</html>
CSS Styling (styles.css):
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header, footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px;
}
.container {
display: flex;
}
main {
flex: 2;
padding: 20px;
}
aside {
flex: 1;
background-color: #eee;
padding: 20px;
}
footer {
margin-top: 20px;
}
यह उदाहरण हेडर, मुख्य सामग्री क्षेत्र, साइडबार और पाद लेख के साथ एक सरल वेबपेज बनाता है। लेआउट दो-कॉलम डिज़ाइन बनाने के लिए फ्लेक्सबॉक्स का उपयोग करता है, जहां मुख्य सामग्री चौड़ाई का दो-तिहाई हिस्सा लेती है, और साइडबार एक तिहाई लेता है। Styles.css फ़ाइल पृष्ठभूमि रंग, फ़ॉन्ट शैली और पैडिंग सहित बुनियादी स्टाइल प्रदान करती है।
अपनी विशिष्ट डिज़ाइन आवश्यकताओं के अनुरूप इस उदाहरण को बेझिझक संशोधित करें। जैसे-जैसे आपका प्रोजेक्ट बढ़ता है, आप विभिन्न स्क्रीन आकारों में अधिक अनुकूलनीय लेआउट के लिए उत्तरदायी डिज़ाइन सिद्धांतों को शामिल करने पर विचार कर सकते हैं।
Advanced CSS Features
1. Transitions and Animations
सीएसएस में बदलाव और एनिमेशन डेवलपर्स को तत्वों में गतिशील और दृश्यमान आकर्षक प्रभाव जोड़ने की अनुमति देते हैं।
यहां दोनों अवधारणाओं का अवलोकन दिया गया है:
सीएसएस परिवर्तन: CSS Transitions
सीएसएस संक्रमण एक निर्दिष्ट अवधि में संपत्ति मूल्यों के बीच सुचारू बदलाव को सक्षम बनाता है। वे तत्व की स्थिति में परिवर्तन, जैसे होवर या फ़ोकस, से ट्रिगर होते हैं।
button {
background-color: #3498db;
color: white;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #2980b9;
}
इस उदाहरण में, जब उपयोगकर्ता किसी बटन पर होवर करता है तो उसका पृष्ठभूमि रंग आसानी से परिवर्तित हो जाता है। ट्रांज़िशन प्रॉपर्टी का उपयोग यह परिभाषित करने के लिए किया जाता है कि कौन सी प्रॉपर्टी ट्रांज़िशन करेगी, अवधि (0.3s), और टाइमिंग फ़ंक्शन (सहजता)।
CSS Animations:
सीएसएस एनिमेशन कीफ़्रेम को परिभाषित करके अधिक जटिल और निरंतर एनिमेशन की अनुमति देते हैं। कीफ़्रेम एनीमेशन में विभिन्न बिंदुओं पर शैलियों को निर्दिष्ट करते हैं।
उदाहरण:
@keyframes slideIn {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
.slide-in-animation {
animation: slideIn 1s ease;
}
इस उदाहरण में, स्लाइडइन एनीमेशन एक तत्व को क्षैतिज रूप से बाएं से दाएं अनुवादित करता है। @keyframes नियम एनीमेशन के कीफ़्रेम को परिभाषित करता है, और .slide-in-animation वर्ग एनीमेशन को 1-सेकंड की अवधि और एक सहज फ़ंक्शन के साथ एक तत्व पर लागू करता है।
ट्रांज़िशन और एनिमेशन दोनों ही आकर्षक और इंटरैक्टिव वेब अनुभव बनाने में योगदान करते हैं। डेवलपर्स इन प्रभावों को अपने वेब अनुप्रयोगों की डिज़ाइन और उपयोगकर्ता इंटरैक्शन आवश्यकताओं से मेल खाने के लिए तैयार कर सकते हैं।
2. Flexbox and Grid
फ्लेक्सबॉक्स, या फ्लेक्सिबल बॉक्स लेआउट, पंक्तियों या स्तंभों में एक-आयामी लेआउट के लिए डिज़ाइन किया गया है। यह एक कंटेनर के भीतर स्थान के वितरण को सक्षम बनाता है, जिससे उत्तरदायी और गतिशील लेआउट डिजाइन करना आसान हो जाता है।
उदाहरण:
.container {
display: flex;
justify-content: space-between;
}
.item {
flex: 1;
margin: 10px;
}
इस उदाहरण में, डिस्प्ले: फ्लेक्स का उपयोग करके कंटेनर को फ्लेक्स कंटेनर के रूप में सेट किया गया है। जस्टिफ़ाई-कंटेंट: स्पेस-बीच प्रॉपर्टी मुख्य अक्ष के साथ वस्तुओं को वितरित करती है, उनके बीच जगह बनाती है। कंटेनर के अंदर प्रत्येक आइटम में फ्लेक्स: 1 होता है, जिससे वे बढ़ते हैं और समान स्थान लेते हैं।
Grid:
सीएसएस ग्रिड लेआउट एक द्वि-आयामी प्रणाली है जो आपको पंक्तियों और स्तंभों के साथ ग्रिड-आधारित लेआउट बनाने की अनुमति देती है। यह ग्रिड के भीतर वस्तुओं के स्थान और आकार पर सटीक नियंत्रण प्रदान करता है।
उदाहरण:
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}
.item {
background-color: #3498db;
color: white;
padding: 20px;
}
इस उदाहरण में, कंटेनर को डिस्प्ले: ग्रिड का उपयोग करके ग्रिड कंटेनर के रूप में सेट किया गया है। ग्रिड-टेम्पलेट-कॉलम संपत्ति तीन समान-चौड़ाई वाले कॉलम को परिभाषित करती है। ग्रिड-गैप प्रॉपर्टी ग्रिड आइटमों के बीच 10px का अंतर जोड़ती है।
परिष्कृत और उत्तरदायी लेआउट बनाने के लिए फ्लेक्सबॉक्स और ग्रिड दोनों का व्यापक रूप से वेब विकास में उपयोग किया जाता है, अक्सर संयोजन में। फ्लेक्सबॉक्स एक-आयामी लेआउट के लिए अधिक उपयुक्त है, जबकि ग्रिड पंक्तियों और स्तंभों दोनों पर सटीक नियंत्रण के साथ दो-आयामी लेआउट को प्रबंधित करने में उत्कृष्ट है।
3. CSS variables
सीएसएस वैरिएबल, जिन्हें कस्टम गुणों के रूप में भी जाना जाता है, आपको सीएसएस में पुन: प्रयोज्य मानों को परिभाषित करने की अनुमति देते हैं जिनका उपयोग आपकी स्टाइलशीट में किया जा सकता है। वे मूल्यों को संग्रहीत करने और पुन: उपयोग करने का एक तरीका प्रदान करते हैं, जिससे किसी वेबसाइट पर स्थिरता बनाए रखना और शैलियों को अपडेट करना आसान हो जाता है।
Declaration of CSS Variables:
:root {
--primary-color: #3498db;
--secondary-color: #2ecc71;
--font-size: 16px;
}
body {
font-size: var(--font-size);
color: var(--primary-color);
}
.header {
background-color: var(--secondary-color);
}
इस उदाहरण में, :root का उपयोग वैश्विक CSS वेरिएबल घोषित करने के लिए किया जाता है। इन वेरिएबल्स (--प्राथमिक-रंग, --माध्यमिक-रंग, --फ़ॉन्ट-आकार) को var() फ़ंक्शन का उपयोग करके पूरे स्टाइलशीट में उपयोग किया जा सकता है। यह एकरूपता को बढ़ावा देता है और वैरिएबल मानों को बदलकर विश्व स्तर पर शैलियों को अपडेट करना आसान बनाता है।
Dynamic Usage:
:root {
--base-color: red;
}
body {
background-color: var(--base-color);
}
.dark-mode body {
background-color: black;
}
सीएसएस वेरिएबल गतिशील परिवर्तनों की भी अनुमति देते हैं। इस उदाहरण में, --बेस-रंग वेरिएबल का उपयोग शरीर के पृष्ठभूमि रंग के लिए किया जाता है। बॉडी पर डार्क-मोड क्लास लागू करके, आप पृष्ठभूमि के रंग को गतिशील रूप से काले में बदल सकते हैं।
सीएसएस वैरिएबल आपके वेब प्रोजेक्ट्स में अधिक रखरखाव योग्य और गतिशील शैलियाँ बनाने के लिए एक शक्तिशाली उपकरण प्रदान करते हैं। वे पुन: प्रयोज्यता को बढ़ाते हैं और वैश्विक स्तर पर शैलियों को अपनाना आसान बनाते हैं।
4. Media Queries for Responsiveness
सीएसएस में मीडिया क्वेरीज़ का उपयोग उपयोगकर्ता के डिवाइस की विशेषताओं, जैसे स्क्रीन की चौड़ाई, ऊंचाई या ओरिएंटेशन के आधार पर विभिन्न शैलियों को लागू करने के लिए किया जाता है। मीडिया क्वेरीज़ विभिन्न उपकरणों और स्क्रीन आकारों के अनुकूल प्रतिक्रियाशील डिज़ाइन बनाने में महत्वपूर्ण भूमिका निभाती हैं।
Basic Media Query:
/* Default styles for all devices */
body {
font-size: 16px;
}
/* Media query for screens with a maximum width of 600px */
@media screen and (max-width: 600px) {
body {
font-size: 14px;
}
}
इस उदाहरण में, मुख्य भाग के लिए डिफ़ॉल्ट फ़ॉन्ट आकार 16px पर सेट है। जब स्क्रीन की चौड़ाई 600 पिक्सेल या उससे कम होती है, तो फ़ॉन्ट का आकार 14px पर समायोजित किया जाता है। छोटी स्क्रीन के लिए शैलियों को अधिक उपयुक्त बनाने का यह एक सरल तरीका है।
Responsive Breakpoints:
/* Default styles for all devices */
body {
font-size: 16px;
}
/* Media query for screens with a maximum width of 600px */
@media screen and (max-width: 600px) {
body {
font-size: 14px;
}
}
/* Media query for screens with a minimum width of 1200px */
@media screen and (min-width: 1200px) {
body {
font-size: 18px;
}
}
इस उदाहरण में, स्क्रीन की चौड़ाई के आधार पर तीन अलग-अलग फ़ॉन्ट आकार निर्धारित किए गए हैं। डिफ़ॉल्ट शैलियाँ सभी उपकरणों के लिए लागू होती हैं, और 600 पिक्सेल से कम चौड़ी स्क्रीन और 1200 पिक्सेल से अधिक चौड़ी स्क्रीन के लिए विशिष्ट समायोजन किए जाते हैं।
मीडिया क्वेरीज़ उत्तरदायी वेब डिज़ाइन के लिए आधार प्रदान करती हैं, जिससे डेवलपर्स को ऐसे लेआउट और शैलियाँ बनाने की अनुमति मिलती है जो उपकरणों और स्क्रीन आकारों की एक विस्तृत श्रृंखला को पूरा करते हैं।
0 टिप्पणियाँ