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

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 दबाएं. DOM ट्री में, यह देखा जा सकता है कि एलिमेंट पर इनलाइन स्टाइल डिक्लेरेशन लागू किया गया था.

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

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

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

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

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

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

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

किसी एलिमेंट पर सीएसएस सूडोस्टेट लागू करने के लिए, स्टाइल टैब का इस्तेमाल करें.

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

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

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

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

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

ज़्यादा जानकारी के लिए, किसी सूडो-क्लास को टॉगल करना लेख पढ़ें.

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

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

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

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

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

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

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

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

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

अहम जानकारी: इसके अलावा, स्टाइल टैब में मौजूद नियमों के एलान में, अपने पॉइंटर की मदद से, एलिमेंट की लंबाई और उनकी यूनिट को बदला जा सकता है.