सीएसएस में 10 टेक्स्ट-स्टाइलिंग गुण

कैस्केडिंग स्टाइल शीट्स (सीएसएस) वर्णन करती है कि एचटीएमएल स्क्रीन पर तत्वों को कैसे प्रदर्शित करता है। CSS कोड की कुछ पंक्तियों के साथ कई वेब पेजों के लेआउट को नियंत्रित कर सकता है।

CSS में स्वरूपण गुण हैं जो पाठ की रिक्ति, उपस्थिति और संरेखण को प्रभावित करते हैं। यहां कुछ गुण दिए गए हैं जिनका उपयोग आप अपने ऐप्लिकेशन पृष्ठों पर टेक्स्ट को शैलीबद्ध करने के लिए कर सकते हैं।

1. पाठ का रंग

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

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

<शरीर>
<एच 1>मेरा रंग बदलोएच 1>
<एच 2>मेरा रंग बदलोएच 2>
<h3>मेरा रंग बदलोh3>
<एच 4>मेरा रंग बदलोएच 4>
शरीर>

सीएसएस इस तरह दिखेगा:

एच 1 {
रंग: नारंगी;
}
एच 2 {
रंग: #ff6600;
}
h3 {
रंग: rgb(255, 102, 0);
}
एच 4 {
रंग: एचएसएल(24, 100%, 50%);
}

और स्टाइल वाला टेक्स्ट ऐसा दिखाई देगा:

2. पृष्ठभूमि का रंग

आप उपयोग कर सकते हैं पृष्ठभूमि का रंग संपत्ति बनाने के लिए आकर्षक पृष्ठभूमि. निम्न शीर्षकों के लिए भिन्न पृष्ठभूमि सेट करने के लिए इसका उपयोग करें:

<शरीर>
<एच 1>मेरी पृष्ठभूमि का रंग बदलेंएच 1>
<एच 2>मेरी पृष्ठभूमि का रंग बदलेंएच 2>
<h3>मेरी पृष्ठभूमि का रंग बदलेंh3>
<एच 4>मेरी पृष्ठभूमि का रंग बदलेंएच 4>
शरीर>

निम्नलिखित सीएसएस के साथ:

एच 1 {
पृष्ठभूमि का रंग: नारंगी;
}
एच 2 {
पृष्ठभूमि का रंग: #009900;
}
h3 {
पृष्ठभूमि का रंग: rgb(204, 0, 0);
}
एच 4 {
पृष्ठभूमि का रंग: एचएसएल(60, 100%, 50%);
}

जब आपका ब्राउज़र इस पेज को रेंडर करता है, तो यह कुछ इस तरह दिखाई देगा:

3. पाठ्य संरेखण

पाठ संरेखित संपत्ति पाठ के क्षैतिज संरेखण को सेट करती है। यह मान हो सकता है बाएं, सही, केंद्र, या न्यायोचित ठहराना.

औचित्य मूल्य पाठ की प्रत्येक पंक्ति को फैलाता है, इसलिए वे सभी दाएं और बाएं मार्जिन पर समान चौड़ाई लेते हैं। इन चार मानों का पता लगाने के लिए निम्न नमूना कोड का उपयोग करें:

<शरीर>
<एच 1>मुझे बाएँ संरेखित करेंएच 1>
<एच 2> मुझे सही संरेखित करेंएच 2>
<h3>मुझे केंद्र संरेखित करेंh3>
<पीकक्षा="पूर्व4"><मज़बूत>मुझे संरेखित करेंमज़बूत>: लोरेम इप्सम डोलर सिट एमेट, कॉन्सेक्टेटुर एडिपिसिंग एलीट। Etiam semper diam और erat pulvinar, और pulvinar Felis blandit। वेस्टिबुलम वुल्टपट टेलस डायम, परिणाम ग्रेविडा लिबरो रोनकस यूट।पी>
<पी><मज़बूत>कोई संरेखण नहीं मज़बूत>: लोरेम इप्सम डोलर सिट एमेट, कॉन्सेक्टेटुर एडिपिसिंग एलीट। Etiam semper diam और erat pulvinar, और pulvinar Felis blandit। वेस्टिबुलम वुल्टपट टेलस डायम, परिणाम ग्रेविडा लिबरो रोनकस यूट।पी>
शरीर>

विभिन्न संरेखण लागू करने के लिए निम्न CSS का उपयोग करें:

एच 1 {
पाठ संरेखित: बाएं;
}
एच 2 {
पाठ संरेखित: सही;
}
h3 {
पाठ संरेखित: केंद्र;
}
.ex4{
पाठ संरेखित: न्यायोचित ठहराना;
}

ब्राउज़र में, यह ऐसा दिखाई देगा:

4. पाठ की दिशा

पाठ की दिशा संपत्ति पाठ की दिशा को परिभाषित करती है। गुणों का उपयोग करके दिशा को परिभाषित करें आरटीएल (दाएं से बाएं) या एल टीआर (बाएं से दायां)। ये दोनों निर्दिष्ट करते हैं कि आप टेक्स्ट को किस दिशा में प्रवाहित करना चाहते हैं।

उदाहरण के लिए, प्रयोग करें आरटीएल हिब्रू या अरबी जैसी दाईं से बाईं ओर लिखी जाने वाली भाषाओं के साथ काम करते समय। आप उपयोग करते हैं एल टीआर अंग्रेजी की तरह बाएं से दाएं लिखी जाने वाली भाषाओं के लिए।

आइए इसे नीचे दिए गए कोड से समझाते हैं:

<शरीर>
<डिव>
<पीकक्षा='पूर्व1'>यह पैराग्राफ दाएं से बाएं जाता है। कर्सर
 जब आप पर अधिक जानकारी टाइप करते हैं तो दाएँ से बाएँ जाता है
 पृष्ठ।पी>
<पीपहचान="पूर्व 2">यह पैराग्राफ बाएं से दाएं जाता है। कर्सर चलता है
 जब आप पृष्ठ पर अधिक जानकारी टाइप करते हैं तो लिखने के लिए बाएं से!पी>
डिव>
शरीर>

इसके साथ सीएसएस के साथ:

.ex1 {
दिशा: आरटीएल;
}
#पूर्व2 {
दिशा: एल टीआर;
}

अंतिम परिणाम कुछ इस तरह दिखेगा:

5. पाठ सजावट

text-decoration संपत्ति पाठ पर सजावटी रेखाओं की उपस्थिति निर्धारित करती है। यह के लिए आशुलिपि है टेक्स्ट-डेकोरेशन-लाइन,पाठ-सजावट-रंग,पाठ-सजावट-शैली, और पाठ-सजावट-मोटाई संपत्ति। यदि आप लिंक वाले तत्वों पर संपत्ति नहीं रखना चाहते हैं, तो इसका उपयोग करें पाठ-सजावट: कोई नहीं;

आपको सामान्य पाठ को रेखांकित करने से बचना चाहिए क्योंकि वह शैली आमतौर पर एक लिंक को इंगित करती है। निम्नलिखित चित्रण कोड में कुछ उदाहरण दिखाता है:

<शरीर>
<एच 1>ओवरलाइन पाठ सजावटएच 1>
<एच 2>लाइन-थ्रू टेक्स्ट सजावटएच 2>
<h3>पाठ सजावट को रेखांकित करेंh3>
<पीकक्षा="पूर्व">पाठ सजावट को ओवरलाइन और रेखांकित करें।पी>
<पी><एhref="डिफ़ॉल्ट एएसपी">यह एक कड़ी हैए>पी>
शरीर>

आप इस सीएसएस के साथ विभिन्न सजावट प्रभाव लागू कर सकते हैं:

एच 1 {
text-decoration: overline;
}
एच 2 {
text-decoration: के माध्यम से रेखा;
}
h3 {
text-decoration: रेखांकन;
}
पी।पूर्व {
text-decoration: overlineरेखांकन;
}
ए {
text-decoration: कोई नहीं;
}

और वे कुछ इस तरह प्रदर्शित करेंगे:

6. पाठ रूपांतरण

पाठ बदलना संपत्ति अक्षरों के प्रकट होने के मामले के प्रकार को निर्दिष्ट करती है। यह अपरकेस या लोअरकेस अक्षरों में हो सकता है। आप इसका उपयोग प्रत्येक शब्द के पहले अक्षर को कैपिटलाइज़ करने के लिए भी कर सकते हैं:

निम्न उदाहरण दिखाता है कि कोड में इसे कैसे करें:

<शरीर>
<एच 1>टेक्स्ट-ट्रांसफ़ॉर्म संपत्ति के उदाहरणएच 1>
<पीकक्षा="अपरकेस">यह वाक्य अपरकेस में है।पी>
<पीकक्षा="लोअरकेस">यह वाक्य छोटे अक्षरों में है।पी>
<पीकक्षा="पूंजीकरण">इस पाठ को कैपिटलाइज़ करें।पी>
शरीर>

सीएसएस फ़ाइल:

पी।अपरकेस {
पाठ बदलना: अपरकेस;
}
पी.लोअरकेस {
पाठ बदलना: छोटे;
}
पीपूंजीकरण {
पाठ बदलना: मूल बनाना;
}

निम्नलिखित परिणाम के साथ:

7. पत्र अंतराल

पत्र अंतराल संपत्ति पाठ में अक्षरों के बीच की जगह निर्दिष्ट करती है। निम्न उदाहरण दिखाता है कि विभिन्न रिक्ति शैलियों को कैसे निर्दिष्ट किया जाए।

<शरीर>
<एच 1>लेटर-स्पेसिंग के उदाहरणएच 1>
<एच 2>यह शीर्षक 1 हैएच 2>
<h3>यह शीर्षक 2 हैh3>
शरीर>

अपनी CSS फ़ाइल में पिक्सेल, या माप की अन्य इकाइयों का उपयोग करें:

एच 2 {
पत्र अंतराल: 7पिक्सल;
}
h3 {
पत्र अंतराल: -2 पीएक्स;
}

और परिणामी पाठ को बढ़ाया या निचोड़ा जाएगा:

8. शब्द रिक्ति

शब्द-अंतराल संपत्ति पाठ में शब्दों के बीच की जगह को निर्दिष्ट करती है। शब्दों के बीच स्पेस के लिए ब्राउज़र की एक मानक लंबाई होती है, लेकिन आप अपनी लंबाई सेट कर सकते हैं। निम्न उदाहरण दिखाता है कि शब्दों के बीच की जगह को कैसे बढ़ाया या घटाया जाए:

<शरीर>
<एच 1>वर्ड-स्पेसिंग प्रॉपर्टी के उदाहरणएच 1>
<पी>सामान्य शब्द रिक्ति।पी>
<पीकक्षा="पूर्व 1">बड़ा शब्द रिक्ति।पी>
<पीकक्षा="पूर्व 2">छोटा शब्द अंतर।पी>
शरीर>

इस सीएसएस का उपयोग करना:

पी.ex1 {
शब्द-अंतराल: 1रेम;
}
पी.ex2 {
शब्द-अंतराल: -0.3रेम;
}

आप शब्द रिक्ति के प्रभाव को स्पष्ट रूप से देख सकते हैं:

9. ऊंची लाईन

ऊंची लाईन गुण पैराग्राफ में पंक्तियों के बीच की दूरी को निर्दिष्ट करता है। अधिकांश ब्राउज़रों में मानक और डिफ़ॉल्ट पंक्ति की ऊँचाई लगभग 110% से 120% है। निम्न कोड दिखाता है कि इसे कैसे बदलना है:

<शरीर>
<एच 1>रेखा-ऊंचाई का उपयोग करनाएच 1>
<पी>
 मानक रेखा-ऊंचाई।
 मानक रेखा-ऊंचाई।
पी>
<पीकक्षा="छोटा">
 छोटी छोटी रेखा-ऊंचाई।
 छोटी रेखा-ऊंचाई
पी>
<पीकक्षा="बड़ा">
 बड़ी रेखा-ऊंचाई।
 बड़ी रेखा-ऊंचाई।
पी>
शरीर>

निम्नलिखित सीएसएस का उपयोग करना:

पी।छोटा {
ऊंची लाईन: 0.7;
}
पी।बड़ा {
ऊंची लाईन: 1.8;
}

आप प्रत्येक पैराग्राफ में प्रत्येक पंक्ति के बीच परिणाम देख सकते हैं:

10. पाठ की छाया

पाठ की छाया संपत्ति पाठ पर छाया लागू करती है। आपको क्षैतिज छाया और लंबवत छाया निर्दिष्ट करनी होगी। पाठ की छाया रंग और धुंधला त्रिज्या शामिल कर सकते हैं। आइए बताते हैं कि निम्नलिखित कोड के साथ:

<शरीर>
 <एच 1>उदाहरणकापाठ की छायाप्रभाव.एच 1>
 <एच 1कक्षा="उदा">पाठ की छायासाथरंगएच 1>
 <एच 1कक्षा="ex2">पाठ की छायासाथकलंकप्रभाव.एच 1>
शरीर>

इस सीएसएस के साथ:

एच1 {
 टेक्स्ट-शैडो: 2px 2px;
}
.ex1 {
 पाठ-छाया: 2px 2px नारंगी;
}
.ex2 {
 पाठ-छाया: 2px 2px 10px लाल;
}

कुछ असामान्य और रोचक प्रभाव पैदा करेगा:

CSS टेक्स्ट-स्टाइलिंग गुण क्यों सीखें?

CSS आधुनिक वेब डिज़ाइन की रीढ़ है। चाहे इसके वैनिला रूप में या चौखटों में, CSS गुणों का मूल कार्य समान है। पाठ स्वरूपण गुणों में महारत हासिल करने से आप आकर्षक और पठनीय उपयोगकर्ता इंटरफ़ेस बना सकते हैं।

CSS, CSS3 का नवीनतम संस्करण एनिमेशन से लेकर बहु-स्तंभ लेआउट तक नई अवधारणाओं का परिचय देता है। ये अवधारणाएँ पेशेवर अनुप्रयोगों और दस्तावेज़ों को बनाना आसान बनाती हैं।