सीएसएस देखना और उसमें बदलाव करना

Kayce Basques

Sofia Emelianova

Chrome DevTools का इस्तेमाल करके किसी पेज के सीएसएस को देखने और उसे बदलने की बुनियादी बातें जानने के लिए, इन इंटरैक्टिव ट्यूटोरियल को पूरा करें.

किसी एलिमेंट का सीएसएस देखना

1. नीचे दिए गए Inspect me! टेक्स्ट पर राइट क्लिक करें और जांच करें को चुनें. DevTools का एलिमेंट पैनल खुलता है.

   मुझे देखें!

2. DOM ट्री में नीले रंग से हाइलाइट किए गए Inspect me! एलिमेंट को देखें.

   

3. DOM ट्री में, Inspect me! एलिमेंट के लिए data-message एट्रिब्यूट की वैल्यू ढूंढें.

4. नीचे दिए गए टेक्स्ट बॉक्स में एट्रिब्यूट की वैल्यू डालें.

5. एलिमेंट > स्टाइल पैनल में, aloha क्लास रूल ढूंढें.

   स्टाइल पैनल में, DOM ट्री में चुने गए किसी भी एलिमेंट पर लागू होने वाले सीएसएस नियमों की सूची होती है. यह एलिमेंट, Inspect me! एलिमेंट होना चाहिए.

6. aloha क्लास, padding के लिए वैल्यू का एलान कर रही है. नीचे दिए गए टेक्स्ट बॉक्स में, यह वैल्यू और इसकी यूनिट को बिना स्पेस के डालें.

अगर आपको अपनी DevTools विंडो को व्यूपोर्ट के दाईं ओर डॉक करना है, जैसा कि पहले चरण में स्क्रीनशॉट में किया गया था, तो DevTools प्लेसमेंट बदलना देखें.

किसी एलिमेंट में सीएसएस का एलान जोड़ना

किसी एलिमेंट में सीएसएस का एलान बदलने या जोड़ने के लिए, स्टाइल पैनल का इस्तेमाल करें.

1. नीचे दिए गए Add a background color to me! टेक्स्ट पर राइट क्लिक करें और जांच करें को चुनें.

   मेरे लिए कोई बैकग्राउंड रंग जोड़ें!

2. स्टाइल पैनल के ऊपरी हिस्से के पास मौजूद element.style पर क्लिक करें.

3. background-color लिखें और Enter दबाएं.

4. honeydew लिखें और Enter दबाएं. डीओएम ट्री में, देखा जा सकता है कि एलिमेंट पर इनलाइन स्टाइल का एलान लागू किया गया है.

किसी एलिमेंट में सीएसएस क्लास जोड़ना

स्टाइल पैनल का इस्तेमाल करके यह देखें कि किसी एलिमेंट पर सीएसएस क्लास लागू करने या उससे हटाए जाने पर, कोई एलिमेंट कैसा दिखता है.

1. नीचे दिए गए Add a class to me! एलिमेंट पर राइट क्लिक करें और जांच करें को चुनें.

   मुझे कोई क्लास जोड़ें!

2. .cls पर क्लिक करें. DevTools एक टेक्स्ट बॉक्स दिखाता है, जहां चुने गए एलिमेंट में क्लास जोड़ी जा सकती हैं.

3. नई क्लास जोड़ें टेक्स्ट बॉक्स में color_me टाइप करें. इसके बाद, Enter दबाएं. नई क्लास जोड़ें टेक्स्ट बॉक्स के नीचे एक चेकबॉक्स दिखेगा. यहां से क्लास को चालू या बंद किया जा सकता है. अगर Add a class to me! एलिमेंट में कोई अन्य क्लास लागू की गई है, तो उसे यहां से भी टॉगल किया जा सकता है.

किसी क्लास में स्यूडोस्टेट जोड़ना

किसी एलिमेंट पर सीएसएस pseudostate लागू करने के लिए, स्टाइल पैनल का इस्तेमाल करें. DevTools :active, :focus, :focus-within, :target, :hover, :visited, या focus-visible के साथ काम करता है.

1. नीचे दिए गए Hover over me! टेक्स्ट पर कर्सर घुमाएं. इससे बैकग्राउंड का रंग बदल जाता है.

   मेरे ऊपर कर्सर घुमाएं!

2. Hover over me! टेक्स्ट पर राइट क्लिक करें और जांच करें को चुनें.

3. स्टाइल पैनल में, :hov पर क्लिक करें.

4. :hover चेकबॉक्स को चुनें. बैकग्राउंड का रंग पहले की तरह बदल जाता है, भले ही आप एलिमेंट पर कर्सर नहीं घुमा रहे हों.

किसी एलिमेंट के डाइमेंशन बदलना

किसी एलिमेंट की चौड़ाई, ऊंचाई, पैडिंग, मार्जिन या बॉर्डर की लंबाई को बदलने के लिए, स्टाइल पैनल में बॉक्स मॉडल इंटरैक्टिव डायग्राम का इस्तेमाल करें.

1. नीचे दिए गए Change my margin! एलिमेंट पर राइट क्लिक करें और जांच करें को चुनें.

   मेरा मार्जिन बदलें!

2. बॉक्स मॉडल देखने के लिए, स्टाइल पैनल के कार्रवाई बार में, साइडबार दिखाएं बटन पर क्लिक करें.

3. स्टाइल पैनल में बॉक्स मॉडल डायग्राम में, पैडिंग (जगह) पर कर्सर घुमाएं. एलिमेंट की पैडिंग, व्यूपोर्ट में हाइलाइट कर दी जाती है.

4. बॉक्स मॉडल में बाएं मार्जिन पर दो बार क्लिक करें. फ़िलहाल, एलिमेंट में मार्जिन नहीं हैं, इसलिए margin-left की वैल्यू - है.

5. 100 लिखें और Enter दबाएं.

बॉक्स मॉडल डिफ़ॉल्ट रूप से पिक्सल का इस्तेमाल करता है, लेकिन यह 25% या 10vw जैसी दूसरी वैल्यू भी स्वीकार करता है.