टेलविंड सीएसएस का उपयोग करके टेक्स्ट को स्टाइल करने के लिए गाइड

यह आलेख निम्नलिखित रूपरेखा का उपयोग करके टेलविंड में पाठ को स्टाइल करने के लिए एक मार्गदर्शिका प्रदान करेगा:

• टेक्स्ट एलाइन क्लास का उपयोग करें
• पाठ्य सामग्री को रंग प्रदान करें
• विभिन्न फ़ॉन्ट परिवारों का उपयोग करें
• पाठ को रेखांकित सजावट प्रदान करें
• पाठ में इंडेंटेशन प्रदान करें

टेलविंड में टेक्स्ट एलाइन क्लास का उपयोग कैसे करें?

पाठ्य सामग्री को स्टाइल करते समय, पाठ की स्थिति सजावट जितनी ही महत्वपूर्ण है। यदि टेक्स्ट ठीक से संरेखित नहीं है, तो वेबपेज का पूरा डिज़ाइन अजीब लगेगा। टेलविंड में टेक्स्ट को संरेखित करने के लिए, निम्न वर्ग का उपयोग किया जाता है:

संरेखण विकल्पों में शामिल हैं ' केंद्र ', ' बाएं ', ' सही ', और ' औचित्य ”। आइए नीचे दिए गए प्रदर्शन का उपयोग करके इनमें से प्रत्येक संरेखण को समझें:

उपरोक्त कोड की व्याख्या इस प्रकार है:

• चार ' पी तत्वों को एक लाइन ब्रेक द्वारा बनाया और अलग किया जाता है।
• चार पी तत्वों का पाठ 'का उपयोग करके एक विशिष्ट स्थिति में संरेखित किया गया है' पाठ्य संरेखण} ' कक्षा।
• “ बीजी-{रंग}-{संख्या} 'वर्ग प्रत्येक के लिए पृष्ठभूमि रंग प्रदान करता है' पी ' तत्व।

उत्पादन

नीचे दिए गए आउटपुट में देखा जा सकता है कि प्रत्येक संरेखण वर्ग टेक्स्ट स्थिति को कैसे प्रभावित करता है। आप देख सकते हैं कि पहले तत्व का पाठ केंद्र के रूप में संरेखित है, दूसरे का दाएँ, तीसरे का बाएँ के रूप में, और चौथा तत्व उचित पाठ दिखा रहा है:

टेलविंड में टेक्स्ट सामग्री को रंग कैसे प्रदान करें?

रंग किसी तत्व की पाठ्य सामग्री को स्टाइल करने में महत्वपूर्ण भूमिका निभाता है। यदि उपयुक्त रंग का चयन नहीं किया गया है, तो पाठ को पढ़ना कठिन हो सकता है। यह लेआउट के डिज़ाइन पर नकारात्मक प्रभाव डालेगा। टेलविंड में टेक्स्ट का रंग सेट करने के लिए, नीचे दिए गए वर्ग का उपयोग करें:

उपरोक्त परिभाषित सिंटैक्स में, उपयोगकर्ता को रंग का नाम और उसके बाद एक संख्या प्रदान करनी होगी जो निर्दिष्ट रंग की छाया के लिए जिम्मेदार होगी।

नीचे दिए गए प्रदर्शन में तीन हैं ' पी 'वे तत्व जिन्हें विभिन्न टेक्स्ट रंग वर्गों का उपयोग करके स्टाइल किया गया है:

उपरोक्त कोड में प्रयुक्त कक्षाएं इस प्रकार हैं:

• पहला ' पी 'तत्व को' का उपयोग करके बैंगनी रंग प्रदान किया गया है टेक्स्ट-{रंग}-{संख्या} ' कक्षा।
• दूसरा और तीसरा'' पी 'तत्वों को एक ही विधि का उपयोग करके लाल और हरा रंग प्रदान किया जाता है।
• “ पाठ-केंद्र वर्ग पाठ सामग्री को तत्व के केंद्र में रखता है।

उत्पादन

नीचे दिए गए आउटपुट से यह स्पष्ट है कि टेक्स्ट का डिफ़ॉल्ट काला रंग text-{color}-{number} वर्ग का उपयोग करके निर्दिष्ट रंगों में बदल दिया गया है:

टेलविंड में विभिन्न फ़ॉन्ट परिवारों का उपयोग कैसे करें?

किसी टेक्स्ट तत्व के फ़ॉन्ट का उपयोग किसी विशिष्ट टेक्स्ट पर ज़ोर देने के लिए किया जा सकता है। प्रत्येक फ़ॉन्ट की अपनी विशेषताएँ होती हैं। टेलविंड में किसी तत्व का फ़ॉन्ट बदलने के लिए, निम्न वर्ग का उपयोग करें:

टेलविंड तीन डिफ़ॉल्ट फ़ॉन्ट परिवार प्रदान करता है अर्थात ' बिना ', ' सेरिफ़ ', और ' मोनो ”। इनमें से प्रत्येक फ़ॉन्ट परिवार की एक अलग फ़ॉन्ट शैली है।

इसी प्रकार, ' फ़ॉन्ट वजन} क्लास का उपयोग टेक्स्ट को बोल्ड, हल्का या सामान्य बनाने के लिए किया जा सकता है। आइए टेलविंड में विभिन्न फ़ॉन्ट परिवारों को फ़ॉन्ट-वेट प्रदान करने के लिए एक प्रदर्शन का उपयोग करें:

कोड के लिए स्पष्टीकरण:

• तीन ' पी 'तत्व' मोनो ',' सर्फ़ 'और' सैन्स 'फ़ॉन्ट परिवारों द्वारा प्रदान किए जाते हैं' फुहारा परिवार} ' कक्षा।
• इसी प्रकार, तीन '' पी 'तत्वों को' के रूप में प्रदान किया गया है एक्स्ट्राबोल्ड ', ' सेमीबोल्ड ', और यह ' अतिरिक्त प्रकाश 'फ़ॉन्ट वज़न' का उपयोग करके फ़ॉन्ट वजन} ' कक्षा।
• ये सभी तत्व 'का उपयोग करते हैं पाठ-केंद्र 'वर्ग जो पाठ को तत्व के केंद्र में रखता है।

उत्पादन

दिए गए आउटपुट से पता चलता है कि प्रत्येक ' पी 'तत्व का एक अलग फ़ॉन्ट परिवार और फ़ॉन्ट भार है:

टेलविंड में टेक्स्ट को अंडरलाइन सजावट कैसे प्रदान करें?

टेक्स्ट तत्वों को विभिन्न प्रकार की अंडरलाइन जोड़कर भी स्टाइल किया जा सकता है। इसका उपयोग किसी पाठ के किसी भाग पर ज़ोर देने के लिए किया जा सकता है। किसी टेक्स्ट तत्व को रेखांकित करने के लिए, निम्न वर्ग का उपयोग किया जाता है:

शब्द ' रेखांकन ' तत्व को एक बुनियादी रेखांकन प्रदान करता है और ' सजावट-{शैली} क्लास का उपयोग अंडरलाइन को विभिन्न शैलियाँ प्रदान करने के लिए किया जाता है। आइए नीचे दिए गए प्रदर्शन का उपयोग करके इसे समझें:

उपरोक्त कोड में, चार हैं ' पी 'तत्व जो' द्वारा प्रदान किए जाते हैं ठोस ', ' दोहरा ', ' लहरदार ', और ' छितराया हुआ स्टाइल में रेखांकित किया गया है।

आउटपुट:

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

टेलविंड में टेक्स्ट को इंडेंटेशन कैसे प्रदान करें?

किसी भी टेक्स्ट दस्तावेज़ में, टेक्स्ट सामग्री को प्रारूपित करने के लिए इंडेंटेशन का उपयोग किया जाता है। टेलविंड निम्नलिखित वर्ग का उपयोग करके पाठ सामग्री को इंडेंटेशन प्रदान करने के लिए एक डिफ़ॉल्ट वर्ग भी प्रदान करता है:

उपरोक्त परिभाषित सिंटैक्स में चौड़ाई पाठ सामग्री को प्रदान किए गए इंडेंटेशन मार्जिन के आकार के लिए ज़िम्मेदार है।

आइए दो टेक्स्ट तत्वों को अलग-अलग इंडेंटेशन मान निर्दिष्ट करके स्टाइल करें और परिणाम देखें:

उपरोक्त कोड में, दो ' पी 'चौड़ाई के इंडेंटेशन के साथ प्रदान किया गया है' 4 ' और ' 28 ' क्रमश। पहला तत्व 'का उपयोग करके ऊपर-नीचे पैडिंग के साथ भी प्रदान किया गया है' पी-12 ' कक्षा।

आउटपुट:

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

यह सब टेलविंड का उपयोग करके टेक्स्ट को स्टाइल करने के बारे में है।

निष्कर्ष

टेलविंड टेक्स्ट तत्वों को स्टाइल करने के लिए विभिन्न कक्षाएं प्रदान करता है। टेलविंड में टेक्स्ट को स्टाइल करने के लिए, उपयोगकर्ता 'का उपयोग कर सकता है' टेक्स्ट-{रंग}-{संख्या} ', ' पाठ्य संरेखण} ', ' रेखांकित सजावट-{शैली} ', और ' इंडेंट-{चौड़ाई} ' कक्षा। इस आलेख ने टेलविंड में विभिन्न कक्षाओं का उपयोग करके पाठ को स्टाइल करने के लिए एक मार्गदर्शिका प्रदान की है।