सोच रहा हूं कि कोई सिर्फ सीएसएस जोड़ सकता है
वास्तव में यह माना जा रहा है कि वे एक सुंदर खड़ी पहाड़ी पर चढ़ने में सक्षम हैं।
समायोजित करने में सक्षम होने के नाते, उस डिज़ाइन को बनाएंआप कल्पना करें, जो विचार आपके पास है
और इसे अपने लिए बिल्कुल उपयुक्त बनाएं।
इसे यथासंभव अधिक से अधिक लोगों द्वारा, यथासंभव आसानी से प्राप्त किया जाना चाहिए।
आप कुछ सरल चरणों का उपयोग करके ऐसा कर सकते हैं।
और यही वह है जिसे हम आज कवर करने जा रहे हैं।
लेकिन पहले, आइए शुरुआत करें कि सीएसएस क्या है,और इसके बारे में थोड़ा।
अब, इसका उद्देश्य सीएसएस अवधारणाओं में गहराई से गोता लगाना नहीं है।
आइए कुछ सरल बुनियादी बातों को कवर करें,और वे हमारी मदद करेंगे
इससे पहले कि हम संपादक में उतरें।
अब इसका मतलब है "कैस्केडिंग स्टाइल शीट"
इसका मतलब है कि शैलियाँ कैस्केडया एक प्रवाह में पढ़ेंगी।
जब आप निर्माण करते हैंऔर जब आप सीएसएस के भीतर काम करते हैं तो यह सोचना महत्वपूर्ण है।
उदाहरण के लिए, शैली का प्रवाह क्या है?
और यह अन्य शैलियों के साथकैसे इंटरैक्ट करता है?
आप कैस्केड को ओवरराइड कर सकते हैं या उसके ऊपर जा सकते हैं
विस्मयादिबोधक चिह्न या@महत्वपूर्ण कथन का उपयोग करना।
हालाँकि, ऐसा करने में एक दिक्कत है।
इसे थोड़ा सा एक कमरे में चिल्लाने जैसा समझें, यदि आपके पास बहुत अधिक चिल्लाने की आवाज़ है,
कमरा वास्तव में शोरगुल वाला, भ्रमित करने वाला हो जाता है।
और तेजी से, आप अंततः कुछ भी नहीं सुन पाने में सक्षम हो जाते हैं
और सुनने में असमर्थ वास्तव में क्या चल रहा है।
आमतौर पर इसका उपयोग करना अच्छा विचार नहीं है औरको अंतिम उपाय माना जाना चाहिए।
शैलियाँ दो प्रकार की होती हैं।
एक आईडी या आईडी एक एकल-उपयोग, और एक वर्ग, बहु-उपयोग है।
यह एक प्रकार का सरल दृष्टिकोण है।लेकिन चलिए वहीं से शुरू करते हैं।
हमें थोड़ी अंदरूनी जानकारी मिलेगी,यह पढ़ने के तरीके पर एक छोटी सी सलाह है
जब आपके पास कई कक्षाएंइस तरह एक साथ जुड़ी हों।
कुछ स्थान के साथ, कुछ - एक प्रकार केबिना स्थान के एक साथ संयोजित,
और बस ऐसे ही बिंदु।
यदि आप इसके बारे मेंब्रेडक्रंब के संदर्भ में सोचते हैं, तो शायद,
और आप इसे एक कंटेनर के रूप में पढ़ते हैं
और इसे उस झरने का अनुसरण करते हुए पढ़ेंजिसके बारे में हमने बात की थी
क्योंकि इसके बारे में सोचना थोड़ा आसानहै।
आपके पास हो सकता है... आपके पास यहांअलग-अलग चीजें हों।
लेकिन वास्तव में इसके बारे में सोचो
उस रैपर के संदर्भ में जो आपके पास है या आपके पास जो कंटेनर है।
और आपको ज्यादा चिंता करने की जरूरत नहीं है...
अभी, इससे परे - यह जानते हुए कि यहएक सामान्य चीज़ है जिसे आप देखने जा रहे हैं।
तो आइए अब देखें कि हम इन शैलियों की खोज कैसे शुरू कर सकते हैं
और वास्तव में उनके साथ तरह की बातचीत का निरीक्षण करना।
इस भाग के लिए, हम Chrome का उपयोग करने जा रहे हैं,विशेष रूप से, Chrome पर निरीक्षक।
यदि आप शैली ढूंढना चाहते हैं तो यह अत्यंत उपयोगी है
और यहां हमारे पास संपादक के लिए डेमो पेज है।
और मैंने इस दृश्य को साइड में पैनल के साथसेट किया है।
यदि आप चाहें तो आप अलग-अलग दृश्य कॉन्फ़िगर कर सकते हैं।
इंस्पेक्टर के पास बहुत सारी अलग-अलगविशेषताएं और संपूर्ण कार्यशालाएं हैं
केवल इस पर लिखा जा सकता है कि कैसे सेट अप करेंऔर सुविधाओं का उपयोग करें
और उनके पास - स्वयं निरीक्षक हैं।
हालाँकि, अभी के लिए, मैं आपको केवल यह दिखाने जा रहा हूँ कि किसी विशेष कक्षा को कैसे खोजा जाए।
तो चलिए साइट के सामने चलते हैं।
यहाँ ट्वेंटी ट्वेंटी है.
मैं यह जानना चाहता हूं कि इस blockquote में कौन सी कक्षा है।
तो मैं इस "निरीक्षण" पर क्लिक करने जा रहा हूँ।
और मैं इस पर होवर कर सकता हूं और आप देख सकते हैं कि येचेकबॉक्स कैसे हैं और आप ऐसा कर सकते हैं
इन चेकबॉक्स पर क्लिक करें और बंद करें।
और यहां, आप वास्तविक समय में हाइलाइट किए गए देख सकते हैं।
और आप उन्हें बदलते हुए भी देख सकते हैं।
तो आप एक प्रकार की अंतर्दृष्टि प्राप्त कर सकते हैंकैस्केड के भीतर क्या है
और साथ ही क्या बदलता है।
और एक चीज़ जो आप कर सकते हैं वह यह है कि आप वास्तव में यहाँ परिवर्तन कर सकते हैं,
वे सहेजे गए अनुसार साइट को प्रभावित नहीं करेंगे,
लेकिन आप वास्तव में उन्हें यहां देख सकते हैं।
तो आप एक शैली जोड़ सकते हैं.
और हम अब ऐसा करने जा रहे हैं।
यदि आप बिल्कुल नई शैली जोड़ना चाहते हैं,आप सीधे शीर्ष पर जाएंगे,
जहाँ आप तत्व शैली देखते हैं,
और यह इसे आपके पास मौजूद शैलीपर लागू करता है।
इसलिए यदि हम बॉर्डर लेफ्ट करना चाहते हैं, तो हम यहां बॉर्डर लेफ्ट करने जा रहे हैं।
बॉर्डर लेफ्ट का मतलब यहां इस उद्धरण के बाएं हाथ की ओर एक बॉर्डर है।
और फिर हम जो करने जा रहे हैं वह हैहम 4 पिक्सेल जोड़ने जा रहे हैं,
हम ठोस काम करने जा रहे हैं,
इसका मतलब है कि ठोस बॉर्डर औरवह रंग है।
अब हम पैडिंग करने जा रहे हैं।
हम सभी तरह से पैडिंग करने जा रहे हैंचारों ओर या हमारे पास बस यहीं है।
लेकिन हम सिर्फ एक तरफ पैडिंग करना चाहते हैं।
तो हम वास्तव में क्या कर सकते हैं वह यह है कि हमवास्तव में विशेष रूप से कह सकते हैं कि बाईं ओर पैडिंग है,
अब हम यही करने जा रहे हैं।
और फिर हम इसे वास्तविक समय में देख सकते हैं।
हम जो करने जा रहे हैं वह यह है कि हम उस शैली को सहेजने जा रहे हैं
और हम थोड़ी देर बाद इसका उपयोग करने पर विचार करेंगे।
एक चीज़ जो आप कर सकते हैं वह वास्तव में आसान हैइंस्पेक्टर के बारे में ध्यान देना
विभिन्न स्क्रीन आकारों में देखना।
यहां आप आकार बदलता हुआ देख सकते हैं।
आप जो बना रहे हैं उस पर त्वरितजांच पाने का यह वास्तव में उपयोगी तरीका है।
वास्तविक डिवाइस पर चेक इन करना बहुत अच्छा है,
लेकिन कभी-कभी त्वरित जांचभी उपयोगी होती है।
या हो सकता है कि आपके पास वह उपकरण ही न हो।
तो हमने देखा कि आप क्लास कैसे ढूंढ सकते हैं।
लेकिन आप WordPress में Custom CSSकहां रख सकते हैं?
खैर, इसका उत्तर काफी कुछ जगह है।
पहला कस्टमाइज़र विकल्प, अतिरिक्त सीएसएस का उपयोग कर रहा है।
यहां, आप देख सकते हैं, आप मूल रूप सेकस्टमाइज़ पर जाते हैं, और फिर अतिरिक्त सीएसएस पर जाते हैं।
और आपके पास कुछ सहायता जानकारी है।आप इसे यहां टाइप कर सकते हैं।
यह आपकी साइट मेंविशिष्ट शैली जोड़ने का एक शानदार तरीका है
बिना किसी फ़ाइल को समायोजित किए।
और यदि आप फ़ाइलों को संपादित करने में सक्षम हैं, तो अतिरिक्त सीएसएस से एकचरण चालू है
थीम फ़ाइलों को संपादित करने के लिए, आप यह कार्य थीम संपादक के माध्यम से ही कर सकते हैं।
अब, Appearance से इस पर क्लिक करें।
और आप यहां देखेंगे, वास्तव में यहां कुछजानकारी है जो कहती है,
क्या आप जानते हैं कि आप अंतर्निहित सीएसएस संपादक का उपयोग करके यह कर सकते हैं
और उन परिवर्तनों का पूर्वावलोकन करें
तो यह वास्तव में आपको वैसा ही करने के लिए प्रोत्साहित कर रहा है जैसा हमने पहले किया था।
क्योंकि यह अधिक स्थायी संपादन है.
आप सीधे तौर पर थीम को ही प्रभावित कर रहे हैं।
निश्चित रूप से अंतिम तरीका यह है कि थीम में फ़ाइल को स्वयं जोड़ें।
यह वास्तव में कुछ ऐसा है जिसके लिए आपको सर्वर एक्सेस की आवश्यकता है
और थीम के कोड में गहराई से उतरें।
इस कार्यशाला के प्रयोजन के लिए, हम अतिरिक्त सीएसएस का उपयोग करने पर ध्यान केंद्रित करने जा रहे हैं।
तो यह काफी विस्तृत अवलोकन है।
तो अब बस div करने और निर्माण शुरू करने का एक अच्छा समय है।
प्रारंभिक बिंदु डिफ़ॉल्ट थीम ट्वेंटी ट्वेंटी का उपयोग करना होगा।
यह अपनी खुद की शैली बनाने के लिए एक शानदार जगह है।
लेकिन हम क्या करने जा रहे हैं?
पहली चीज़ जो हम करने जा रहे हैं वह यह है कि हम एक बिल्कुल नया वर्ग बनाने जा रहे हैं।
और फिर हम उसे कुछ ब्लॉकों में जोड़ने जा रहे हैं
संपादक के भीतर उन्नत फ़ील्ड का उपयोग करना।
फिर हम मौजूदा ब्लॉक क्लास के लिए एक कस्टमस्टाइल बनाने जा रहे हैं।
तो आइए ब्लॉक मेंa क्लास जोड़ना शुरू करें।
तो यह वास्तव में एक सरलक्लास होने जा रहा है जो एक हाइलाइट पृष्ठभूमि बनाता है,
वास्तव में सरल
यह बस एक अलग पृष्ठभूमि रंग औरथोड़ा सा पैडिंग है।
तो हम इसे सहेजने जा रहे हैं, यह केवल आधी कहानी है।
आइए संपादक में जाएं और इसउन्नत फ़ील्ड को देखें।
और फिर यह, हम यहां एक कक्षा जोड़ सकते हैं,
हम इसे कुछ ब्लॉकों में जोड़ने जा रहे हैं
और आप सोच रहे होंगे, यह कुछ भी नहीं करतालगता है।
लेकिन हम अपडेट करने जा रहे हैं और फिर हम पूर्वावलोकन करेंगे।
और हम वहां हैं!
आप कक्षाओं में अंतर देख सकते हैंमैंने ब्लॉक में जोड़ा है।
बहुत सारी संभावनाएं हैंआप यहां कर सकते हैं।
यह वास्तव में उपयोगी क्षेत्र है.
लेकिन, बोनस अंक!
आइए छोटी स्क्रीन पर देखेंहमने जो काम किया।
इंस्पेक्टर में पहले से याद रखेंजहां हम अपने काम की जांच कर सकते हैं?
अच्छा, चलो ऐसा करते हैं।
आइए देखें कि हमने अभी क्या किया।
तो यह वही पेज है.
हम जो करने जा रहे हैं वह यह है कि हम इसकी जाँच करेंगे
यह सुनिश्चित करने के लिए - यह वास्तव में है -
क्योंकि हमारे पास पैडिंग थी, हम यह सुनिश्चित करना चाहते हैं
यह छोटे उपकरणों पर काम करता है
यह वास्तव में एक अच्छा तरीका है,खासकर जब हम आसपास खेल रहे हों
पैडिंग और मार्जिन और विभिन्नशैलियों के साथ, यह सुनिश्चित करने के लिए कि यह टूटे नहीं
कुछ भी और इससे उन विभिन्न उपकरणों पर कोई समस्या नहीं आई
तो, आइए सीएसएस और संपादक कीदुनिया में थोड़ा गहराई से जाएं।
आइए एक कस्टम शैली बनाएं जो मौजूदा शैली को ओवरराइड करती है
यह पहले से याद है?
जब हम इंस्पेक्टर में थे, हमने थोड़ी सी बाईं ओर एकबॉर्डर जोड़ा
बराबरी करने के लिए थोड़ा सा पैडिंग।
आइए वास्तव में इसे अपनी थीम के भीतर ही एक शैली बनाएं।
तो सबसे पहले, हम यह पता लगाना चाहते हैं कि यह वास्तव में कौन सावर्ग है।
तो हम जा रहे हैं - इस बार हमसंपादक के माध्यम से ही जा रहे हैं,
साइट के सामनेपर जाने के बजाय।
अब जब हम ऐसा करते हैं, तो एक विशेषरैपर होता है जिसे हम अपने में शामिल नहीं करना चाहते हैं
कस्टम शैली, क्योंकि वह एक विशेषरैपर है जो केवल संपादक के लिए है।
और वह संपादक शैलियों का आवरण है।
इसलिए हम चाहते हैं कि जब हम शैली चुन रहे हों तो ऐसा न हो।
मैं आपको संपादक का उपयोग करके दिखाता हूं, विशेष रूप से लेने के लिए, क्योंकि यह एक तेज़ तरीका है
विभिन्न शैलियों में बहुत सारे ब्लॉक और वास्तविक परीक्षण जोड़ने के लिए।
और यदि आपको यह टिप याद है, तो इसे छोड़ने का यह एक अच्छातरीका है
जब आप इंस्पेक्टर का उपयोग कर रहे हों.
तो यदि आप देखें,यह wp-block-quote.is-style-large है
और वह बिंदु एक साथ है
वास्तव में हमारे लिए आगे बढ़ने को याद रखना महत्वपूर्ण होगा
क्योंकि हमने इस उद्धरण के लिए "बड़ी" शैलीचयनित की है।
ठीक है, तो हम इसेअतिरिक्त सीएसएस में ले जा रहे हैं, और हमने इसे यहां जोड़ा है
तो हम इसे जोड़ने जा रहे हैं।
तो हमें यह क्लास मिली है।
और फिर, तुम यहाँ जाओ!
कस्टम शैली अब ब्लॉग पर दिखाई देती है.
बहुत बढ़िया, है ना?
जैसा कि आप कक्षा में देख सकते हैं,उसने उसे तुरंत चुन लिया।
और फिर यहां हमारे पास यह साइट के सामनेपर भी है।
बिल्कुल ऐसा ही है.
अतिरिक्त सीएसएस का उपयोग करना वास्तव में आसान है, औरबस इसे इंस्पेक्टर के साथ चुनना।
तो जैसा कि आप देख सकते हैं, इसे बनाने के लिए सीएसएस का उपयोग करने में बहुत सारी संभावनाएं हैं
ब्लॉकऔर उससे आगे के लिए आप जो सही शैली चाहते हैं।
और यह हमेशा कुछ चीजों पर आता है।
इंस्पेक्टर का उपयोग करें और ठीक वही ढूंढें जोआप स्टाइल करना चाहते हैं।
वहां काम बंद करो.
याद रखें, इसे किसी कारण से कैस्केडिंगकहा जाता है।
और यह वास्तव में आपको डिबगऔर उस चीज़ को ढूंढने में मदद करता है।
किसी क्लास को ब्लॉक करने के लिए उस सीएसएस फ़ील्ड का उपयोग करें जो अंतर्निहित है।
यह वास्तव में, वास्तव में शक्तिशाली उपकरण है जिसका आप उपयोग कर सकते हैं।
पूर्वावलोकन हमेशा छोटे डिवाइस पर करें.
और जब आप कुछ बनाते हैं,वह अतिरिक्त कदम उठाते हैं।
और आप इसके लिए इंस्पेक्टर का उपयोग कर सकते हैं।
अतिरिक्त सीएसएस का उपयोग करें।यह एक सुरक्षित विकल्प है,
और यह आपके लिए भी वास्तव में एक शक्तिशाली विकल्प है।
और सबसे बढ़कर, आनंद लें और प्रयोग करें।
क्योंकि मुझे आशा है कि मैंने कुछ बहुत छोटेछोटे बदलाव और वास्तव में तेज़ अपडेट दिखाए हैं।
आप वास्तव में अपनी थीमऔर कस्टमाइज़र को अनुकूलित कर सकते हैं -
और सब कुछ बिल्कुल वैसा ही हो जैसा आप चाहते हैं।
आपका बहुत-बहुत धन्यवाद।
कस्टमाइज़ करने का आनंद लें!