संपादक में कस्टम सीएसएस
किसी ब्लॉक को अनुकूलित करने से लेकर उन्नत सीएसएस क्षेत्र में एक क्लास जोड़ने तक, यह कार्यशाला सरल सीएसएस का उपयोग करके संपादक को अनुकूलित करने की प्रक्रिया में आपका मार्गदर्शन करेगी। सही वर्ग खोजने के रास्ते में निरीक्षक का उपयोग करने में भी एक छोटी सी यात्रा होगी।
सीखने के परिणाम
- Chrome में इंस्पेक्टर का उपयोग करके एक शैली ढूँढना।
- अंडरस्टैंडिंग ब्लॉक में सीएसएस है।
- उन्नत सीएसएस इनपुट फ़ील्ड का उपयोग करना।
- सीएसएस की मूल बातें: विरासत, प्रवाह, ब्रेकिंग फ्लो, रंग।
- कस्टमाइज़र और थीम एडिट में अपनी थीम में कस्टम सीएसएस कैसे जोड़ें, यह दिखाया जा रहा है
समझने बुझने वाले सवाल
- संपादक में कस्टम सीएसएस जोड़ने के क्या तरीके हैं?
- आप यह कैसे पता लगा सकते हैं कि कोई ब्लॉक किस क्लास का उपयोग करता है?
- सीएसएस का क्या मतलब है?
प्रतिलिपि
यह सोचना कि कोई केवल सीएसएस जोड़ सकता है, वास्तव में यह मान लेना है कि वे एक सुंदर खड़ी पहाड़ी पर चढ़ने में सक्षम हैं। समायोजित करने में सक्षम होने के नाते, उस डिज़ाइन को बनाएं जो आपके पास मौजूद आईडी की कल्पना करता है और इसे आपके लिए बिल्कुल उपयुक्त बनाता है। इसे यथासंभव अधिक से अधिक लोगों द्वारा, यथासंभव आसानी से प्राप्त किया जाना चाहिए। आप कुछ सरल चरणों का उपयोग करके ऐसा कर सकते हैं। और यही वह है जिसे हम आज कवर करने जा रहे हैं। लेकिन पहले, आइए शुरुआत करें कि सीएसएस क्या है, और इसके बारे में थोड़ा।
अब, इसका उद्देश्य सीएसएस अवधारणाओं में गहराई से उतरना नहीं है। इसमें कुछ सरल बुनियादी बातें शामिल हैं, जो संपादक में उतरने से पहले हमारी मदद करेंगी। अब इसका मतलब है “कैस्केडिंग स्टाइल शीट”। इसका मतलब है कि शैलियाँ कैस्केड होती हैं या एक प्रवाह में पढ़ी जाती हैं। जब आप सृजन करते हैं तो इस पर विचार करना महत्वपूर्ण है। और जब आप सीएसएस के भीतर काम करते हैं, उदाहरण के लिए, शैली का प्रवाह क्या है और यह अन्य शैलियों के साथ कैसे इंटरैक्ट करता है, तो आप विस्मयादिबोधक चिह्न या “महत्वपूर्ण” कथन का उपयोग करके कैस्केड को ओवरराइड या ऊपर जा सकते हैं। हालाँकि, ऐसा करने में एक दिक्कत है। इसे थोड़ा-सा एक कमरे में चिल्लाने जैसा समझें। यदि आप बहुत अधिक चिल्लाते हैं, तो कमरा वास्तव में शोर, भ्रमित करने वाला और तेजी से बढ़ता है, आप कुछ भी नहीं सुन पाते हैं और वास्तव में क्या हो रहा है यह सुनने में असमर्थ हो जाते हैं, आमतौर पर इसका उपयोग करना एक अच्छा विचार नहीं है और इसे अंतिम माना जाना चाहिए सहारा।
शैलियाँ दो प्रकार की होती हैं। एक आईडी एकल उपयोग है और एक कक्षा एकाधिक उपयोग है, यह एक सरल दृष्टिकोण है तो चलिए वहीं से शुरू करते हैं। जब आपके पास कई प्रकार की कक्षाएं एक साथ मिलती हैं, जैसे कि कुछ स्थान और एक प्रकार से एक साथ जुड़े हुए होते हैं, जिनमें कोई स्थान नहीं होता है और बस इस तरह के बिंदु होते हैं, तो पढ़ने के तरीके पर थोड़ी अंतर्दृष्टि या जानकारी प्राप्त करना एक छोटी सी युक्ति है। यदि आप इसके बारे में ब्रेडक्रंब के संदर्भ में सोचते हैं, तो हो सकता है, और आप इसे एक कंटेनर के रूप में पढ़ते हैं, और इसे उस कैस्केड का अनुसरण करते हुए पढ़ते हैं जिसके बारे में हमने बात की थी। इसके बारे में सोचना थोड़ा आसान हो जाता है। आपके पास एक साझा वॉल्यूम हो सकता है, मेरे पास यहां अलग-अलग चीजें हैं। लेकिन वास्तव में इसके बारे में रैपर के संदर्भ में सोचें कि आपके पास अन्य कंटेनर भी हैं। और आपको ज्यादा चिंता करने की जरूरत नहीं है. लेकिन अभी इस बात से अवगत रहें कि यह एक सामान्य चीज़ है जिसे आप देखने जा रहे हैं।
तो आइए अब देखें कि हम इन शैलियों की खोज कैसे शुरू कर सकते हैं और वास्तव में उनके साथ बातचीत करने के लिए निरीक्षण कैसे कर सकते हैं। इस भाग के लिए, हम क्रोम का उपयोग करने जा रहे हैं, विशेष रूप से, निरीक्षण क्रोम का। यदि आप शैली खोजना चाहते हैं तो यह अत्यंत उपयोगी है। और यहां हमारे पास संपादक के लिए डेमो पेज है। और मैंने पैनलों के साथ इस दृश्य से कहा कि आप चाहें तो विभिन्न दृश्यों को कॉन्फ़िगर कर सकते हैं। इंस्पेक्टर के पास कई अलग-अलग विशेषताएं हैं। और संपूर्ण कार्यशालाएँ केवल इस बात पर लिखी जा सकती हैं कि सुविधाओं को कैसे स्थापित किया जाए और उनका उपयोग कैसे किया जाए और उनके पास स्वयं निरीक्षक हैं।
हालाँकि, अभी के लिए, मैं आपको केवल यह दिखाने जा रहा हूँ कि एक विशेष कक्षा कैसे खोजें। तो चलिए साइट के सामने चलते हैं। यहाँ 2020 है। मैं जानना चाहता हूँ कि इस ब्लॉककोट में कौन सी कक्षा है। इसलिए मैं इस निरीक्षण पर क्लिक करने जा रहा हूं। और मैं उस पर होवर कर सकता हूं और आप देख सकते हैं कि ये चेकबॉक्स कैसे हैं और आप इन चेकबॉक्स को चालू और बंद कर सकते हैं। और यहां, आप वास्तविक समय में उन्हें हाइलाइट होते हुए देख सकते हैं। और आप उन्हें बदलते हुए भी देख सकते हैं ताकि आप कैस्केड के भीतर क्या है, इसकी एक तरह की अंतर्दृष्टि प्राप्त कर सकें। और क्या क्या बदलता है. अब एक चीज जो आप कर सकते हैं वह यह है कि आप वास्तव में यहां परिवर्तन कर सकते हैं, वे साइट को सेव में प्रभावित नहीं करेंगे, लेकिन आप वास्तव में उन्हें यहां देख सकते हैं। तो आप एक शैली जोड़ सकते हैं. और हम ऐसा करने जा रहे हैं । अब यदि आप एक बिल्कुल नई शैली जोड़ना चाहते हैं, तो आप सीधे शीर्ष पर जाएंगे, देखें कि आप क्या तत्व शैली देखते हैं, और यह इसे उस शैली पर लागू करता है जो आपके पास है। इसलिए यदि हम बॉर्डर लेफ्ट करना चाहते हैं, तो हम यहां बॉर्डर लेफ्ट करने जा रहे हैं।
बॉर्डर लेफ्ट का मतलब यहां इस उद्धरण के बाईं ओर एक बॉर्डर है। और फिर हम जो करने जा रहे हैं वह यह है कि हम चार पिक्सेल करने जा रहे हैं, हम ठोस करने जा रहे हैं, इसका मतलब है कि ठोस सीमा और वह रंग है। अब हम पैडिंग करने जा रहे हैं, वे चारों तरफ पैडिंग करने जा रहे हैं, हमारे पास बस यहीं है, लेकिन हम सिर्फ एक तरफ पैडिंग करना चाहते हैं। तो हम वास्तव में क्या कर सकते हैं, हम वास्तव में विशेष रूप से बाईं ओर पैडिंग कह सकते हैं, यही हम अभी करने जा रहे हैं और फिर हम इसे वास्तविक समय में देख सकते हैं।
हम जो करने जा रहे हैं वह यह है कि हम उस शैली को सहेजने जा रहे हैं और हम थोड़ी देर बाद उसका उपयोग करने पर विचार करेंगे। एक चीज जो आप कर सकते हैं, वह यह है कि निरीक्षक विभिन्न स्क्रीन आकारों में देख रहा है। यहां आप आकार बदलता हुआ देख सकते हैं. आप जो बना रहे हैं उसकी त्वरित जांच करने का यह वास्तव में उपयोगी तरीका है। वास्तविक डिवाइस पर जांच करना बहुत अच्छा है। लेकिन कभी-कभी त्वरित जांच भी उपयोगी होती है। या हो सकता है कि आपके पास वह उपकरण ही न हो। तो हम देख रहे हैं कि आप कक्षा कैसे ढूंढ सकते हैं। लेकिन आप वर्डप्रेस में कस्टम सीएसएस कहां रख सकते हैं? खैर, इसका उत्तर काफी कुछ जगह है। पहला “अतिरिक्त सीएसएस” विकल्प का उपयोग करने वाला कस्टमाइज़र रहा है। यहां, आप देख सकते हैं, आप मूल रूप से कस्टमाइज़र पर जाते हैं, और फिर “अतिरिक्त सीएसएस” पर जाते हैं और आपके पास कुछ उपयोगी जानकारी होती है, आप इसे यहां टाइप कर सकते हैं। यह किसी फ़ाइल को समायोजित किए बिना किसी विशिष्ट साइट को अपनी साइट में जोड़ने का एक शानदार तरीका है। और यदि आप फ़ाइलों को संपादित करने में सक्षम हैं, तो अतिरिक्त सीएसएस से अगला कदम थीम फ़ाइलों को संपादित करना है। आप इसे थीम एडिटर के माध्यम से ही कर सकते हैं।
अब आप इसे उपस्थिति से क्लिक कर सकते हैं, और आप यहां देखेंगे कि वास्तव में यहां कुछ जानकारी है जो कहती है, क्या आप जानते हैं कि आप अंतर्निहित सीएसएस संपादक का उपयोग करके ऐसा कर सकते हैं और उन परिवर्तनों का पूर्वावलोकन कर सकते हैं। तो यह वास्तव में आपको वैसे ही करने के लिए प्रोत्साहित कर रहा है जैसा हमने पहले किया था क्योंकि यह एक अधिक स्थायी संपादन है, आप सीधे विषय को प्रभावित कर रहे हैं।
निश्चित रूप से अंतिम तरीका यह है कि फ़ाइल को थीम में ही जोड़ा जाए। यह वास्तव में कुछ ऐसा है जिसके लिए आपको आश्चर्यचकित होने और विषय के कोड में गहराई से गोता लगाने की आवश्यकता है। इस कार्यशाला के प्रयोजन के लिए, हम अतिरिक्त सीएसएस का उपयोग करने पर ध्यान केंद्रित करने जा रहे हैं। तो यह काफी विस्तृत अवलोकन है।
तो अब इसमें गोता लगाने और एक प्रारंभिक बिंदु बनाना शुरू करने का एक अच्छा समय है, जिसमें डिफ़ॉल्ट थीम 2020 का उपयोग किया जाएगा। यह अपना खुद का सामान बनाने के लिए एक शानदार जगह है। लेकिन हम क्या करने जा रहे हैं, पहली चीज़ जो हम करने जा रहे हैं वह यह है कि हम एक बिल्कुल नया वर्ग बनाने जा रहे हैं। और फिर हम संपादक के भीतर उन्नत फ़ील्ड का उपयोग करके इसे कुछ ब्लॉगों में जोड़ने जा रहे हैं, फिर हम मौजूदा ब्लॉग वर्ग के लिए एक कस्टम शैली बना रहे हैं। तो आइए ब्लॉकों में कक्षा जोड़ना शुरू करें। तो यह वास्तव में एक सरल वर्ग होने जा रहा है जो हाइलाइट पृष्ठभूमि बनाता है, वास्तव में सरल, बस अलग पृष्ठभूमि रंग और थोड़ा सा पैडिंग है। तो हम इसे सहेजने जा रहे हैं, यह केवल आधी कहानी है। आइए संपादक में लाइव हों और इस उन्नत क्षेत्र को देखें। और फिर यह, हम यहां एक कक्षा जोड़ सकते हैं, हम इसे कुछ ब्लॉकों में जोड़ देंगे। और आप सोच रहे होंगे, कुछ भी नहीं करता है। इसलिए मैं अपडेट करने जा रहा हूं और फिर हम पूर्वावलोकन करेंगे। और हम वहां हैं, आप मेरे द्वारा ब्लॉकों में जोड़ी गई कक्षाओं में अंतर देख सकते हैं। यहाँ बहुत सारी संभावनाएँ थीं जो आप कर सकते हैं। यह यहां वास्तव में उपयोगी क्षेत्र है। लेकिन बोनस अंक, आइए एक छोटी स्क्रीन पर उस काम की जांच करें जो हमने इस भूत में पहले से याद किया था, जहां हम अपने काम की जांच कर सकते हैं या चलो ऐसा करते हैं, आइए जांचें कि हमने अभी क्या किया है। तो यह वही पृष्ठ है, जहां हम यह करने जा रहे हैं कि हम यह सुनिश्चित करने के लिए इसकी जांच करने जा रहे हैं कि विशेष रूप से क्योंकि हमारे पास पैडिंग थी, हम यह सुनिश्चित करना चाहते हैं कि यह छोटे उपकरणों पर काम करे। और यह वास्तव में एक अच्छा तरीका है, खासकर जब हम पैडिंग, मार्जिन और विभिन्न शैलियों के साथ खेल रहे हैं ताकि यह सुनिश्चित हो सके कि यह कुछ भी नहीं तोड़ता है, और यह उन विभिन्न उपकरणों पर कोई समस्या पैदा नहीं करता है। तो आइए सीएसएस और संपादक की दुनिया में थोड़ा गहराई से चलें। आइए एक कस्टम शैली बनाएं जो मौजूदा शैली से आगे निकल जाए। सदस्य, कुछ पहले की बात है, जब हम निरीक्षण में थे, हमने बाईं ओर एक बॉर्डर जोड़ा था, जिसे बराबर करने के लिए थोड़ा सा पैडिंग था, आइए वास्तव में इसे हमारी थीम के भीतर ही एक शैली बनाएं। तो सबसे पहले, हम यह पता लगाना चाहते हैं कि यह वास्तव में कौन सा वर्ग है। तो हम जा रहे हैं, इस बार हम साइट के सामने से जाने के बजाय संपादक के माध्यम से ही जा रहे हैं।
अब जब हम ऐसा करते हैं, तो एक विशेष रैपर होता है जिसे हम अपनी कस्टम शैली में शामिल नहीं करना चाहते हैं, क्योंकि वह एक विशेष रैपर होता है जो संपादक के लिए बिल्कुल सही होता है। और वह संपादक शैलियों का आवरण है। इसलिए हम चाहते हैं कि जब हम शैली चुन रहे हों तो ऐसा न हो। मैं आपको संपादक का उपयोग करके दिखाता हूं, विशेष रूप से चुनने के लिए क्योंकि यह बहुत सारे ब्लॉक जोड़ने और वास्तव में विभिन्न शैलियों का परीक्षण करने का एक तेज़ तरीका है। और यदि आपको यह टिप याद है, तो इंस्पेक्टर का उपयोग करते समय इसे छोड़ देने का यह एक अच्छा तरीका है। तो यदि आप देखते हैं कि WP ब्लॉककोट बड़ी शैली का है, और आगे चलकर यह याद रखना हमारे लिए वास्तव में महत्वपूर्ण होगा क्योंकि हमने इस उद्धरण के लिए बड़ी शैली का चयन किया है। ठीक है, तो हम इसे अतिरिक्त सीएसएस में ले जा रहे हैं, और हमने इसे यहां जोड़ा है इसलिए हम इसे जोड़ने जा रहे हैं। तो हमें यह कक्षा मिल गई है और फिर हे दोस्तों, उस ब्लॉग पर कस्टम साइन आउट है। बहुत बढ़िया, है ना. जैसा कि आप कैश में देख सकते हैं, यह तुरंत चुन लेता है। और फिर यहां यह हमारे पास साइट के सामने भी है। यह बिल्कुल वैसा ही है। अतिरिक्त सीएसएस का उपयोग करना और इसे निरीक्षक के पास ले जाना वास्तव में आसान है। तो जैसा कि आप देख सकते हैं, सीएसएस का उपयोग करके ब्लॉक और उससे आगे के लिए वह सही शैली बनाने की बहुत सारी संभावनाएँ हैं जो आप चाहते हैं। और यह पहले से ही कुछ चीजों पर आ गया है। आप इंस्पेक्टर को देखते हैं और ठीक वही पाते हैं जो आप उसमें काम की शैली बनाना चाहते हैं। याद रखें, इसे कारण से कैस्केडिंग कहा जाता है। और यह वास्तव में आपको डिबग करने और उस चीज़ को ढूंढने में मदद करता है। किसी क्लास को ब्लॉक करने के लिए खेलने के लिए उस सीएसएस फ़ील्ड का उपयोग करें जो इसमें बनाया गया है, यह वास्तव में बहुत शक्तिशाली टूल है जिसका आप उपयोग कर सकते हैं। हमेशा छोटे उपकरणों पर पूर्वावलोकन करें और, और जब आप कुछ बना सकते हैं, तो वह अतिरिक्त कदम उठाएं और आप उसके लिए इंस्पेक्टर का उपयोग कर सकते हैं। अतिरिक्त सीएसएस चुनें, यह एक सुरक्षित विकल्प है, और यह आपके लिए वास्तव में एक शक्तिशाली विकल्प भी है। और सबसे ऊपर, आनंद लें और प्रयोग करें, क्योंकि मुझे आशा है कि मैंने इसे कुछ बहुत छोटे बदलावों और वास्तव में तेज़ अपडेट के साथ दिखाया है। आप वास्तव में अपनी थीम और कस्टमाइज़र और हर चीज़ को बिल्कुल वैसा ही अनुकूलित कर सकते हैं जैसा आप चाहते हैं। आपका बहुत-बहुत धन्यवाद। अनुकूलित करने का आनंद लें
