क्या आपकी साइट बेहतर दिखेगी अगर लोगो को दाएं पांच पिक्सेल ले जाया जाए या नीला बैकग्राउंड हो? क्या आपके फीचर्ड पोस्ट में छवियों में बॉर्डर या शैडो जोड़ने से वे अधिक पॉप करेंगे? Firefox जैसे आधुनिक ब्राउज़र वेब डेवलपर टूल्स के साथ आते हैं जो आपको साइट के आंतरिक कामकाज का निरीक्षण करने और लाइव एडिट करने की अनुमति देते हैं, परिणामों को रीयल-टाइम में देखते हुए।
इस ट्यूटोरियल में आप सीखेंगे कि किसी भी साइट को लाइव-एडिट करने के लिए Firefox के वेब डेवलपर टूल्स का उपयोग कैसे करें।
नोट: यह ट्यूटोरियल अधिकांश ब्राउज़र पर लागू होता है, जिसमें Chrome, Opera और Safari शामिल हैं।
वेब डेवलपर टूल्स से मिलें
Firefox के वेब डेवलपर टूल्स टूल्स का एक व्यापक सेट है, सभी DOM एलिमेंट्स प्रदर्शित करने से लेकर इसकी गति मापने में सक्षम होने तक। इस ट्यूटोरियल के लिए आपको केवल "इंस्पेक्टर" और "स्टाइल एडिटर" टूल्स की आवश्यकता है।
Firefox चालू करें और किसी भी/अपनी साइट पर जाएं। Firefox के हैमबर्गर मेनू (डिफॉल्ट रूप से ऊपर दाईं ओर) से, "वेब डेवलपर -> स्टाइल एडिटर" चुनें या अपने कीबोर्ड पर Shift + F7 संयोजन दबाएं।
Firefox का वेब डेवलपर पैनल इसकी विंडो के एक तरफ दिखाई देगा - आमतौर पर नीचे का हिस्सा। आप पैनल के शीर्ष दाईं ओर थ्री-डॉट्स बटन पर क्लिक करके और "दाईं/बाईं ओर डॉक करें" या "अलग विंडो" चुनकर इसकी स्थिति बदल सकते हैं।
नोट: यह ट्यूटोरियल आपको HTML और CSS कोड करना नहीं सिखा रहा है। आप यहां बुनियादी बातें सीख सकते हैं।
एलिमेंट का निरीक्षण करना
यह प्रभावित करने में सक्षम होने के लिए कि एलिमेंट कैसा दिखता है, आपको इसकी पहचान करने में सक्षम होना होगा। इसके टूलबार पर पहले बटन पर क्लिक करें या अपने कीबोर्ड पर Ctrl + Shift + C दबाकर एलिमेंट-पिकर मोड सक्षम करें।
अपने माउस को साइट के चारों ओर घुमाएं ताकि वेबपेज के विभिन्न एलिमेंट्स हाइलाइट हों। उनके बगल में आप एक पॉप-अप में उनका प्राथमिक पहचानकर्ता देखेंगे।
जब आप किसी एलिमेंट पर क्लिक करते हैं, तो यह डेवलपर टूल्स के इंस्पेक्टर टैब में चुना जाएगा।
जब आप वह एलिमेंट ढूंढ लेते हैं जिसे आप ट्वीक करना चाहते हैं, तो डेवलपर टूल्स इंस्पेक्टर में इसकी एंट्री पर राइट-क्लिक करें और दिखाई देने वाले पॉप-अप विंडो से चुनें - "कॉपी -> CSS सेलेक्टर।"
अपना लाइव एडिट शुरू करें
अपने एलिमेंट के CSS सेलेक्टर को क्लिपबोर्ड पर कॉपी करने के साथ, डेवलपर टूल्स विंडो में स्टाइल एडिटर टैब पर वापस जाएं। शीर्ष बाईं ओर "+" बटन पर क्लिक करें "दस्तावेज़ में एक नई स्टाइलशीट बनाएं और जोड़ें।"
नई, खाली स्टाइलशीट के अंदर अपना CSS सेलेक्टर पेस्ट करें। एक स्पेस जोड़ें, उसके बाद खोलने और बंद करने वाले कर्ली ब्रैकेट्स का एक सेट।
CSS में, एक एलिमेंट का लुक पहले "इसे टार्गेट करके" CSS सेलेक्टर जैसे पहचानकर्ता का उपयोग करके परिभाषित किया जाता है, फिर कुछ नियम जोड़कर जो इसकी उपस्थिति को प्रभावित करते हैं, कर्ली ब्रैकेट्स के अंदर समूहीकृत। खुलने और बंद होने वाले कर्ली ब्रैकेट्स के बीच रखी गई हर चीज़ "टार्गेटेड एलिमेंट" को प्रभावित करती है।
उदाहरण के लिए, यदि आप नीचे दिया नियम जोड़ते हैं:
display: none;
यह उस एलिमेंट को दृश्य से छिपा देगा जहां इसका उपयोग किया जाता है। यह शायद यह जानने का सबसे आसान तरीका है कि आप अपने पेज पर सही एलिमेंट को टार्गेट कर रहे हैं। यदि यह गायब हो जाता है, तो यह वास्तव में वही था जो आप चाहते थे, और आप अन्य को आज़माने के लिए इस नियम को हटा सकते हैं। यदि यह गायब नहीं हुआ, तो इंस्पेक्टर पर वापस जाने और कुछ अलग चुनने का समय है।
हम आपको यहां CSS कोड करना नहीं दिखाएंगे, लेकिन आप कुछ लोकप्रिय नियमों के साथ खेल सकते हैं जैसे:
border: 2px solid rgba(255,0,0,0.5); color: #333; font-size:20px;
आप देखेंगे कि साइट का एलिमेंट बदलता है जैसे ही आप CSS स्टाइलशीट में नियम जोड़ते हैं।
समापन नोट के रूप में, याद रखें कि कुछ भी सेव नहीं होता है। यदि आप पसंद करते हैं कि आपके ट्वीक कैसे दिखते हैं, तो अपना कोड कहीं कॉपी करें - एक TXT फाइल या अपने पसंदीदा नोट-टेकिंग एप्लिकेशन में - ताकि आप या एक डिजाइनर/डेवलपर इसे अपनी साइट की स्टाइलशीट में जोड़कर परिवर्तनों को स्थायी बना सके। यदि आपको CSS के बारे में सीखने की आवश्यकता है, तो कौशल में महारत हासिल करने में आपकी मदद करने के लिए कुछ ऑनलाइन गेम देखें।
