Computer >> कंप्यूटर >  >> प्रोग्रामिंग >> CSS

CSS का उपयोग करके टेक्स्ट को फ़ॉर्मेट करना

<घंटा/>

CSS में टेक्स्ट को फॉर्मेट करने के लिए, आप टेक्स्ट का रंग, टेक्स्ट डेकोरेशन, लाइन की ऊंचाई, टेक्स्ट की दिशा, टेक्स्ट अलाइनमेंट आदि को बदल सकते हैं।

आइए कुछ उदाहरण देखें -

पाठ संरेखण

CSS का उपयोग करके टेक्स्ट अलाइनमेंट सेट करने के लिए, टेक्स्ट-एलाइन प्रॉपर्टी का उपयोग करें। संपत्ति के संभावित मूल्य निम्नलिखित हैं -

text-align: left|right|center|justify|initial|inherit;

उदाहरण

आइए टेक्स्ट संरेखण सेट करने के लिए एक उदाहरण देखें -

<!DOCTYPE html>
<html>
<head>
<style>
.demo {
   -webkit-columns: auto auto; /* Chrome, Safari, Opera */
   -moz-columns: auto auto; /* Firefox */
   columns: auto auto;
   text-align: justify;
}
</style>
</head>
<body>
<h1>Machine Learning</h1>
<div class="demo">
Today’s Artificial Intelligence (AI) has far surpassed the hype of blockchain and quantum computing. This is due to the fact that huge computing resources are easily available to the common man. The developers now take advantage of this in creating new Machine Learning models and to re-train the existing models for better performance and results. The easy availability of High Performance Computing (HPC) has resulted in a sudden increased demand for IT professionals having Machine Learning skills.
</div>
</body>
</html>

आउटपुट

CSS का उपयोग करके टेक्स्ट को फ़ॉर्मेट करना

लाइन की ऊंचाई

लाइन की ऊंचाई निर्धारित करने के लिए, लाइन-ऊंचाई संपत्ति का उपयोग करें। निम्नलिखित गुण मान हैं -

line-height: normal|number|length|initial|inherit;

उदाहरण

<!DOCTYPE html>
<html>
<head>
<style>
div {
   line-height: 1.9;
}
</style>
</head>
<body>
<h1>Demo Heading</h1>
<div>
<p>This is demo text.<br>
This is another demo text.
</p>
</div>
</body>
</html>

आउटपुट

CSS का उपयोग करके टेक्स्ट को फ़ॉर्मेट करना

पाठ सजावट

CSS में टेक्स्ट डेकोरेशन के लिए, टेक्स्ट-डेकोरेशन प्रॉपर्टी को शॉर्टहैंड प्रॉपर्टी के रूप में निम्नलिखित प्रॉपर्टीज के लिए इस्तेमाल करें -

text-decoration-line
text-decoration-color
text-decoration-style

उदाहरण

आइए CSS में टेक्स्ट डेकोरेशन के लिए एक उदाहरण देखें -

<!DOCTYPE html>
<html>
<head>
<style>
.demo {
   text-decoration: overline underline;
}
</style>
</head>
<body>
<h1>Details</h1>
<p class="demo">Examination Center near ABC College.</p>
<p class="demo2">Exam begins at 9AM.</p>
</body>
</html>

आउटपुट

CSS का उपयोग करके टेक्स्ट को फ़ॉर्मेट करना


  1. CSS का उपयोग करके मीडिया डिपेंडेंट स्टाइल शीट बनाना

    मीडिया पर निर्भर स्टाइलशीट केवल मूल स्टाइलशीट हैं, लेकिन केवल HTML दस्तावेज़ पर लागू होती हैं, जब मीडियाटाइप डिवाइस प्रकार से मेल खाता है जिस पर दस्तावेज़ दिखाई देता है। हम निम्नलिखित तरीकों से मीडिया पर निर्भर स्टाइलशीट बना सकते हैं - @media At-नियमों का उपयोग करना @import At-नियमों का उपयोग करना

  1. सीएसएस का उपयोग करके जेड-इंडेक्स के साथ तत्वों को ओवरलैप करना

    CSS Z-Index प्रॉपर्टी डेवलपर का उपयोग करके तत्वों को एक दूसरे पर स्टैक किया जा सकता है। Z-सूचकांक का मान धनात्मक या ऋणात्मक हो सकता है। ध्यान दें - यदि ओवरलैप करने वाले तत्वों में z-index निर्दिष्ट नहीं है तो वह तत्व दिखाई देगा जिसका उल्लेख दस्तावेज़ में अंतिम बार किया गया है। उदाहरण आइए z-सूचकांक

  1. CSS का उपयोग करके टेक्स्ट डेकोरेशन

    CSS टेक्स्ट-डेकोरेशन प्रॉपर्टी का उपयोग चयनित एलिमेंट के टेक्स्ट में डेकोरेशन लागू करने के लिए किया जाता है। हम मान के रूप में लाइन-थ्रू, ओवरलाइन, अंडरलाइन आदि जोड़ सकते हैं। यह टेक्स्ट-डेकोरेशन-लाइन, टेक्स्ट-डेकोरेशन-कलर और टेक्स्ट-डेकोरेशन-स्टाइल के लिए शॉर्टहैंड है। सिंटैक्स टेक्स्ट-डेकोरेशन प्र