कम्प्यूटेड शैलियाँ और बॉक्स मॉडल निरीक्षक
किसी तत्व पर लागू होने वाली शैलियों को ठीक-ठीक समझने के लिए Computed पैनल और बॉक्स मॉडल आरेख का उपयोग करें।
कम्प्यूटेड शैलियाँ और बॉक्स मॉडल निरीक्षक, CoddyKit पर CSS Academy का एक निःशुल्क पाठ है। यह 4 में से 1वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह CSS Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
परिकलित शैलियों का पैनल
क्रोम DevTools → तत्व → परिकलित टैब, कैस्केड, विरासत और विशिष्टता के समाधान के बाद चयनित तत्व के हर CSS गुण का अंतिम, परिकलित मान दिखाता है। यह बताता है कि "वास्तव में क्या लागू है?", न कि "क्या लिखा गया था?"
बॉक्स मॉडल आरेख
परिकलित पैनल चयनित तत्व के लिए कंटेंट, पैडिंग, बॉर्डर और मार्जिन के आयाम दिखाने वाला इंटरैक्टिव बॉक्स मॉडल आरेख प्रदर्शित करता है। किसी भी आयाम पर क्लिक करके उसे निर्धारित करने वाले CSS नियम को हाइलाइट करें और शैलियाँ पैनल पर जाएँ।
परिकलित गुणों को फ़िल्टर करना
विशिष्ट परिकलित गुणों को जल्दी ढूँढने के लिए फ़िल्टर बॉक्स में टाइप करें। विरासत में मिले और ब्राउज़र-डिफ़ॉल्ट गुणों को शामिल करने के लिए "सभी दिखाएँ" चुनें। केवल गैर-डिफ़ॉल्ट गुण दिखाने के लिए इसे अचयनित करें — यह प्रासंगिक लागू शैलियों तक पहुँचने का सबसे छोटा रास्ता है।
विरासत की जाँच
परिकलित पैनल में धूसर रंग में दिखाए गए गुण किसी मूल तत्व से विरासत में मिले होते हैं। विरासत में मिले गुण पर क्लिक करके उस तत्व और नियम पर जाएँ जिसने उसे निर्धारित किया है; इससे मार्कअप में मूल तत्व की मैन्युअल जाँच किए बिना कैस्केड का पता लगाया जा सकता है।
शॉर्टहैंड विस्तार को समझना
margin: 16px 8px लिखने पर चार परिकलित मान बनते हैं: margin-top, margin-right, margin-bottom, margin-left। परिकलित पैनल हमेशा अलग-अलग लॉन्गहैंड गुण दिखाता है — यह असममित रिक्ति समस्याओं की जाँच के लिए उपयोगी है।
रंग प्रारूप रूपांतरण
परिकलित रंग मान हमेशा आरजीबी() या आरजीबीए() प्रारूप में होते हैं, चाहे उन्हें किसी भी तरीके से लिखा गया हो। प्रदर्शन प्रारूप (हेक्स, एचएसएल, आरजीबी) बदलने के लिए शैलियाँ पैनल में रंग स्वैच पर क्लिक करें। परिकलित पैनल हमेशा समाधान किया हुआ रंग दिखाता है।
फ़ॉन्ट मेट्रिक्स
यह जाँचने के लिए कि टाइपोग्राफ़ी टोकन सही तरीके से लागू हैं, परिकलित फ़ॉन्ट-आकार, फ़ॉन्ट-परिवार, पंक्ति-ऊँचाई और अक्षर-अंतराल का निरीक्षण करें। अनुरोधित फ़ॉन्ट लोड न हो पाने पर ब्राउज़र के वैकल्पिक फ़ॉन्ट परिकलित फ़ॉन्ट-परिवार में दिखाई देते हैं।
बॉक्स-साइज़िंग का प्रभाव
box-sizing: border-box में चौड़ाई के अंदर पैडिंग और बॉर्डर शामिल होते हैं; box-sizing: content-box (डिफ़ॉल्ट) में वे शामिल नहीं होते। DevTools में बॉक्स मॉडल आरेख लागू मॉडल को दर्शाता है — बॉक्स-साइज़िंग के व्यवहार की पुष्टि करने के लिए कंटेंट की चौड़ाई की तुलना कुल चौड़ाई से करें।
मार्जिन के मिलने की जाँच
ब्लॉक तत्वों के बीच लंबवत मार्जिन दोनों मानों में से बड़े मान में मिल जाते हैं। बॉक्स मॉडल आरेख प्रभावी मार्जिन दिखाता है — लिखे गए मानों से अलग मिलने वाले मार्जिन की पहचान करने के लिए इसका उपयोग लेआउट इंस्पेक्टर के साथ करें।
शैलियाँ पैनल में विशिष्टता
शैलियाँ पैनल तत्व को लक्षित करने वाले सभी नियमों को विशिष्टता के क्रम में दिखाता है। काट-रेखा वाले नियमों को ओवरराइड किया गया होता है। यह पता लगाने के लिए कि किसी गुण के विवाद में कौन-सा नियम जीतता है, शैलियाँ पैनल में सबसे ऊपर की ऐसी घोषणा देखें जिस पर काट-रेखा न हो।
बलपूर्वक शैलियाँ और उपयोगकर्ता एजेंट
ब्राउज़र की उपयोगकर्ता-एजेंट स्टाइलशीट के नियम शैलियाँ पैनल के सबसे नीचे "उपयोगकर्ता एजेंट स्टाइलशीट" लेबल के साथ दिखाई देते हैं। परिकलित पैनल उनके समाधान किए हुए मान दिखाता है। सभी ब्राउज़र में एक समान आधार स्थापित करने के लिए इन्हें CSS रीसेट या Normalize.css से रीसेट करें।
ज्ञान जाँच
परिकलित शैलियों का पैनल ऐसा क्या दिखाता है जो शैलियाँ पैनल नहीं दिखाता?
सारांश
परिकलित शैलियों का पैनल और बॉक्स मॉडल आरेख कैस्केड समाधान के बाद सभी CSS गुणों के अंतिम समाधान किए हुए मान दिखाते हैं। इनका उपयोग विरासत का पता लगाने, शॉर्टहैंड विस्तार की जाँच करने, बॉक्स-साइज़िंग की जाँच करने और किसी भी तत्व पर विशिष्टता के विवाद में जीतने वाले नियम की पहचान करने के लिए करें।
एआई शिक्षक के साथ CSS सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 40
- पाठ
- 159
अक्सर पूछे जाने वाले प्रश्न
क्या “कम्प्यूटेड शैलियाँ और बॉक्स मॉडल निरीक्षक” पाठ निःशुल्क है?
हाँ—“कम्प्यूटेड शैलियाँ और बॉक्स मॉडल निरीक्षक” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और CSS Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“कम्प्यूटेड शैलियाँ और बॉक्स मॉडल निरीक्षक” में मैं क्या सीखूँगा?
किसी तत्व पर लागू होने वाली शैलियों को ठीक-ठीक समझने के लिए Computed पैनल और बॉक्स मॉडल आरेख का उपयोग करें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ CSS Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या CSS Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर CSS Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 1वाँ पाठ है।
“कम्प्यूटेड शैलियाँ और बॉक्स मॉडल निरीक्षक” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस CSS Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर CSS Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- कम्प्यूटेड शैलियाँ और बॉक्स मॉडल निरीक्षक
- Flexbox और Grid के लिए लेआउट निरीक्षक
- CSS अवलोकन पैनल
- ऐनिमेशन और ट्रांज़िशन डीबगर