CSS इंस्टेंस
- पिछला पृष्ठ CSS ग्रिड एलिमेंट
- अगला पृष्ठ CSS टेस्ट
सीएसएस चयनक
सीएसएस उपयोग
सीएसएस पृष्ठभूमि
सीएसएस बॉर्डर
- चार किनारा अटिबाधा की चौड़ाई सेट करें
- ऊपर किनारा अटिबाधा की चौड़ाई सेट करें
- नीचे किनारा अटिबाधा की चौड़ाई सेट करें
- बाईं किनारा अटिबाधा की चौड़ाई सेट करें
- दायाँ किनारा अटिबाधा की चौड़ाई सेट करें
- चार किनारा अटिबाधा का शैली सेट करें
- ऊपर किनारा अटिबाधा का शैली सेट करें
- नीचे किनारा अटिबाधा का शैली सेट करें
- बाईं किनारा अटिबाधा का शैली सेट करें
- दायाँ किनारा अटिबाधा का शैली सेट करें
- चार किनारा अटिबाधा का रंग सेट करें
- ऊपर किनारा अटिबाधा का रंग सेट करें
- नीचे किनारा अटिबाधा का रंग सेट करें
- बाईं किनारा अटिबाधा का रंग सेट करें
- दायाँ किनारा अटिबाधा का रंग सेट करें
- सभी किनारा अटिबाधा एक ही व्यक्तव्य में
- एलिमेंट को गोलाकार किनारा जोड़ें
- हर किनारे के लिए अलग किनारा अटिबाधा सेट करें
- सभी ऊपर किनारा अटिबाधा एक ही व्यक्तव्य में
- सभी नीचे किनारा अटिबाधा एक ही व्यक्तव्य में
- सभी बाईं किनारा अटिबाधा एक ही व्यक्तव्य में
- सभी दायाँ किनारा अटिबाधा एक ही व्यक्तव्य में
सीएसएस माउंट
- एलिमेंट के हर ओर के लिए अलग मार्ग प्रभाव सेट करें
- चार मानों के साथ लघु मार्ग प्रभाव का उपयोग करें
- तीन मानों के साथ लघु मार्ग प्रभाव का उपयोग करें
- दो मानों के साथ लघु मार्ग प्रभाव का उपयोग करें
- एक मान के साथ लघु मार्ग प्रभाव का उपयोग करें
- अपने कंटेनर के भीतर के एलिमेंट को केंद्रित करने के लिए मार्ग को auto सेट करें
- बाईं मार्ग को पिता एलिमेंट से विरासत करें
- मार्ग समीक्षा
सीएसएस पैडिंग
- एलिमेंट के हर ओर के लिए अलग पैडिंग सेट करें
- चार मानों के साथ लघु पैडिंग का उपयोग करें
- तीन मानों के साथ लघु पैडिंग का उपयोग करें
- दो मानों के साथ लघु पैडिंग का उपयोग करें
- एक मान के साथ लघु पैडिंग का उपयोग करें
- पैडिंग और एलिमेंट चौड़ाई (box-sizing नहीं सेट करें)
- पैडिंग और एलिमेंट चौड़ाई (box-sizing सेट करें)
- एलिमेंट की बाईं पैडिंग सेट करें
- एलिमेंट की दायाँ पैडिंग सेट करें
- एलिमेंट की ऊपर पैडिंग सेट करें
- एलिमेंट की नीचे पैडिंग सेट करें
CSS ऊंचाई/चौड़ाई
सीएसएस कंटूर
सीएसएस पाठ
- विभिन्न एलिमेंट के पाठ रंग सेट करें
- पाठ को जोड़ें
- लिंक के नीचे रेखा को मिटाएं
- पाठ को सज्जित करें
- पाठ के अक्षरों के आकार को नियंत्रित करें
- पाठ को इंडेंट करें
- अक्षर अंतराल सेट करें
- रेखागात्र सेट करें
- एलिमेंट के पाठ दिशा सेट करें
- फ़ोंट अंतराल बढ़ाएं
- एलिमेंट के पाठ शैडो सेट करें
- एलिमेंट के भीतर पाठ के विन्यास को अस्वीकार करें
- पाठ के भीतर इमेज को उभरा कर स्थापित करें
सीएसएस फ़ॉन्ट
सीएसएस लिंक
सीएसएस सूची
सीएसएस तालिका
- table, th और td एलिमेंट के काले बॉर्डर निर्धारित करें
- border-collapse का उपयोग करें
- तालिका के एकल किनारा का बॉर्डर
- तालिका का चौड़ाई और ऊंचाई निर्धारित करें
- सामग्री के अनुसार स्थानन (text-align)
- सामग्री की अधिकतर आधार पर स्थानन (vertical-align)
- th और td एलिमेंट की आंतरिक घाटी सेट करें
- होरिजन्टल सेपरेटर
- हॉवर करने वाली तालिका
- बार तालिका
- तालिका की किनारा रंग निर्धारित करें
- तालिका शीर्षक की स्थिति सेट करें
- रिस्पांसिव तालिका
- सुंदर तालिका बनाने के तरीके
CSS दिखावा
CSS स्थानन
- ब्राउज़र विंडो के अनुसार एलिमेंट को स्थापित करें
- एलिमेंट के सामान्य स्थान के अनुसार एलिमेंट को स्थापित करें
- एलिमेंट को अभिकल्पित स्थान पर स्थापित करें
- स्टिकी स्थानन
- अधिकार्य एलिमेंटों को ओवरलैप करें
- एलिमेंट के आकार सेट करें
- इमेज की ऊपरी किनारा पिक्सल मानों से सेट करें
- इमेज की निचली किनारा पिक्सल मानों से सेट करें
- इमेज के बाएँ किनारे को पिक्सल मान सेट करें
- इमेज के दाएँ किनारे को पिक्सल मान सेट करें
- चित्र पाठ को स्थानीयकरण करें (बाएँ ऊपर)
- चित्र पाठ को स्थानीयकरण करें (दाएँ ऊपर)
- चित्र पाठ को स्थानीयकरण करें (बाएँ नीचे)
- चित्र पाठ को स्थानीयकरण करें (दाएँ नीचे)
- चित्र पाठ को स्थानीयकरण करें (केंद्रीकृत)
CSS ओवरफ्लॉट
- overflow: visible - ओवरफ्लॉट नहीं किया गया, इसे एलीमेंट बॉक्स के बाहर रेंडर किया जाता है
- overflow: hidden - ओवरफ्लॉट किया गया है, अन्य सामग्री छुपाई गई है
- overflow: scroll - ओवरफ्लॉट किया गया है, लेकिन स्क्रॉल बार जोड़ा गया है
- overflow: auto - यदि ओवरफ्लॉट किया गया है, तो अन्य सामग्री देखने के लिए स्क्रॉल बार जोड़ें
- overflow-x और overflow-y का इस्तेमाल करें
CSS फ्लोट
- float गुण का सरल इस्तेमाल
- किनारा और बाह्य अंतराल वाले चित्र को पैराग्राफ के दाएँ फ्लोट करें
- शीर्षक वाले चित्र को दाएँ फ्लोट करें
- पैराग्राफ के पहले अक्षर को बाएँ फ्लोट करें
- फ्लोट को बंद करें (clear गुण का इस्तेमाल करें)
- फ्लोट को बंद करें (clearfix hack का इस्तेमाल करें)
- फ्लोटिंग बॉक्स बनाएं
- बद्ध चित्र बनाएं
- समान ऊंचाई के बॉक्स (फ्लैक्सबॉक्स के द्वारा) बनाएं
- स्तरीय मेनू बनाएं
- web ब्राउज़र विन्यास इस्तेमाल करें
CSS inline-block
CSS समानता एलीमेंट
- बाह्य अंतराल के द्वारा केंद्रीकरण
- पाठ को केंद्रीकृत करें
- चित्र को केंद्रीकृत करें
- position के द्वारा बाएँ/दाएँ समानता
- position के द्वारा बाएँ/दाएँ समानता - पारस्परिक ब्राउज़र योजना
- float के द्वारा बाएँ/दाएँ समानता
- float के द्वारा बाएँ/दाएँ समानता - पारस्परिक ब्राउज़र योजना
- padding के द्वारा अनुरूपता केंद्रीकरण
- अनुरूपता और अनुक्रमणिका केंद्रीकरण
- line-height के द्वारा अनुरूपता केंद्रीकरण
- position के द्वारा अनुरूपता और अनुक्रमणिका केंद्रीकरण
CSS कंबाइनर
सीएसएस परोबोलिक
सीएसएस परोबोलिक एलिमेंट
CSS सामग्री उत्पादन
सीएसएस अपारदर्शीता
सीएसएस नेविगेशन बार
CSS ड्रॉपडाउन सूची
सीएसएस इमेज स्पाइन
सीएसएस एट्रिब्यूट चयनक
- target एट्रिब्यूट वाले सभी <a> एलीमेंटों को चुनें
- target="_blank" एट्रिब्यूट वाले सभी <a> एलीमेंटों को चुनें
- title एट्रिब्यूट के अधीन शब्दों की सूची में "flower" शब्द होने वाले सभी एलीमेंटों को चुनें
- जिसके class एट्रिब्यूट का शुरू "top" से है सभी एलीमेंटों को चुनें (पूरा शब्द होना चाहिए)
- जिसके class एट्रिब्यूट का शुरू "top" से है सभी एलीमेंटों को चुनें (विशेष रूप से पूरा शब्द नहीं होना चाहिए)
- जिसके class एट्रिब्यूट का अंत "test" से लेना है सभी एलीमेंटों को चुनें
- जिसके class एट्रिब्यूट का मालमत्स्य "te" है सभी एलीमेंटों को चुनें
सीएसएस फॉर्म
- पूर्ण चौड़ाई वाला इनपुट फील्ड
- फिल्लिंग वाला इनपुट फील्ड
- बॉर्डर वाला इनपुट फील्ड
- नीचे बॉर्डर वाला इनपुट फील्ड
- रंग वाला इनपुट फील्ड
- फोकस प्राप्त करने वाला इनपुट फील्ड
- फोकस प्राप्त करने वाला इनपुट फील्ड 2
- आइकन वाला इनपुट फील्ड
- एनिमेशन वाला सर्च बॉक्स
- टेक्स्ट बॉक्स का शैली निर्धारित करें
- चयन सूची का शैली निर्धारित करें
- बटन का शैली निर्धारित करें
- प्रतिक्रियाशील फॉर्म
सीएसएस वेबसाइट लेआउट
सीएसएस गोलाकार
सीएसएस बॉर्डर इमेज
सीएसएस पृष्ठभूमि
- एलिमेंट को बहुत से पृष्ठभूमि इमेज जोड़ें
- पृष्ठभूमि इमेज का आकार निर्धारित करें
- "contain" और "cover" का इस्तेमाल करके पृष्ठभूमि इमेज को स्केल करें
- पृष्ठभूमि इमेज का आकार निर्धारित करें
- पूर्ण आकार की पृष्ठभूमि इमेज (सम्पूर्ण विषय क्षेत्र को आवरित करना)
- background-origin का इस्तेमाल करके पृष्ठभूमि इमेज का स्थान को निर्धारित करें
- background-clip का इस्तेमाल करके पृष्ठभूमि के ड्राइंग क्षेत्र को निर्धारित करें
सीएसएस ग्रेडिएंट
- सीधे ग्रेडिएंट - ऊपर से नीचे तक
- सीधे ग्रेडिएंट - बाईं ओर से दाईं ओर तक
- सीधे ग्रेडिएंट - खुदाई
- सीधे ग्रेडिएंट - विशेष कोण
- सीधे ग्रेडिएंट - बहुत से रंगस्तंभ
- सीधे ग्रेडिएंट - रंग-वाला टेक्स्ट +
- सीधे ग्रेडिएंट - पारदर्शिता
- सीधे ग्रेडिएंट - दोहरे सीधे ग्रेडिएंट
- वैध दूरी ग्रेडिएंट - समानता से फैलाए गए रंगस्तंभ
- वैध दूरी ग्रेडिएंट - आंतरिक रंगस्तंभ की दूरी
- वैध दूरी ग्रेडिएंट - आकार को सेट करें
- वैध दूरी ग्रेडिएंट - विभिन्न आकार शब्द
- वैध दूरी ग्रेडिएंट - दोहरे दूरी ग्रेडिएंट
CSS शेडो अस्तित्व
- सरल शेडो अस्तित्व
- शेडो में रंग का इस्तेमाल करें
- शेडो में धुंधलापन का इस्तेमाल करें
- सफेद टेक्स्ट के लिए श्वेत और श्वेत शेडो
- लाल नेयोन शेडो
- लाल और नीले नेयोन शेडो
- सफेद टेक्स्ट के लिए श्वेत, नीला और गहरा नीला शेडो
- एलिमेंट में सरल box-shadow जोड़ें
- box-shadow में रंग का इस्तेमाल करें
- box-shadow में रंग और धुंधलापन का इस्तेमाल करें
- पेपर कार्ड (टेक्स्ट) की तरह बनाएं
- पेपर कार्ड (बोलीग्राम इमेज) की तरह बनाएं
सीएसएस पाठ प्रभाव
- अदिखाए गए अतिरिक्त सामग्री को उपयोगकर्ता को कैसे प्रस्तुत करना है
- एलिमेंट पर माउस लगाए जाने पर अतिरिक्त सामग्री को कैसे दिखाना है
- अधिक लंबे टेक्स्ट को तोड़ेगा और अगले पंक्ति पर ले जाएगा
- बदली पंक्ति के नियम को निर्धारित करें
- टेक्स्ट के लिखने के तरीके को निर्धारित करें (आड़ा लिखना या ऊपर से नीचे लिखना)
CSS वेब फ़ॉन्ट
CSS 2D ट्रांसफॉर्मेशन
- translate() - वर्तमान स्थान से एलिमेंट हटाएं
- rotate() - घिराने के दिशा में घुमाएं एलिमेंट
- rotate() - घिराने के विपरीत घुमाएं एलिमेंट
- scale() - एलिमेंट को बढ़ाना
- scale() - एलिमेंट को कम करना
- skewX() - एलिमेंट को X अक्ष पर ढालना
- skewY() - एलिमेंट को Y अक्ष पर ढालना
- skew() - एलिमेंट को X और Y अक्ष पर ढालना
- matrix() - एलिमेंट को घुमाने, विस्तारित करने, खिंचने और ढालने
CSS 3D ट्रांसफॉर्मेशन
CSS ट्रांसीशन
CSS एनिमेशन
CSS टूलटिप
CSS स्टाइल चित्र
CSS Object-fit
CSS बटन
CSS पेजिंग
CSS मल्टी कॉलम
- बहु-कॉलम बनाएं
- कॉलमों के बीच की गैरेज निर्धारित करें
- कॉलमों के बीच की नियमित शैली निर्धारित करें
- कॉलमों के बीच की नियमित चौड़ाई निर्धारित करें
- कॉलमों के बीच की नियमित रंग निर्धारित करें
- कॉलमों के बीच की नियमित चौड़ाई, शैली और रंग निर्धारित करें
- एलिमेंट को कितनी कॉलमों में पारस्परिक रूप से फैलाना चाहिए निर्धारित करें
- कॉलम के लिए सुझावित उत्तम चौड़ाई निर्धारित करें
CSS यूजर इंटरफेस
CSS वेरिएबल
CSS बॉक्स साइजिंग
CSS फ्लेक्सबॉक्स
- तीन फ्लेक्सबॉक्स एलिमेंट वाला फ्लेक्सबॉक्स
- तीन फ्लेक्सबॉक्स एलिमेंट वाला फ्लेक्सबॉक्स - rtl दिशा
- flex-direction - row-reverse
- flex-direction - column
- flex-direction - column-reverse
- justify-content - flex-end
- justify-content - center
- justify-content - space-between
- justify-content - space-around
- align-items - stretch
- align-items - flex-start
- align-items - flex-end
- align-items - center
- align-items - baseline
- flex-wrap - nowrap
- flex-wrap - wrap
- flex-wrap - wrap-reverse
- align-content - center
- फ्लेक्सबॉक्स एलिमेंट क्रमबद्ध
- Margin-right:auto;
- Margin:auto; = बिल्कुल केंद्रित
- फ्लेक्सबॉक्स एलिमेंट पर align-self सेट करें
- फ्लेक्सबॉक्स एलिमेंट की लंबाई निर्धारित करें, जो फ्लेक्सबॉक्स एलिमेंट के अन्य भागों के अनुसार है
- फ्लेक्सबॉक्स का उपयोग करके रिस्पोन्सिव इमेज लाइब्रेरी बनाएं
- फ्लेक्सबॉक्स का उपयोग करके रिस्पोन्सिव वेबसाइट बनाएं
CSS मीडिया क्वेरी
CSS मीडिया क्वेरी - और इंस्टेंस
- स्क्रीन चौड़ाई के अनुसार अलग-अलग बैकग्राउंड कलर सेट करें
- रिस्पोन्सिव नेविगेशन मेनू
- फ्लॉटिंग का उपयोग करके रिस्पोन्सिव स्तम्भ
- फ्लेक्सबॉक्स का उपयोग करके रिस्पोन्सिव स्तम्भ
- मीडिया क्वेरी के द्वारा एलिमेंट छुपाएं
- रिस्पोन्सिव फ़ॉन्ट साइज़
- रिस्पोन्सिव इमेज लाइब्रेरी
- रिस्पोन्सिव वेबसाइट
- ब्राउज़र दिशा के अनुसार पृष्ठ लेआउट बदलें
- सबसे छोटी चौड़ाई से सबसे बड़ी चौड़ाई तक
CSS रिस्पोन्सिव वेब डिजाइन
CSS ग्रिड
- पिछला पृष्ठ CSS ग्रिड एलिमेंट
- अगला पृष्ठ CSS टेस्ट
