सीएसएस की सुविधाओं का रेफ़रंस

Kayce Basques
Jecelyn Yeen
Sofia Emelianova
Sofia Emelianova
GitHub

सीएसएस देखने और बदलने से जुड़ी Chrome DevTools की इस सुविधा की पूरी जानकारी में, नए वर्कफ़्लो के बारे में जानें.

बुनियादी बातें जानने के लिए, सीएसएस देखना और बदलना देखें.

कोई एलिमेंट चुनें

DevTools के एलिमेंट पैनल की मदद से, एक बार में एक एलिमेंट के सीएसएस को देखा या बदला जा सकता है.

चुने गए एलिमेंट का उदाहरण.

स्क्रीनशॉट में, DOM ट्री में नीले रंग से हाइलाइट किया गया h1 एलिमेंट चुना गया है. दाईं ओर, स्टाइल टैब में एलिमेंट की स्टाइल दिखाई जाती हैं. बाईं ओर, एलिमेंट को व्यूपोर्ट में हाइलाइट किया जाता है. हालांकि, ऐसा सिर्फ़ इसलिए होता है, क्योंकि DOM ट्री में माउस उस पर कर्सर घुमा रहा है.

ट्यूटोरियल के लिए, किसी एलिमेंट का सीएसएस देखना देखें.

किसी एलिमेंट को चुनने के कई तरीके हैं:

  • अपने व्यूपोर्ट में, एलिमेंट पर राइट क्लिक करें और जांच करें चुनें.
  • DevTools में, एलिमेंट चुनें पर क्लिक करें कोई एलिमेंट चुनें या Command+Shift+C (Mac) या Control+Shift+C (Windows, Linux) दबाएं. इसके बाद, व्यूपोर्ट में मौजूद एलिमेंट पर क्लिक करें.
  • DevTools में DOM ट्री में मौजूद एलिमेंट पर क्लिक करें.
  • DevTools के लिए, कंसोल में जाकर document.querySelector('p') जैसी क्वेरी चलाएं. इसके बाद, नतीजे पर राइट क्लिक करें और एलिमेंट पैनल में रिवील करें चुनें.

सीएसएस देखें

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

स्टाइल टैब में अलग-अलग जगहों पर कई दूसरी जगहों पर ले जाने वाले लिंक दिखते हैं. इन लिंक में इनके अलावा, और भी जगहें शामिल हो सकती हैं:

  • सीएसएस नियमों के बगल में, स्टाइल शीट और सीएसएस सोर्स के लिए. ऐसे लिंक स्रोत पैनल खोलते हैं. अगर स्टाइल शीट को छोटा किया गया है, तो छोटी फ़ाइल को पढ़ने लायक बनाएं देखें.
  • इनसे इनहेरिट किया गया ... सेक्शन में, पैरंट एलिमेंट में.
  • var() कॉल में, कस्टम प्रॉपर्टी के एलान में.
  • animation शॉर्टहैंड प्रॉपर्टी में, @keyframes में.
  • दस्तावेज़ के टूलटिप में दिए गए लिंक के बारे में ज़्यादा जानें.
  • और ज़्यादा.

यहां उनमें से कुछ हाइलाइट की गई हैं:

कई लिंक हाइलाइट किए गए.

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

सीएसएस दस्तावेज़, विशेषता, और कस्टम प्रॉपर्टी वैल्यू की मदद से टूलटिप देखें

एलिमेंट > स्टाइल, किसी एलिमेंट पर कर्सर घुमाने पर काम की जानकारी देने वाले टूलटिप दिखाता है.

सीएसएस का दस्तावेज़ देखें

सीएसएस के छोटे ब्यौरे वाला टूलटिप देखने के लिए, स्टाइल टैब में प्रॉपर्टी के नाम पर कर्सर घुमाएं.

सीएसएस प्रॉपर्टी से जुड़े दस्तावेज़ों वाला टूलटिप.

इस प्रॉपर्टी के लिए, एमडीएन सीएसएस के रेफ़रंस पर जाने के लिए, ज़्यादा जानें पर क्लिक करें.

टूलटिप को बंद करने के लिए, चेकबॉक्स. न दिखाएं को चुनें.

इसे फिर से चालू करने के लिए, सेटिंग. सेटिंग > प्राथमिकताएं > एलिमेंट > चेकबॉक्स. सीएसएस दस्तावेज़ का टूलटिप दिखाएं चुनें.

सिलेक्टर की खास जानकारी देखें

सिलेक्टर की खास जानकारी के साथ टूलटिप देखने के लिए, उस पर कर्सर घुमाएं.

मेल खाने वाले सिलेक्टर की खासियत के वेट के साथ टूलटिप.

कस्टम प्रॉपर्टी की वैल्यू देखें

टूलटिप में किसी --custom-property की वैल्यू देखने के लिए, उस पर कर्सर घुमाएं.

टूलटिप में कस्टम प्रॉपर्टी की वैल्यू.

अमान्य, ओवरराइड की गई, निष्क्रिय और अन्य सीएसएस देखें

स्टाइल टैब, सीएसएस की कई तरह की समस्याओं की पहचान करता है और उन्हें अलग-अलग तरीके से हाइलाइट करता है.

स्टाइल टैब में सीएसएस को समझना देखें.

सिर्फ़ उस सीएसएस को देखना जो असल में किसी एलिमेंट पर लागू की गई है

स्टाइल टैब में, किसी एलिमेंट पर लागू होने वाले सभी नियम दिखते हैं. इनमें, बदल दी गई एलान की जानकारी भी शामिल होती है. अगर बदले गए एलान में आपकी दिलचस्पी नहीं है, तो कंप्यूटेड टैब का इस्तेमाल करके, सिर्फ़ उस सीएसएस को देखें जिसे असल में किसी एलिमेंट पर लागू किया जा रहा है.

  1. कोई एलिमेंट चुनें.
  2. एलिमेंट पैनल में, कंप्यूटेड टैब पर जाएं.

कंप्यूटेड टैब.

सभी प्रॉपर्टी देखने के लिए, सभी दिखाएं चेकबॉक्स को चुनें.

कंप्यूटेड टैब में सीएसएस को समझना लेख पढ़ें.

सीएसएस प्रॉपर्टी को वर्णमाला के क्रम में देखना

कैलकुलेट की गई टैब का इस्तेमाल करें. सिर्फ़ वह सीएसएस देखें जिसे असल में किसी एलिमेंट पर लागू किया गया है.

इनहेरिट की गई सीएसएस प्रॉपर्टी देखें

कैलकुलेट किए गए टैब में, सभी दिखाएं चेकबॉक्स को चुनें. सिर्फ़ उस सीएसएस को देखें जो असल में किसी एलिमेंट पर लागू हुई है.

इसके अलावा, स्टाइल टैब पर स्क्रोल करें और Inherited from <element_name> नाम वाले सेक्शन ढूंढें.

स्टाइल टैब में, इनहेरिट किए गए... सेक्शन देखें.

सीएसएस के नियम देखें

ऐट-नियम, सीएसएस स्टेटमेंट होते हैं. इनकी मदद से सीएसएस के व्यवहार को कंट्रोल किया जा सकता है. एलिमेंट > स्टाइल, खास सेक्शन में इन नियमों को दिखाता है:

@property के नियम देखें

@property सीएसएस के नियम की मदद से, सीएसएस कस्टम प्रॉपर्टी को साफ़ तौर पर तय किया जा सकता है. साथ ही, JavaScript चलाए बिना उन्हें स्टाइल शीट में रजिस्टर किया जा सकता है.

प्रॉपर्टी की वैल्यू, डिस्क्रिप्टर, और उसके रजिस्ट्रेशन के लिंक वाला टूलटिप देखने के लिए, स्टाइल टैब में उस प्रॉपर्टी के नाम पर कर्सर घुमाएं. ऐसा करने के लिए, स्टाइल टैब के नीचे छोटे किए जा सकने वाले @property सेक्शन में जाएं.

किसी @property नियम में बदलाव करने के लिए, उसके नाम या वैल्यू पर दो बार क्लिक करें.

@supports के नियम देखें

स्टाइल टैब आपको नियमों पर @supports सीएसएस दिखाता है. ऐसा तब होता है, जब वे किसी एलिमेंट पर लागू किए गए हों. उदाहरण के लिए, नीचे दिए गए एलिमेंट की जांच करें:

@supports at-नियमों को देखें.

अगर आपके ब्राउज़र में lab() फ़ंक्शन काम करता है, तो एलिमेंट का रंग हरा है, नहीं तो यह बैंगनी रंग का है.

@scope के नियम देखें

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

नए @scope के नियम, सीएसएस कैस्केडिंग और इनहेरिटेंस लेवल 6 के स्पेसिफ़िकेशन का हिस्सा हैं. इन नियमों की मदद से, सीएसएस स्टाइल का दायरा बढ़ाया जा सकता है. इसका मतलब है कि दूसरे शब्दों में, खास एलिमेंट पर स्टाइल को साफ़ तौर पर लागू किया जा सकता है.

नीचे दिए गए झलक में @scope नियम देखें:

  1. झलक में कार्ड पर टेक्स्ट की जांच करें.
  2. स्टाइल टैब पर, @scope नियम ढूंढें.

@scope का नियम.

इस उदाहरण में, @scope नियम, card क्लास वाले एलिमेंट के अंदर सभी <p> एलिमेंट के लिए, ग्लोबल सीएसएस background-color एलान को बदल देता है.

@scope नियम में बदलाव करने के लिए, उस पर दो बार क्लिक करें.

@font-palette-values के नियम देखें

@font-palette-values सीएसएस के नियम की मदद से, आपको font-palette प्रॉपर्टी की डिफ़ॉल्ट वैल्यू को पसंद के मुताबिक बनाया जा सकता है. एलिमेंट > स्टाइल, इसे खास नियम के तहत बनाए गए सेक्शन में दिखाता है.

अगले झलक में @font-palette-values सेक्शन देखें:

  1. झलक में टेक्स्ट की दूसरी लाइन की जांच करें.
  2. स्टाइल में, @font-palette-values सेक्शन ढूंढें.

@font-palette-values का नियम.

इस उदाहरण में, --New फ़ॉन्ट पटल की वैल्यू, रंगीन फ़ॉन्ट के डिफ़ॉल्ट फ़ॉन्ट की जगह ले लेती हैं.

कस्टम वैल्यू में बदलाव करने के लिए, उन पर दो बार क्लिक करें.

किसी एलिमेंट का बॉक्स मॉडल देखना

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

बॉक्स मॉडल डायग्राम देखें.

मान बदलने के लिए, उस पर दो बार क्लिक करें.

किसी एलिमेंट के सीएसएस को खोजना और उसे फ़िल्टर करना

किसी सीएसएस प्रॉपर्टी या वैल्यू को खोजने के लिए, स्टाइल और कंप्यूटेड टैब पर फ़िल्टर बॉक्स का इस्तेमाल करें.

स्टाइल टैब को फ़िल्टर करना.

कंप्यूटेड टैब में इनहेरिट की गई प्रॉपर्टी भी खोजने के लिए, सभी दिखाएं चेकबॉक्स को चुनें.

कंप्यूटेड टैब में इनहेरिट की गई प्रॉपर्टी को फ़िल्टर करना.

कंप्यूटेड टैब पर जाने के लिए, ग्रुप पर सही का निशान लगाकर, फ़िल्टर की गई प्रॉपर्टी को छोटी की जा सकने वाली कैटगरी में ग्रुप करें.

फ़िल्टर की गई प्रॉपर्टी को ग्रुप में बांटा जा रहा है.

फ़ोकस किए गए पेज को एम्युलेट करें

फ़ोकस को पेज से DevTools पर स्विच करने पर, फ़ोकस से ट्रिगर होने पर कुछ ओवरले एलिमेंट अपने-आप छिप जाते हैं. उदाहरण के लिए, ड्रॉप-डाउन सूचियां, मेन्यू या तारीख चुनने वाले टूल. check_box फ़ोकस किए गए पेज को एम्युलेट करें विकल्प की मदद से, ऐसे एलिमेंट को डीबग किया जा सकता है, जैसे कि वह फ़ोकस में हो.

इस डेमो पेज पर, फ़ोकस किए गए पेज को एम्युलेट करने की कोशिश करें:

  1. इनपुट एलिमेंट पर फ़ोकस करें. इसके नीचे कोई दूसरा एलिमेंट दिखता है.
  2. DevTools खोलें. DevTools विंडो अब पेज के बजाय फ़ोकस में है. इसलिए, एलिमेंट फिर से गायब हो गया है.
  3. एलिमेंट > स्टाइल में, :hov पर क्लिक करें. इसके बाद, check_box फ़ोकस किए गए पेज को एम्युलेट करें पर सही का निशान लगाएं. साथ ही, पक्का करें कि इनपुट एलिमेंट चुना गया हो. अब आप इसके नीचे मौजूद एलिमेंट की जांच कर सकते हैं.

&#39;फ़ोकस किए गए पेज को एम्युलेट करें&#39; विकल्प को चालू करने से पहले और बाद में.

रेंडरिंग पैनल पर भी यही विकल्प आपको दिखेगा.

बदली हुई क्लास को टॉगल करना

बदली हुई कैटगरी को टॉगल करने के लिए, जैसे कि :active, :focus, :focus-within, :target, :hover, :visited, या focus-visible:

  1. कोई एलिमेंट चुनें.
  2. एलिमेंट पैनल में, स्टाइल टैब पर जाएं.
  3. :hov पर क्लिक करें.
  4. बदली हुई क्लास को चुनें, जिसे आपको चालू करना है.

किसी एलिमेंट पर कर्सर घुमाने पर, स्यूडोस्टेट को टॉगल किया जा रहा है.

व्यूपोर्ट में, यह देखा जा सकता है कि DevTools background-color एलान को एलिमेंट पर लागू करता है. भले ही, एलिमेंट पर कर्सर न घुमाया गया हो.

इंटरैक्टिव ट्यूटोरियल के लिए, क्लास में बदली हुई क्लास जोड़ें देखें.

इनहेरिट किए गए हाइलाइट के बदली हुई चीज़ें देखें

सूडो-एलिमेंट की मदद से, एलिमेंट के खास हिस्सों को स्टाइल में ढाला जा सकता है. झूठे एलिमेंट को हाइलाइट करने के लिए, दस्तावेज़ के वे हिस्से होते हैं जिन पर "चुना गया" स्टेटस मौजूद होता है. साथ ही, उपयोगकर्ता को यह स्टेटस दिखाने के लिए, उन्हें "हाइलाइट किया गया" के तौर पर स्टाइल किया जाता है. उदाहरण के लिए, ::selection, ::spelling-error, ::grammar-error, और ::highlight ऐसे छद्म-एलिमेंट हैं.

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

नियमों के इनहेरिटेंस और प्राथमिकता को बेहतर तरीके से समझने के लिए, इनहेरिट किए गए हाइलाइट के स्यूडो एलिमेंट को देखा जा सकता है:

  1. नीचे दिए गए टेक्स्ट की जांच करें.

    मुझे अपने माता-पिता के हाइलाइट स्यूडो एलिमेंट की स्टाइल इनहेरिट की गई है. मुझे चुनें!

  2. ऊपर दिए गए टेक्स्ट का कोई हिस्सा चुनें.

  3. स्टाइल टैब में, नीचे की ओर स्क्रोल करके Inherited from ::selection pseudo of... सेक्शन देखें.

स्टाइल टैब में, इनहेरिट किया गया सेक्शन देखें.

कैस्केड लेयर देखें

कैस्केड लेयर की मदद से, अपनी सीएसएस फ़ाइलों को बेहतर तरीके से कंट्रोल किया जा सकता है. इससे, स्टाइल के हिसाब से अलग-अलग सेटिंग में कोई टकराव नहीं होता. यह बड़े कोडबेस, डिज़ाइन सिस्टम, और ऐप्लिकेशन में तीसरे पक्ष की स्टाइल को मैनेज करते समय काम का होता है.

कैस्केड लेयर देखने के लिए, अगले एलिमेंट की inspect. इसके बाद, एलिमेंट > स्टाइल खोलें.

स्टाइल टैब में, तीन कैस्केड लेयर और उनकी स्टाइल देखें: page, component, और base.

लेयर कैस्केड करें.

लेयर का क्रम देखने के लिए, लेयर के नाम या लेयर टॉगल करें. सीएसएस लेयर व्यू को टॉगल करें बटन पर क्लिक करें.

page लेयर की विशेषता सबसे ज़्यादा होती है. इसलिए, एलिमेंट का बैकग्राउंड हरा होता है.

किसी पेज को प्रिंट मोड में देखने के लिए:

  1. कमांड मेन्यू खोलें.
  2. Rendering टाइप करना शुरू करें और Show Rendering चुनें.
  3. Emulat CSS Media ड्रॉप-डाउन के लिए, प्रिंट करें चुनें.

कवरेज टैब की मदद से, इस्तेमाल और इस्तेमाल न होने वाले सीएसएस देखें

कवरेज टैब से पता चलता है कि पेज असल में किस सीएसएस का इस्तेमाल करता है.

  1. Command+Shift+P (Mac) या Control+Shift+P (Windows, Linux, ChromeOS) दबाएं. इसके अलावा, निर्देश मेन्यू खोलने के लिए DevTools पर फ़ोकस किया जा रहा है.

  2. coverage टाइप करना शुरू करें.

    निर्देश मेन्यू से कवरेज टैब खोल रही हूँ.

  3. कवरेज दिखाएं को चुनें. इसके बाद, आपको कवरेज टैब दिखेगा.

    कवरेज टैब.

  4. इंस्ट्रुमेंटिंग कवरेज शुरू करें और पेज को फिर से लोड करें. फिर से लोड करें पर क्लिक करें. पेज फिर से लोड होता है और कवरेज टैब से यह जानकारी मिलती है कि ब्राउज़र से लोड होने वाली हर फ़ाइल से, कितने सीएसएस (और JavaScript) का इस्तेमाल किया गया है.

    इस बारे में खास जानकारी कि सीएसएस (और JavaScript) का कितना इस्तेमाल और इस्तेमाल नहीं हुआ है.

    हरे रंग से, इस्तेमाल किए गए सीएसएस का पता चलता है. लाल रंग, इस्तेमाल नहीं किए गए सीएसएस को दिखाता है.

  5. किसी सीएसएस फ़ाइल पर क्लिक करके, आप ऊपर दी गई झलक में यह देख सकते हैं कि सीएसएस फ़ाइल किस सीएसएस का इस्तेमाल करती है.

    इस्तेमाल किए गए और इस्तेमाल नहीं किए गए सीएसएस का लाइन-दर-लाइन ब्रेकडाउन.

    स्क्रीनशॉट में, devsite-google-blue.css की लाइन 55 से 57 और 65 से 67 तक की लाइनों का इस्तेमाल किया गया है. वहीं, 59 से 63 तक की लाइनों का इस्तेमाल किया गया है.

प्रिंट झलक मोड हर हाल में चालू करें

Docs को प्रिंट झलक मोड में ज़बरदस्ती लगाएं देखें.

सीएसएस कॉपी करें

स्टाइल टैब के एक ही ड्रॉप-डाउन मेन्यू से, अलग-अलग सीएसएस के नियम, एलान, प्रॉपर्टी, वैल्यू को कॉपी किया जा सकता है

इसके अलावा, JavaScript सिंटैक्स में सीएसएस प्रॉपर्टी को कॉपी किया जा सकता है. अगर CSS-in-JS लाइब्रेरी का इस्तेमाल किया जा रहा है, तो यह विकल्प आपके लिए काम का है.

सीएसएस को कॉपी करने के लिए:

  1. कोई एलिमेंट चुनें.
  2. एलिमेंट > स्टाइल टैब में, किसी सीएसएस प्रॉपर्टी पर राइट क्लिक करें. सीएसएस ड्रॉप-डाउन मेन्यू कॉपी करें.

  3. ड्रॉप-डाउन मेन्यू से, इनमें से कोई एक विकल्प चुनें:

    • एलान कॉपी करें. सीएसएस सिंटैक्स में प्रॉपर्टी और उसकी वैल्यू को कॉपी करता है: css property: value;
    • प्रॉपर्टी को कॉपी करें. सिर्फ़ property का नाम कॉपी किया जाता है.
    • वैल्यू कॉपी करें. सिर्फ़ value को कॉपी किया जाता है.
    • नियम कॉपी करें. सीएसएस के पूरे नियम को कॉपी करता है: css selector[, selector] { property: value; property: value; ... }
    • एलान को JS के तौर पर कॉपी करें. JavaScript के सिंटैक्स में प्रॉपर्टी और उसकी वैल्यू को कॉपी करता है: js propertyInCamelCase: 'value'
    • सभी एलान कॉपी करें. सीएसएस के नियम में सभी प्रॉपर्टी और उनकी वैल्यू कॉपी करता है: css property: value; property: value; ...

    • सभी एलानों को JS के तौर पर कॉपी करें. JavaScript सिंटैक्स में सभी प्रॉपर्टी और उनकी वैल्यू कॉपी करता है: ```js propertyInCamelCase: 'value', propertyInCamelCase: 'value', ...

    • सीएसएस में किए गए सभी बदलाव कॉपी करें. सभी एलानों में, स्टाइल टैब में किए गए बदलावों को कॉपी किया जाता है.

    • कैलकुलेट की गई वैल्यू देखें. यह आपको कैलकुलेट किए गए टैब पर ले जाता है.

सीएसएस बदलें

इस सेक्शन में, एलिमेंट > स्टाइल में सीएसएस को बदलने के सभी तरीके बताए गए हैं.

इसके अलावा, आपके पास ये काम करने का विकल्प भी होता है:

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

एलान के क्रम से किसी एलिमेंट के स्टाइल पर असर पड़ता है, इसलिए अलग-अलग तरीकों से एलान जोड़े जा सकते हैं:

आपको किस वर्कफ़्लो का इस्तेमाल करना चाहिए? ज़्यादातर स्थितियों में, हो सकता है कि आप इनलाइन जानकारी वाले वर्कफ़्लो का इस्तेमाल करना चाहें. इनलाइन एलानों में बाहरी सूचनाओं की तुलना में ज़्यादा खास बात होती है. इसलिए, इनलाइन वर्कफ़्लो यह पक्का करता है कि एलिमेंट में बदलाव आपकी उम्मीद के मुताबिक लागू हों. खासियत के बारे में ज़्यादा जानने के लिए, सिलेक्टर टाइप देखें.

अगर किसी एलिमेंट की स्टाइल को डीबग किया जा रहा है और आपको खास तौर पर यह जांचना है कि अलग-अलग जगहों पर किसी एलान को परिभाषित करने पर क्या होता है, तो दूसरे वर्कफ़्लो का इस्तेमाल करें.

इनलाइन एलान जोड़ें

इनलाइन एलान जोड़ने के लिए:

  1. कोई एलिमेंट चुनें.
  2. स्टाइल टैब में, element.style सेक्शन के ब्रैकेट के बीच क्लिक करें. कर्सर फ़ोकस करता है, जिससे आपको टेक्स्ट लिखने में मदद मिलती है.
  3. प्रॉपर्टी का नाम डालें और Enter दबाएं.

  4. उस प्रॉपर्टी के लिए कोई मान्य वैल्यू डालें और Enter दबाएं. DOM ट्री में, यह देखा जा सकता है कि एलिमेंट में style एट्रिब्यूट जोड़ा गया है.

    इनलाइन एलान जोड़े जा रहे हैं.

    स्क्रीनशॉट में, चुने गए एलिमेंट पर margin-top और background-color प्रॉपर्टी लागू की गई हैं. डीओएम ट्री में, एलिमेंट के style एट्रिब्यूट में मौजूद एलान देखे जा सकते हैं.

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

किसी मौजूदा स्टाइल नियम में एलान जोड़ने के लिए:

  1. कोई एलिमेंट चुनें.
  2. स्टाइल टैब में, उस स्टाइल नियम के ब्रैकेट के बीच में क्लिक करें जिसमें आपको एलान जोड़ना है. कर्सर फ़ोकस करता है, ताकि आप टेक्स्ट लिख सकें.
  3. प्रॉपर्टी का नाम डालें और Enter दबाएं.
  4. उस प्रॉपर्टी के लिए कोई मान्य वैल्यू डालें और Enter दबाएं.

एलान की वैल्यू बदलना.

स्क्रीनशॉट पर, स्टाइल नियम को border-bottom-style:groove का नया एलान मिलता है.

एलान का नाम या वैल्यू बदलना

एलान के नाम या वैल्यू को बदलने के लिए, उसके नाम या वैल्यू पर दो बार क्लिक करें. वैल्यू को तेज़ी से 0.1, 1, 10 या 100 यूनिट तक बढ़ाने या कम करने के लिए, शॉर्टकट के लिए कीबोर्ड शॉर्टकट की मदद से गिनती की जा सकने वाली वैल्यू बदलें देखें.

कीबोर्ड शॉर्टकट की मदद से, गिनती की जा सकने वाली वैल्यू बदलें

किसी एलान की गिने जा सकने वाली वैल्यू में बदलाव करते समय, font-size जैसे कीबोर्ड शॉर्टकट का इस्तेमाल करके, वैल्यू को एक तय रकम तक बढ़ाया जा सकता है. इसके लिए, इन कीबोर्ड शॉर्टकट का इस्तेमाल किया जा सकता है:

  • Option+Up (Mac) या Alt+Up (Windows, Linux) में 0.1 तक बढ़ाएं.
  • वैल्यू को 1 से बदलने के लिए ज़्यादा या अगर मौजूदा वैल्यू -1 से 1 के बीच है, तो 0.1 तक.
  • 10 तक बढ़ाने के लिए, Shift+ऊपर दबाएं.
  • वैल्यू को 100 से बढ़ाने के लिए, Shift+Command+Up (Mac) या Control+Shift+Page Up (Windows, Linux) का इस्तेमाल करें.

कम करने की सुविधा भी काम करती है. बस पहले बताए गए अप के हर इंस्टेंस को डाउन से बदलें.

लंबाई के मान बदलें

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

लंबाई की इकाई बदलने के लिए:

  1. इकाई के नाम पर कर्सर घुमाएं और देखें कि वह अंडरलाइन हो गई है.

  2. ड्रॉप-डाउन से कोई इकाई चुनने के लिए इकाई के नाम पर क्लिक करें.

लंबाई की वैल्यू बदलने के लिए:

  1. यूनिट वैल्यू पर कर्सर घुमाएं और देखें कि आपका पॉइंटर एक हॉरिज़ॉन्टल डबल-हेड ऐरो में बदल गया है.

  2. वैल्यू को बढ़ाने या घटाने के लिए, उसे हॉरिज़ॉन्टल तौर पर खींचें और छोड़ें.

वैल्यू को 10 तक कम या ज़्यादा करने के लिए, खींचते समय Shift को दबाकर रखें.

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

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

  1. DOM ट्री में एलिमेंट चुनें.
  2. .cls पर क्लिक करें.
  3. नई क्लास जोड़ें बॉक्स में क्लास का नाम डालें.
  4. Enter दबाएं.

एलिमेंट क्लास सेक्शन.

हल्के और गहरे रंग वाली थीम को एम्युलेट करें और अपने-आप गहरे रंग वाला मोड चालू करें

अपने-आप गहरे रंग वाले मोड को टॉगल करने या उपयोगकर्ता की पसंद के मुताबिक हल्के या गहरे रंग वाली थीम चुनने के लिए:

  1. एलिमेंट > स्टाइल टैब में, रेंडरिंग के सामान्य एम्युलेशन को टॉगल करें.रेंडरिंग के सामान्य इम्यूलेशन को टॉगल करें पर क्लिक करें. रेंडरिंग के सामान्य एम्युलेशन को टॉगल करें.

  2. ड्रॉप-डाउन सूची से इनमें से कोई एक चुनें:

    • preferences-color-scheme: लाइट को चुनें. इससे पता चलता है कि उपयोगकर्ता को हल्के रंग वाली थीम पसंद है.
    • prefers-color-scheme: डार्क थीम को चुनें. इससे पता चलता है कि उपयोगकर्ता को गहरे रंग वाली थीम पसंद है.
    • अपने-आप गहरे रंग वाला मोड. आपके पेज को गहरे रंग वाले मोड में दिखाता है, भले ही आपने उसे लागू न किया हो. इसके अलावा, prefers-color-scheme को dark पर अपने-आप सेट करता है.

यह ड्रॉप-डाउन, सीएसएस मीडिया फ़ीचर prefers-color-scheme को एम्युलेट करने और रेंडरिंग टैब में, अपने-आप गहरे रंग वाले मोड चालू करने के विकल्पों का शॉर्टकट है.

क्लास को टॉगल करें

किसी एलिमेंट पर क्लास को चालू या बंद करने के लिए:

  1. DOM ट्री में एलिमेंट चुनें.
  2. एलिमेंट क्लास सेक्शन खोलें. एलिमेंट में क्लास जोड़ना देखें. नई क्लास जोड़ें बॉक्स के नीचे, वे सभी क्लास दिखती हैं जिन्हें इस एलिमेंट पर लागू किया जा रहा है.
  3. आपको जिस क्लास को चालू या बंद करना है उसके बगल में मौजूद चेकबॉक्स को टॉगल करें.

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

स्टाइल का नया नियम जोड़ने के लिए:

  1. कोई एलिमेंट चुनें.
  2. स्टाइल का नया नियम पर क्लिक करें स्टाइल का नया नियम.. DevTools element.style नियम के नीचे एक नया नियम डालता है.

नया स्टाइल नियम जोड़ा जा रहा है.

स्क्रीनशॉट पर, DevTools स्टाइल का नया नियम पर क्लिक करने के बाद, h1.devsite-page-title स्टाइल नियम जोड़ता है.

वह स्टाइल शीट चुनें जिसमें नियम जोड़ना है

नया स्टाइल रूल जोड़ते समय, नया स्टाइल नियम स्टाइल का नया नियम. पर क्लिक करके रखें. इससे आपको यह चुनने में मदद मिलेगी कि किस स्टाइल शीट में स्टाइल नियम जोड़ना है.

कोई स्टाइल शीट चुनी जा रही है.

एलान को टॉगल करें

किसी एक एलान को चालू या बंद करने के लिए:

  1. कोई एलिमेंट चुनें.
  2. स्टाइल टैब में, एलान को तय करने वाले नियम पर कर्सर घुमाएं. हर एलान के बगल में चेकबॉक्स दिखते हैं.
  3. एलान के बगल में मौजूद चेकबॉक्स पर सही का निशान लगाएं या हटाएं. किसी एलान को हटाने पर, DevTools उसे हटा देता है. इससे पता चलता है कि अब वह चालू नहीं है.

एलान को टॉगल किया जा रहा है.

स्क्रीनशॉट में, चुने गए मौजूदा एलिमेंट के लिए color प्रॉपर्टी को टॉगल करके बंद किया गया है.

ऐनिमेशन के दौरान, ::view-transition के सूडो एलिमेंट में बदलाव करें

ऐनिमेशन में इससे जुड़ा सेक्शन देखें.

ज़्यादा जानकारी के लिए, 'ट्रांज़िशन एपीआई' के साथ आसान और बेहतर ट्रांज़िशन देखें.

ग्रिड एडिटर की मदद से, ग्रिड आइटम और उनके कॉन्टेंट को अलाइन करना

सीएसएस ग्रिड की जांच करें में इससे जुड़ा सेक्शन देखें.

कलर पिकर की मदद से रंग बदलें

कलर पिकर की मदद से, एचडी और बिना एचडी वाले कलर की जांच करने और उन्हें डीबग करने का तरीका जानें.

ऐंगल घड़ी की मदद से ऐंगल की वैल्यू बदलें

कोण की घड़ी, सीएसएस प्रॉपर्टी की वैल्यू में <angle> बदलने के लिए जीयूआई देती है.

कोण घड़ी खोलने के लिए:

  1. ऐंगल की जानकारी देने वाला एलिमेंट चुनें.

  2. स्टाइल टैब में, transform या background का वह एलान ढूंढें जिसे आपको बदलना है. ऐंगल की वैल्यू के बगल में मौजूद, ऐंगल की झलक वाले बॉक्स पर क्लिक करें.

    ऐंगल की झलक.

    -5deg और 0.25turn की बाईं ओर मौजूद छोटी घड़ियां, ऐंगल की झलक दिखाती हैं.

  3. कोण वाली घड़ी खोलने के लिए, झलक पर क्लिक करें.

    ऐंगल घड़ी.

  4. ऐंगल क्लॉक सर्कल पर क्लिक करके ऐंगल की वैल्यू बदलें या ऐंगल की वैल्यू को 1 तक बढ़ाने / घटाने के लिए अपने माउस को स्क्रोल करें.

  5. ऐंगल की वैल्यू बदलने के लिए और भी कीबोर्ड शॉर्टकट उपलब्ध हैं. स्टाइल पैनल में कीबोर्ड शॉर्टकट में ज़्यादा जानकारी पाएं.

शैडो एडिटर की मदद से, बॉक्स और टेक्स्ट के शैडो को बदलना

शैडो एडिटर, text-shadow और box-shadow सीएसएस एलानों को बदलने के लिए जीयूआई देता है.

शैडो एडिटर की मदद से शैडो बदलने के लिए:

  1. शैडो एलान वाला एलिमेंट चुनें. उदाहरण के लिए, अगला एलिमेंट चुनें.

  2. स्टाइल टैब में, text-shadow या box-shadow एलान के बगल में शैडो परछाई. आइकॉन ढूंढें.

    शैडो वाले आइकॉन.

  3. शैडो एडिटर खोलने के लिए शैडो आइकॉन पर क्लिक करें.

    शैडो एडिटर.

  4. शैडो की प्रॉपर्टी बदलना:

    • टाइप (सिर्फ़ box-shadow के लिए). आउटसेट या इनसेट चुनें.
    • X और Y ऑफ़सेट. नीले बिंदु को खींचें और छोड़ें या वैल्यू तय करें.
    • धुंधला करें. स्लाइडर को खींचें या कोई वैल्यू डालें.
    • प्रेड (सिर्फ़ box-shadow के लिए). स्लाइडर खींचें या कोई मान तय करें.

  5. एलिमेंट पर लागू किए गए बदलावों पर नज़र रखें.

ईज़िंग एडिटर की मदद से, ऐनिमेशन और ट्रांज़िशन टाइम में बदलाव करें

ईज़िंग एडिटर, transition-timing-function और animation-timing-function की वैल्यू बदलने के लिए जीयूआई देता है.

ईज़िंग एडिटर खोलने के लिए:

  1. टाइमिंग फ़ंक्शन का एलान करने वाला एलिमेंट चुनें, जैसे कि इस पेज पर <body> एलिमेंट.
  2. स्टाइल टैब में जाकर, transition-timing-function, animation-timing-function एलान या transition शॉर्टहैंड प्रॉपर्टी के बगल में मौजूद बैंगनी रंग का आसान. आइकॉन ढूंढें. ईज़िंग एडिटर का आइकॉन.
  3. ईज़िंग एडिटर खोलने के लिए आइकॉन पर क्लिक करें: ईज़िंग एडिटर.

समय में बदलाव करने के लिए, प्रीसेट का इस्तेमाल करें

एक क्लिक से समय में बदलाव करने के लिए, ईज़िंग एडिटर में प्रीसेट का इस्तेमाल करें:

  1. ईज़िंग एडिटर में कीवर्ड वैल्यू सेट करने के लिए, पिकर बटन में से किसी एक पर क्लिक करें:
    • लीनियर लीनियर बटन.
    • आसानी से सीखें &#39;ईज़-इन-आउट&#39; बटन.
    • ईज़-इन बटन. में आसानी से खोजें
    • आसानी से खोजें ईज़-आउट बटन.

  2. प्रीसेट स्विचर में, इनमें से किसी एक प्रीसेट को चुनने के लिए, डिवाइस को बाईं तरफ़ ले जाएं. या डिवाइस को दाईं तरफ़ ले जाएं. बटन पर क्लिक करें:

समय कीवर्ड पहले से सेट की गई तारीख की सीमा क्यूबिक बेज़ियर
ease-in-out इन आउट, साइन cubic-bezier(0.45, 0.05, 0.55, 0.95)
इन आउट, क्वाड्रेटिक cubic-bezier(0.46, 0.03, 0.52, 0.96)
इन आउट, क्यूबिक cubic-bezier(0.65, 0.05, 0.36, 1)
फ़ास्ट आउट, स्लो इन cubic-bezier(0.4, 0, 0.2, 1)
इन आउट, बैक cubic-bezier(0.68, -0.55, 0.27, 1.55)
ease-in इन, साइन cubic-bezier(0.47, 0, 0.75, 0.72)
इन, क्वाड्रेटिक cubic-bezier(0.55, 0.09, 0.68, 0.53)
इन, क्यूब cubic-bezier(0.55, 0.06, 0.68, 0.19)
अंदर, वापस जाएं cubic-bezier(0.6, -0.28, 0.74, 0.05)
फ़ास्ट आउट, लीनियर इन cubic-bezier(0.4, 0, 1, 1)
ease-out बाहर, साइन cubic-bezier(0.39, 0.58, 0.57, 1)
आउट, क्वाड्रेटिक cubic-bezier(0.25, 0.46, 0.45, 0.94)
बाहर, क्यूबिक cubic-bezier(0.22, 0.61, 0.36, 1)
लीनियर आउट, स्लो इन cubic-bezier(0, 0, 0.2, 1)
आउट, बैक cubic-bezier(0.18, 0.89, 0.32, 1.28)

पसंद के मुताबिक समयावधि कॉन्फ़िगर करें

टाइमिंग फ़ंक्शन के लिए पसंद के मुताबिक वैल्यू सेट करने के लिए, लाइनों पर मौजूद कंट्रोल पॉइंट का इस्तेमाल करें:

  • लीनियर फ़ंक्शन के लिए, कंट्रोल पॉइंट जोड़ने के लिए लाइन पर कहीं भी क्लिक करें और उसे खींचें और छोड़ें. बिंदु निकालने के लिए दो बार क्लिक करें.

    रैखिक फलन का नियंत्रण बिंदु खींचना.

  • क्यूबिक बेज़ियर फ़ंक्शन के लिए, कंट्रोल के किसी एक पॉइंट को खींचें और छोड़ें.

    क्यूबिक बेज़ियर फ़ंक्शन के कंट्रोल पॉइंट खींचें और छोड़ें.

किसी भी बदलाव से, एडिटर में सबसे ऊपर मौजूद झलक में बॉल ऐनिमेशन ट्रिगर हो जाता है.

(प्रयोग के तौर पर) सीएसएस में किए गए बदलावों को कॉपी करें

इस प्रयोग के चालू होने पर स्टाइल टैब, आपके सीएसएस बदलावों को हरे रंग से हाइलाइट करता है.

सीएसएस के किसी एक एलान को कॉपी करने के लिए, हाइलाइट किए गए एलान पर कर्सर घुमाएं और कॉपी करें पर टैप करें. कॉपी करें बटन पर क्लिक करें.

सीएसएस के एलान में किए गए बदलाव को कॉपी करें.

सभी एलानों में, सीएसएस में किए गए सभी बदलावों को एक साथ कॉपी करने के लिए, किसी भी एलान पर राइट क्लिक करें. इसके बाद, सीएसएस के सभी बदलाव कॉपी करें को चुनें.

सीएसएस में किए गए सभी बदलावों को कॉपी करें.

इसके अलावा, बदलाव टैब की मदद से, किए गए बदलावों को ट्रैक किया जा सकता है.