CSS टेक्स्ट

CSS पाठ विशेषताएँ पाठ के रूप को परिभाषित कर सकती हैं।

पाठ विशेषता के माध्यम से, आप पाठ का रंग, अक्षरों की दूरी, पाठ के अनुरूपता, पाठ को सुसंचार करना और इत्यादि बदल सकते हैं।

टेक्स्ट इंडेंट

वेब पृष्ठ पर अनुच्छेद की पहली पंक्ति को सुसंचार करना, यह सबसे आम लेखक फॉर्मेटिंग प्रभाव है।

CSS ने text-indent विशेषताइस विशेषता को आसानी से लेकर लिया जा सकता है।

इसके द्वारा text-indent विशेषता का उपयोग करके, सभी एलिमेंट की पहली पंक्ति को एक दिया गया लंबाई तक सुसंचार किया जा सकता है, यह लंबाई नकारात्मक मान भी हो सकती है।

इस विशेषता का सबसे आम उपयोग पैराग्राफ के पहले वाक्य को सिकोड करना है, नीचे के नियम सभी पैराग्राफों के पहले वाक्य को 5 em से सिकोड करेगा:

p {text-indent: 5em;}

ध्यान:आमतौर पर, आप टेक्स्ट-इंडेंट को सभी ब्लॉक एलेमेंटों पर लगा सकते हैं, लेकिन इसे रैंक एलेमेंटों, जैसे चित्रों जैसे प्रतिस्थापन एलेमेंटों पर लगाया जा सकता नहीं है। हालांकि, यदि एक ब्लॉक एलेमेंट (जैसे पैराग्राफ) के पहले वाक्य में एक चित्र हो, तो वह उस वाक्य के बाकी पाठ के साथ गतिशील होता है।

सूचना:यदि आप एक रैंकवाले एलेमेंट के पहले वाक्य को 'सिकोड' करना चाहते हैं, तो बाईं इंडेंट या बाहरी मार्गिंग का उपयोग करके इस तरह का प्रभाव पैदा करें।

नकारात्मक मूल्य का उपयोग करें

text-indent को नकारात्मक मूल्य भी सेट किया जा सकता है। इस तकनीक का उपयोग करके, कई रोचक प्रभाव प्राप्त किए जा सकते हैं, जैसे 'हैंगिंग इंडेंट', जहां पहला वाक्य एलेमेंट के बाकी हिस्से के बाईं ओर सस्ता होता है:

p {text-indent: -5em;}

हालांकि, text-indent को नकारात्मक मूल्य रखने पर ध्यान रखना चाहिए, यदि आप किसी पैराग्राफ को नकारात्मक मूल्य देते हैं, तो पहले वाक्य के कुछ पाठ ब्राउज़र के बाईं बॉर्डर से बाहर निकल सकते हैं। इस तरह के प्रदर्शन समस्याओं को दूर करने के लिए, नकारात्मक सिकोड के लिए एक बाहरी मार्गिंग या कुछ अंतराल सेट करने की सिफारिश की जाती है:

p {text-indent: -5em; padding-left: 5em;}

प्रतिशत वाले इकाइयों का उपयोग करें

text-indent को सभी लंबाई इकाइयों का उपयोग किया जा सकता है, जिसमें प्रतिशत भी शामिल है।

प्रतिशत को सिकोड वाले एलेमेंट के पिता एलेमेंट की आकार के अनुसार होना चाहिए। अन्यथा, यदि आप सिकोड वाला पैराग्राफ 20% रखते हैं, तो प्रभावित एलेमेंट के पहले वाक्य को पिता एलेमेंट के आकार का 20% से सिकोड किया जाएगा।

इस उदाहरण में, सिकोड वाला पैराग्राफ पारग्राफ के पिता एलेमेंट के 20% है, अर्थात 100 पिक्सल:

div {width: 500px;}
p {text-indent: 20%;}
<div>
<p>यह एक पैराग्राफ है</p>
</div>

विरासत

text-indent विशेषता को विरासत कर सकती है, इसलिए नीचे के टैग को सोचिए:

div#outer {width: 500px;}
div#inner {text-indent: 10%;}
p {width: 200px;}
<div id="outer">
<div id="inner">कुछ पाठ. कुछ पाठ. कुछ पाठ.</div>
<p>यह एक पैराग्राफ है.</p>
</div>
</div>

इस टैग में के पैराग्राफ भी 50 पिक्सल से सिकोड होंगे, क्योंकि यह पैराग्राफ inner पीडीवी एलेमेंट के सिकोड वाले id को विरासत करता है।

स्तरांकित

text-align एक बुनियादी गुण है, जो एक एलिमेंट मेंटेक्स्ट पंक्तिएक दूसरे के अनुकूलन तरीके। इसके पहले 3 मान सीधे हैं, लेकिन चौथे और पांचवें मान थोड़ा जटिल हैं。

मान left, right और center योग्यता बाईं, दायाँ और बीच अनुकूलन करने के लिए इस्तेमाल की जाती हैं।

पश्चिमी भाषाएँ दांए से बाईं ओर पढ़ी जाती हैं, इसलिए text-align का डिफ़ॉल्ट मान left है। टेक्स्ट बाईं किनारे पर जुड़ता है और दायाँ किनारा तेज़ाबाज़ी होता है (जिसे 'बाईं से दांए' टेक्स्ट कहा जाता है)। हिब्रू और अरबी जैसी भाषाओं के लिए, text-align का डिफ़ॉल्ट मान right है, क्योंकि इन भाषाओं से दांए से बाईं ओर पढ़ी जाती हैं। अनुमान के अनुसार, center इसलिए प्रत्येक टेक्स्ट पंक्ति को एलिमेंट में बीच रखता है क्योंकि इसे बीच रखता है。

सूचना:ब्लॉक या तालिका एलिमेंट को बीच रखने के लिए, इन एलिमेंटों पर उचित रूप से बाईं और दायाँ बाह्य किनारा अंतर को सेट करना है。

text-align:center और <CENTER>

आपको लग सकता है कि text-align:center और <CENTER> एलिमेंट के काम के लिए एकसी है, लेकिन वास्तव में वे बहुत अलग हैं。

<CENTER> न केवल टेक्स्ट को प्रभावित करता है, बल्कि पूरे एलिमेंट को बीच रखता है। text-align एलिमेंट के अनुकूलन को नियंत्रित नहीं करता, बल्कि केवल आंतरिक सामग्री को प्रभावित करता है। एलिमेंट से एक दूसरे के ओर नहीं जाता, बल्कि केवल उसमें टेक्स्ट को प्रभावित करता है。

justify

अंतिम स्तरांकित गुण justify है。

दोनों तरफ के अनुकूलन टेक्स्ट में, टेक्स्ट पंक्तियों के दोनों ओर को पैरेंट एलिमेंट के अंतर्गत सीमा पर रखा जाता है। फिर, शब्द और अक्षरों के बीच के अंतर को समायोजित किया जाता है, ताकि प्रत्येक पंक्ति की लंबाई एकसी हो। आपको लग सकता है कि दोनों तरफ के अनुकूलन टेक्स्ट प्रिंटिंग क्षेत्र में बहुत आम है, आपको नज़र आए होगा。

ध्यान दें कि, दोनों तरफ के अनुकूलन टेक्स्ट को भरने के लिए, टेक्स्ट को फ़ैलाने के तरीके को यूजर एजेंट (नहीं की CSS) को निर्धारित करना है। विस्तार के लिए, देखें CSS text-align गुण संदर्भ पृष्ठ。

शब्द अंतर

word-spacing गुणशब्द (वर्ण) के बीच के मानक अंतर को बदल सकते हैं। इसका डिफ़ॉल्ट मान normal और 0 मान से एकजूट है。

word-spacing गुण एक सकारात्मक या नकारात्मक लंबाई मान स्वीकार करता है। यदि एक सकारात्मक लंबाई मान दिया जाता है, तो शब्दों के बीच का अंतर बढ़ाया जाएगा। word-spacing को एक नकारात्मक मान देने से इसे निकटावर कर दिया जाएगा:

p.spread {word-spacing: 30px;}
p.tight {word-spacing: -0.5em;}
<p class="spread">
यह एक पैराग्राफ है। शब्दों के बीच के अंतर को बढ़ाया जाएगा。
</p>
<p class="tight">
This is a paragraph. The spaces between words will be decreased.
</p>

उदाहरण TIY: शब्द अंतर (शब्द अंतर) बढ़ाएं या कम करें

टिप्पणी:यदि आप CSS के 'शब्द' (word) के विषय में गहरी समझ चाहते हैं, तो यहाँ देखें CSS word-spacing अभियोगता संदर्भ पृष्ठ。

अक्षर अंतर

letter-spacing अभियोगताword-spacing से की भिन्नता यह है कि अक्षर अंतर प्रतियोगिता अक्षरों या अक्षरों के बीच की दूरी को संसाधित करती है。

word-spacing अभियोगता के समान, letter-spacing अभियोगता के मान लंबाई के सभी मानों में है। डिफ़ॉल्ट कीवार्ड 'normal' (यह letter-spacing:0 से समान है) है। इनपुट की लंबाई मान अक्षरों के बीच की दूरी को निर्धारित करता है:

h1 {letter-spacing: -0.5em}
h4 {letter-spacing: 20px}
<h1>This is header 1</h1>
<h4>This is header 4</h4>

उदाहरण TIY: अक्षरों के अंतर को नियंत्रित करें

अक्षर परिवर्तन

text-transform अभियोगतापाठ के बड़े-छोटे रूप को संसाधित करने के लिए यह अभियोगता 4 मूल्यों में है:

  • none
  • uppercase
  • lowercase
  • capitalize

डिफ़ॉल्ट मूल्य none पाठ को कोई संशोधन नहीं करता, और स्रोत दस्तावेज़ में मौजूद बड़े-छोटे रूप को उपयोग करेगा। इसके नाम के अनुसार, uppercase और lowercase पाठ को पूर्ण बड़े रूप और पूर्ण छोटे रूप में बदलेगा। अंत में, capitalize केवल प्रत्येक शब्द के पहले अक्षर को बड़े रूप में बदलेगा。

एक अभियोगता के रूप में, text-transform प्रतियोगिता बहुत कम महत्वपूर्ण हो सकती है, लेकिन अगर आप अचानक सभी h1 एलिमेंट को बड़े रूप में बदलना चाहते हैं, तो यह प्रतियोगिता बहुत उपयोगी होती है। आपको सभी h1 एलिमेंट की सामग्री को अलग से संशोधित नहीं करना होता है, बस text-transform का उपयोग करके इस संशोधन को पूरा करेंगे:

h1 {text-transform: uppercase}

text-transform का उपयोग करने से दो पहलूओं का लाभ होता है। पहला, इस संशोधन को पूरा करने के लिए केवल एक सरल नियम लिखना होता है, और h1 एलिमेंट को संशोधित नहीं करना होता है। दूसरा, अगर आप भविष्य में सभी बड़े-छोटे रूप को मूल बड़े-छोटे रूप में बदलना चाहते हैं, तो संशोधन को आसानी से पूरा कर सकते हैं।

उदाहरण TIY: पाठ में अक्षरों के बड़े छोटे रूप को नियंत्रित करें

पाठ सजावट

आगे, हम चर्चा करेंगे text-decoration प्रतियोगितायह एक बहुत ही रोचक विशेषता है, जो कई बहुत ही रोचक व्यवहार प्रदान करती है.

text-decoration में 5 मान हैं:

  • none
  • underline
  • overline
  • line-through
  • blink

अपेक्षाकृत, underline एलिमेंट को नीचे की लाइन लगाता है, जैसा कि HTML में U एलिमेंट की तरह. overline का काम पूरी तरह से उल्टा है, जो पाठ के ऊपर एक लाइन डालता है. line-through मान पाठ के मध्य में एक सार्वभौमिक लाइन डालता है, जो HTML में S और strike एलिमेंट के बराबर है. blink लाइन पाठ को चमकाता है, जैसा कि Netscape द्वारा समर्थित अभिव्यक्त चमकाव टैग की तरह.

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

a {text-decoration: none;}

ध्यान:यदि इस तरह के नियम को स्पष्ट रूप से लिंक की नीचे की लाइन को हटाने के लिए इस्तेमाल किया जाता है, तो अंक के साथ और सामान्य पाठ के बीच दृश्यीय रूप से एकमात्र अंतर है रंग (कम से कम डिफ़ॉल्ट रंग इस तरह है, लेकिन पूरी तरह से रंग का अंतर नहीं हो सकता है).

एक नियम में अनेक डिकॉरेशनों को जोड़ा जा सकता है. यदि आप चाहते हैं कि सभी हिंदसारी लिंक नीचे और ऊपर की लाइन दोनों हों, तो नियम इस तरह होगा:

a:link a:visited {text-decoration: underline overline;}

हालांकि, यदि दो अलग डिकॉरेशनों को एक ही एलिमेंट से मेल खाते हैं, तो जीतने वाले नियम का मान पूरी तरह से दूसरे मान को प्रतिस्थापित कर देता है. दिए गए नियम को ध्यान में रखते हुए:

h2.stricken {text-decoration: line-through;}
h2 {text-decoration: underline overline;}

दिए गए नियम के लिए, सभी class के रूप में stricken के h2 एलिमेंट केवल एक सार्वभौमिक डिकॉरेशन है, नहीं कि नीचे और ऊपर की लाइन, क्योंकि text-decoration मान को प्रतिस्थापित करता है, नहीं कि जमा करता है。

खाली अक्षरों का संचालन

white-space विशेषतायह उपयोगकर्ता एजेंट को स्रोत दस्तावेज़ में खाली अक्षरों, लाइन बदलने और tab अक्षरों के संबंध में संचालन प्रभावित करता है.

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

<p>This     paragraph has    many
    spaces           in it.</p>

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

p {white-space: normal;}

उपरोक्त नियमों के अनुसार, ब्राउज़र को सामान्य तरीके से टेक्स्ट को व्यवहार करना है: अतिरिक्त व्हाइटस्पेस को गिरा दें. इस मान को दिया गया तो, पंक्ति विभाजक (इस्पात) को एक स्पेस में बदला जाएगा, एक पंक्ति में कई स्पेस की सीक्वेंस एक स्पेस में बदली जाएगी.

उदाहरण TIY: white-space: normal

मान pre

लेकिन, यदि white-space को pre सेट किया गया है, इस एट्रिब्यूट से प्रभावित एलिमेंट में व्हाइटस्पेस का व्यवहार अलग है, यह व्यवहार XHTML के pre एलिमेंट के रूप में है; व्हाइटस्पेस अनदेखा नहीं किया जाएगा.

यदि white-space एट्रिब्यूट का मान pre है, तो ब्राउज़र अतिरिक्त स्पेस को ध्यान में रखेगा, यहां तक कि इसके रूप में लॉग जाएगा. इसके रूप में, और केवल इसके रूप में, किसी भी एलिमेंट को pre एलिमेंट के रूप में लगाया जा सकता है.

उदाहरण TIY: white-space: pre

ध्यान:परीक्षण के अनुसार, IE 7 और उससे पहले के संस्करण के ब्राउज़र इस मान को समर्थित नहीं करते, इसलिए उपरोक्त उदाहरण को देखने के लिए कृपया नॉन-IE ब्राउज़र का उपयोग करें.

मान nowrap

इसके विपरीत मान nowrap है, जो एलिमेंट में टेक्स्ट के लिए पंक्ति बदलने से रोकता है, जब तक कि br एलिमेंट का उपयोग नहीं किया जाता है. CSS में nowrap का उपयोग करना HTML 4 में <td nowrap> के रूप में एक टेबल को नहीं बदलने के लिए बहुत जैसा है, लेकिन white-space मान किसी भी एलिमेंट पर लगाया जा सकता है.

उदाहरण TIY: white-space: nowrap

मान pre-wrap और pre-line

CSS2.1 में pre-wrap और pre-line के मान शामिल किए गए, जो पहले की संस्करणों में CSS में नहीं थे. इन मानों का काम देखने वालों को व्हाइटस्पेस हैंडलिंग को बेहतर नियंत्रित करने देना है.

यदि एलिमेंट का white-space सेट किया गया है pre-wrap, तो इस एलिमेंट में टेक्स्ट में व्हाइटस्पेस सीक्वेंस बनाए रखा जाएगा, लेकिन टेक्स्ट पंक्ति सामान्य तरीके से बदल जाएगी. यदि इस मान को सेट किया गया है, स्रोत टेक्स्ट में पंक्ति विभाजक और बनाया गया पंक्ति विभाजक भी बनाए रखा जाएगा. pre-line इसके विपरीत है, जो सामान्य टेक्स्ट में प्रयोग की जाने वाली तरीके से व्हाइटस्पेस सीक्वेंस को मिलाएगा, लेकिन पंक्ति विभाजक को बनाए रखेगा.

TIY उदाहरण : white-space: pre-wrap

TIY उदाहरण : white-space: pre-line

ध्यान:हमने IE7 और FireFox2.0 ब्राउज़र में ऊपर दिए गए दोनों उदाहरणों का परीक्षण किया, लेकिन परिणाम यह था कि मान pre-wrap और pre-line का अच्छा समर्थन नहीं मिला।

समीक्षा

नीचे दिए गए तालिका में white-space गुण के व्यवहार का समावेश है:

मान खाली चिह्न बदलाव चिह्न स्वचालित बदलाव
pre-line जोड़ें रखें स्वीकार करें
सामान्य जोड़ें नज़र अनदाज़ करें स्वीकार करें
nowrap जोड़ें नज़र अनदाज़ करें अस्वीकार करें
pre रखें रखें अस्वीकार करें
pre-wrap रखें रखें स्वीकार करें

लेख दिशा

यदि आप अंग्रेजी पुस्तक पढ़ रहे हैं, तो आप दांए से बाईं ओर और ऊपर से नीचे लेख को पढ़ते हैं, यह अंग्रेजी का प्रवाह दिशा है।हालांकि, सभी भाषाएँ इस तरह नहीं हैं।हम जानते हैं कि पुराना चीनी लेख दांए से बाईं ओर लिखा जाता था, और इसके साथ ही हिब्रू और अरबी जैसी भाषाएँ भी।CSS2 ने एक गुण को शामिल किया जो इसकी दिशा को वर्णित करता है。

direction गुणयह गुण ब्लॉक स्तम्भ के लेख के लिखाई दिशा, तालिका स्तम्भ लेआउट, सामग्री के स्तम्भ भीतर के लिखाई दिशा, और दोनों ओर से जस्ता लेख के अंतिम पंक्ति का स्थान को प्रभावित करता है。

टिप्पणी:अंतर्निहित एलिमेंट के लिए केवल तब जब unicode-bidi गुणdirection गुण को embed या bidi-override के रूप में सेट करने पर ही यह लागू होता है。

direction गुण के दो मान हैं: ltr और rtl।अधिकांश स्थितियों में डिफ़ॉल्ट मान ltr है जो दांए से बाईं ओर लेख दिखाता है।यदि दांए से दायं ओर लेख दिखाना है तो rtl मान का उपयोग करें。

CSS लेख उदाहरण:

संग्रह का रंग सेट करें
इस उदाहरण में देखा जाता है कि किस प्रकार से लेख का रंग सेट किया जाता है。
लेख के पृष्ठभूमि रंग सेट करें
इस उदाहरण में देखा जाता है कि किस प्रकार से एक भाग के लेख के पृष्ठभूमि रंग को सेट किया जाता है。
अक्षरों की दूरी निर्धारित करें
इस उदाहरण में देखा जाता है कि किस प्रकार से अक्षरों की दूरी को बढ़ाई या कम किया जाता है。
प्रतिशत से रेखादूरी सेट करें
इस उदाहरण में देखा जाता है कि किस प्रकार से पैराग्राफ में लेख की रेखादूरी को प्रतिशत मान के द्वारा सेट किया जाता है。
पिक्सल मान से रेखादूरी सेट करें
इस उदाहरण में देखा जाता है कि किस प्रकार से पैराग्राफ में लेख की रेखादूरी को पिक्सल मान के द्वारा सेट किया जाता है。
संख्या के द्वारा रेखादूरी सेट करें
इस उदाहरण में देखा जाता है कि किस प्रकार से पैराग्राफ में लेख की रेखादूरी को एक संख्या के द्वारा सेट किया जाता है。
लेख को जस्ता करें
इस उदाहरण में देखा जाता है कि किस प्रकार से लेख को जस्ता किया जाता है。
सजीते हुए लेख
लेख को सजाएं
टेक्स्ट इंडेंट
इस उदाहरण में देखा जाता है कि किस प्रकार से लेख के पहले पैराग्राफ को इंद्रनी किया जाता है。
लेख में अक्षरों को नियंत्रित करें
इस उदाहरण में देखा जाता है कि किस प्रकार से लेख में अक्षरों को नियंत्रित किया जाता है。
एलिमेंट में लेख के फलन को रोकें
इस उदाहरण में देखा जाता है कि किस प्रकार से एलिमेंट में लेख के फलन को रोका जाता है。
शब्दों के बीच की दूरी बढ़ाएं
इस उदाहरण में देखा जाता है कि किस प्रकार से पैराग्राफ में शब्दों के बीच की दूरी बढ़ाई जाती है。

CSS लेख संबंधी गुण

गुण वर्णन
रंग संग्रह का रंग सेट करें
direction टेक्स्ट के दिशा को नियंत्रित करें。
line-height लाइन हाई नियंत्रित करें।
letter-spacing अक्षर अंतर नियंत्रित करें。
text-align एलीमेंट में टेक्स्ट को जस्ता करें。
text-decoration टेक्स्ट में अलंकरण जोड़ें。
text-indent एलीमेंट के टेक्स्ट के पहले पंक्ति को इंडेंट करें。
text-shadow टेक्स्ट शैडो नियंत्रित करें।CSS2 में यह गुण है, लेकिन CSS2.1 में यह गुण नहीं बचा है。
text-transform एलीमेंट में अक्षरों को नियंत्रित करें。
unicode-bidi टेक्स्ट के दिशा को नियंत्रित करें。
white-space एलीमेंट में खाली जगह का इस्तेमाल करने के तरीके नियंत्रित करें。
word-spacing अक्षर अंतर नियंत्रित करें。