टेलविंड में आनुपातिक और सारणीबद्ध आंकड़ों का उपयोग कैसे करें?

हालाँकि, यह लेख दो विशिष्ट वर्गों पर विस्तार से चर्चा करेगा जो आनुपातिक आंकड़े और सारणीबद्ध आंकड़े हैं। इनका उपयोग टेलविंड में संख्यात्मक मानों को स्टाइल करने और संख्यात्मक डेटा को इस तरह से व्यवस्थित और प्रस्तुत करने के लिए किया जाता है जो दस्तावेज़ के डिज़ाइन के लिए आकर्षक हो।

यह लेख निम्नलिखित रूपरेखा का उपयोग करके टेलविंड सीएसएस में आनुपातिक और सारणीबद्ध आंकड़ों पर विस्तार से चर्चा करेगा:

• टेलविंड सीएसएस में आनुपातिक आंकड़ों का उपयोग कैसे करें?
• टेलविंड सीएसएस में सारणीबद्ध आंकड़ों का उपयोग कैसे करें?
• आनुपातिक और सारणीबद्ध आंकड़ों के बीच अंतर

टेलविंड सीएसएस में आनुपातिक आंकड़ों का उपयोग कैसे करें?

आनुपातिक आंकड़े वर्ग तत्व को एक सम्मेलन प्रदान करेगा जहां प्रत्येक संख्या की चौड़ाई समान नहीं होगी।

वाक्य - विन्यास

टेलविंड में आनुपातिक आंकड़ों का उपयोग करने का सिंटैक्स इस प्रकार है:

ऊपर दिए गए सिंटैक्स में, ' आनुपातिक-संख्याएँ आनुपातिक आंकड़ों का उपयोग करने के लिए तत्व को वर्ग प्रदान करना होगा।

आइए आनुपातिक आंकड़ों का एक व्यावहारिक उदाहरण देखें।

नीचे दिए गए कोड में, दो ' पी 'तत्व' में समाहित हैं डिव 'तत्व जो आनुपातिक आंकड़े वर्ग का उपयोग करता है:

ऊपर दिए गए कोड की व्याख्या इस प्रकार है:

• “ डिव 'तत्व' का उपयोग करता है आनुपातिक-संख्याएँ ” वह वर्ग जो संख्याओं पर आनुपातिक आंकड़ा गुण लागू करेगा।
• “ पाठ-केंद्र क्लास टेक्स्ट को तत्व के केंद्र में रखता है।
• “ बीजी-{रंग}-{संख्या} वर्ग तत्व के पृष्ठभूमि रंग के लिए जिम्मेदार है।
• “ टेक्स्ट-xl क्लास टेक्स्ट के लिए एक अतिरिक्त बड़ा फ़ॉन्ट आकार प्रदान करता है।
• अगला, दो ' पी 'तत्व विभिन्न संख्याओं से युक्त बनाए जाते हैं।

उत्पादन

आउटपुट में देखा जा सकता है कि दूसरे नंबर में ' पी 'तत्व की चौड़ाई पहले वाले की तुलना में थोड़ी बड़ी है। यह आनुपातिक आंकड़े वर्ग के कारण है:

टेलविंड सीएसएस में सारणीबद्ध आंकड़ों का उपयोग कैसे करें?

टेलविंड में सारणीबद्ध आंकड़े एक तत्व को सम्मेलन प्रदान करते हैं जहां प्रत्येक संख्या की चौड़ाई का आकार समान होता है। यह संख्याओं का एक सममित तालिका जैसा प्रतिनिधित्व बनाता है।

वाक्य - विन्यास

सारणीबद्ध आंकड़ों का उपयोग करने का सिंटैक्स इस प्रकार है:

ऊपर दिए गए सिंटैक्स में, ' सारणीबद्ध संख्याएँ सारणीबद्ध आंकड़ों का उपयोग करने के लिए तत्व को वर्ग प्रदान किया जाता है।

आइए देखें कि कैसे ' सारणीबद्ध संख्याएँ HTML दस्तावेज़ में संख्यात्मक मानों को प्रभावित करें। इस प्रदर्शन के लिए, दो ' पी 'संख्यात्मक मानों के साथ' बनाया और समाहित किया जाता है डिव 'तत्व जो सारणीबद्ध आंकड़े वर्ग का उपयोग करता है:

उपरोक्त कोड में, ' सारणीबद्ध संख्याएँ 'वर्ग' को प्रदान किया जाता है डिव 'वह तत्व जो बच्चे को सारणीबद्ध आकृतियों की शैली निर्दिष्ट करेगा' पी 'तत्व।

आउटपुट:

उपरोक्त आउटपुट में यह देखा जा सकता है कि अंकों की समान चौड़ाई के आकार के कारण दोनों तत्वों में संख्यात्मक मान पूरी तरह से संरेखित हैं।

बोनस जानकारी: टेलविंड सीएसएस में आनुपातिक और सारणीबद्ध आंकड़ों के बीच अंतर

आइए एक प्रदर्शन देखें जो संख्यात्मक मूल्यों पर सारणीबद्ध और आनुपातिक आंकड़ों के वर्गों के प्रभाव को अलग करता है। इस प्रदर्शन में, तत्वों को डिफ़ॉल्ट रूप से आनुपातिक आंकड़े वर्ग निर्दिष्ट किया जाएगा। इसके बाद, होवर स्थिति का उपयोग करके, तत्वों को सारणीबद्ध आंकड़े वर्ग सौंपा जाएगा:

उपरोक्त कोड में देखा जा सकता है कि ' डिव 'तत्व' के साथ प्रदान किया गया है आनुपातिक-संख्याएँ ”, जो कि डिफ़ॉल्ट परंपरा होगी जिसका संख्यात्मक मान अनुसरण करेंगे।

इसी तरह, 'के कारण होवर: सारणीबद्ध-संख्याएँ ' वर्ग, जब भी उपयोगकर्ता 'div' तत्व पर माउस कर्सर घुमाएगा तो संख्यात्मक मान सारणीबद्ध आंकड़े सम्मेलन का पालन करेंगे।

उत्पादन

दिए गए आउटपुट में, जब उपयोगकर्ता तत्व पर माउस घुमाता है तो संख्यात्मक मानों की चौड़ाई बदल जाती है। यह टेलविंड में आनुपातिक और सारणीबद्ध आंकड़ों के बीच दृश्य अंतर प्रदान करता है:

यह सब टेलविंड में आनुपातिक और सारणीबद्ध आंकड़ों के बारे में है।

निष्कर्ष

टेलविंड में आनुपातिक आंकड़ों का उपयोग करने के लिए, ' आनुपातिक-संख्याएँ 'वर्ग का प्रयोग किया जाता है। आनुपातिक आंकड़े उस परंपरा का उपयोग करते हैं जहां प्रत्येक संख्यात्मक मान का एक अलग चौड़ाई आकार होता है। टेलविंड में सारणीबद्ध आंकड़ों का उपयोग करने के लिए, ' सारणीबद्ध संख्याएँ 'वर्ग का प्रयोग किया जाता है। सारणीबद्ध आंकड़े उस परिपाटी का उपयोग करते हैं जहां प्रत्येक संख्यात्मक मान की चौड़ाई का आकार समान होता है। इस लेख में टेलविंड में आनुपातिक और सारणीबद्ध आंकड़ों का उपयोग करने की प्रक्रिया प्रदान की गई है।