CSS Text Property क्या है? What is CSS Text Property?
Web Page को डिज़ाइन करते समय, CSS Text Property का सही तरीके से उपयोग करना महत्वपूर्ण होता है। इस लेख में, हम CSS Text properties के विभिन्न पहलुओं और उनके उपयोग के तरीकों को विस्तार से समझेंगे।
CSS Text Property के प्रकार
CSS Text Properties वे विशेषताएँ हैं जिनका उपयोग टेक्स्ट के स्वरूप और व्यवहार को नियंत्रित करने के लिए किया जाता है। इन properties का उपयोग करके आप टेक्स्ट की alignment, decoration, transformation, और spacing को नियंत्रित कर सकते हैं।
1. text-align
इस property का उपयोग टेक्स्ट की alignment को सेट करने के लिए किया जाता है। यह चार मान ले सकता है: left, right, center, और justify।
Example:
<html>
<head>
<title>text-align Example</title>
<style>
.align-left {
text-align: left;
}
.align-center {
text-align: center;
}
.align-right {
text-align: right;
}
.align-justify {
text-align: justify;
}
</style>
</head>
<body>
<div class=”align-left”>Left aligned text.</div>
<div class=”align-center”>Center aligned text.</div>
<div class=”align-right”>Right aligned text.</div>
<div class=”align-justify”>Justified text for better readability.</div>
</body>
</html>
2. text-decoration
यह property टेक्स्ट पर सजावटी प्रभाव डालती है जैसे underline, overline, और line-through।
Example:
<html>
<head>
<title>text-decoration Example</title>
<style>
.underline {
text-decoration: underline;
}
.overline {
text-decoration: overline;
}
.line-through {
text-decoration: line-through;
}
.none {
text-decoration: none;
}
</style>
</head>
<body>
<p class=”underline”>This text is underlined.</p>
<p class=”overline”>This text has an overline.</p>
<p class=”line-through”>This text has a line through it.</p>
<p class=”none”>This text has no decoration.</p>
</body>
</html>
3. text-transform
इस property का उपयोग टेक्स्ट के केस को नियंत्रित करने के लिए किया जाता है। आप टेक्स्ट को uppercase, lowercase, या capitalize कर सकते हैं।
Example:
<html>
<head>
<title>text-transform Example</title>
<style>
.uppercase {
text-transform: uppercase;
}
.lowercase {
text-transform: lowercase;
}
.capitalize {
text-transform: capitalize;
}
</style>
</head>
<body>
<p class=”uppercase”>this text is uppercase.</p>
<p class=”lowercase”>THIS TEXT IS LOWERCASE.</p>
<p class=”capitalize”>this text is capitalized.</p>
</body>
</html>
4. text-indent
इस property का उपयोग टेक्स्ट के पहले लाइन के indentation को सेट करने के लिए किया जाता है।
Example:
<html>
<head>
<title>text-indent Example</title>
<style>
.indent {
text-indent: 30px;
}
</style>
</head>
<body>
<p class=”indent”>This paragraph has an indent on the first line.</p>
</body>
</html>
CSS Background हिन्दी में सीखें- Learn CSS Background in Hindi
CSS Color property को कैसे use किया जाता है-हिन्दी में
5. line-height
इस property का उपयोग टेक्स्ट की लाइनों के बीच की दूरी को सेट करने के लिए किया जाता है।
Example:
<html>
<head>
<title>line-height Example</title>
<style>
.line-height {
line-height: 1.5;
}
</style>
</head>
<body>
<p class=”line-height”>This paragraph has a line height of 1.5, which increases the space between lines of text.</p>
</body>
</html>
CSS Height and Width Property की पूरी जानकारी हिन्दी में
CSS Padding सीखें हिन्दी में-Learn Padding Property in Hindi
CSS Margin property और Values कहाँ और कैसे use करें
CSS Text Property Values
CSS Text properties के लिए कई values उपलब्ध हैं जिन्हें आप अपने डिज़ाइन के अनुसार उपयोग कर सकते हैं:
- auto: डिफ़ॉल्ट value, जिसमें ब्राउज़र अपने आप टेक्स्ट की alignment और decoration सेट करता है।
- length: जैसे px, em, rem आदि, जिससे आप सटीक मूल्य सेट कर सकते हैं।
- %: टेक्स्ट को container की percentage के अनुसार सेट करता है।
- initial: इसे default value पर वापस लाने के लिए उपयोग किया जाता है।
- inherit: किसी parent element से property को inherit करता है।
इस आर्टिकल में हमने CSS Text Property और इसके उपयोग के तरीकों को विस्तार से समझाया है। यदि आपको किसी भी प्रकार की सहायता की आवश्यकता है, तो कृपया कमेंट करें। हम आपके हर कमेंट का उत्तर देंगे। इस लेख को अपने दोस्तों के साथ जरूर शेयर करें।
About Author
Sant Lal
My Name is Sant Lal From Haryana India.I am a part time blogger and always share usefull information for visiter.I want to help people about blogging, SEO and making money. Aap mujhe support de aur jyada se jyada apne dosto ke sath share kre. Google Plus