टेक्स्ट से संबंधित CSS गुण
यह लेख टेक्स्ट-संबंधित CSS प्रॉपर्टीज़ को समझाता है।
आप text-align, text-decoration, और text-transform प्रॉपर्टीज़ का उपयोग और इन्हें लिखने के तरीके के बारे में जान सकते हैं।
YouTube Video
पूर्वावलोकन के लिए HTML बनाना
css-text.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Text-Related CSS Properties</title>
7 <link rel="stylesheet" href="css-base.css">
8 <link rel="stylesheet" href="css-text.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>Text-Related CSS Properties</h1>
14 </header>
15
16 <!-- Main content -->
17 <main>
18 <header>
19 <h2>Typography (Text-Related)</h2>
20 </header>
21 <article>
22 <h3>text-align</h3>
23 <section>
24 <header><h4>text-align: left</h4></header>
25 <section class="sample-view">
26 <p class="text-align-left">This is left-aligned text.</p>
27 </section>
28 <header><h4>text-align: center</h4></header>
29 <section class="sample-view">
30 <p class="text-align-center">This is center-aligned text.</p>
31 </section>
32 <header><h4>text-align: right</h4></header>
33 <section class="sample-view">
34 <p class="text-align-right">This is right-aligned text.</p>
35 </section>
36 <header><h4>text-align: justify</h4></header>
37 <section class="sample-view">
38 <p class="text-align-justify">This is justified text, meaning it will be spaced so that the left and right edges are aligned evenly.</p>
39 </section>
40 </section>
41 </article>
42 <article>
43 <h3>text-decoration</h3>
44 <section>
45 <header><h4>text-decoration: underline</h4></header>
46 <section class="sample-view">
47 <p class="text-decoration-underline">This text has an underline.</p>
48 </section>
49 <header><h4>text-decoration: overline</h4></header>
50 <section class="sample-view">
51 <p class="text-decoration-overline">This text has an overline.</p>
52 </section>
53 <header><h4>text-decoration: line-through</h4></header>
54 <section class="sample-view">
55 <p class="text-decoration-line-through">This text has a line-through.</p>
56 </section>
57 <header><h4>text-decoration: underline; text-decoration-color: red; text-decoration-style: wavy; text-decoration-thickness: 2px;</h4></header>
58 <section class="sample-view">
59 <p class="text-decoration-custom-underline">This text has a custom underline (color and style).</p>
60 </section>
61 </section>
62 </article>
63 <article>
64 <h3>text-transform</h3>
65 <section>
66 <header><h4>text-transform: none</h4></header>
67 <section class="sample-view">
68 <p class="text-transform-none">This is no transformation applied.</p>
69 </section>
70 <header><h4>text-transform: capitalize</h4></header>
71 <section class="sample-view">
72 <p class="text-transform-capitalize">this is a sentence in lowercase but will be capitalized.</p>
73 </section>
74 <header><h4>text-transform: uppercase</h4></header>
75 <section class="sample-view">
76 <p class="text-transform-uppercase">This text will be transformed to uppercase.</p>
77 </section>
78 <header><h4>text-transform: lowercase</h4></header>
79 <section class="sample-view">
80 <p class="text-transform-lowercase">THIS TEXT WILL BE TRANSFORMED TO LOWERCASE.</p>
81 </section>
82 </section>
83 </article>
84 </main>
85</body>
86</html>टाइपोग्राफी (पाठ से संबंधित)
text-align गुण
1/* Text align examples */
2.text-align-left {
3 text-align: left; /* Align text to the left */
4}
5
6.text-align-center {
7 text-align: center; /* Center align text */
8}
9
10.text-align-right {
11 text-align: right; /* Align text to the right */
12}
13
14.text-align-justify {
15 text-align: justify; /* Justify text (aligns text to both left and right edges) */
16}text-align CSS में एक प्रॉपर्टी है जिसका उपयोग टेक्स्ट और इनलाइन एलिमेंट्स की क्षैतिज संरेखण (horizontal alignment) को निर्दिष्ट करने के लिए किया जाता है। यह आमतौर पर पैराग्राफ या हेडिंग टेक्स्ट को बाएं, दाएं, या केंद्र में संरेखित करने के लिए उपयोग किया जाता है। यह वेब पेज लेआउट और टेक्स्ट फॉर्मेटिंग में एक महत्वपूर्ण भूमिका निभाता है।
text-align के मुख्य मान
left (बाएं-संरेखित)
1p {
2 text-align: left;
3}leftटेक्स्ट को बाईं ओर संरेखित करता है (यह कई भाषाओं के लिए डिफ़ॉल्ट संरेखण विधि है)।
right (दाएं-संरेखित)
1p {
2 text-align: right;
3}rightटेक्स्ट को दाईं ओर संरेखित करता है। यह दाएं से बाएं लिखी जाने वाली भाषाओं जैसे अरबी और हिब्रू के लिए विशेष रूप से प्रभावी है।
center (केंद्र-संरेखित)
1p {
2 text-align: center;
3}centerटेक्स्ट को केंद्र में संरेखित करता है। यह अक्सर शीर्षकों और हेडिंग्स के लिए उपयोग किया जाता है।
justify (समान रूप से संरेखित)
1p {
2 text-align: justify;
3}justifyबाएं और दाएं किनारों को समान रूप से संरेखित करता है, जिससे एक साफ-सुथरा प्रभाव मिलता है। यह लेआउट जैसे समाचार पत्र और पत्रिकाओं में उपयोग किया जाता है।
start (शुरुआत-संरेखित)
1p {
2 text-align: start;
3}startटेक्स्ट को प्रारंभिक स्थिति के आधार पर संरेखित करता है। बाएं से दाएं लिखी जाने वाली भाषाओं के लिए, यह बाएं संरेखण की तरह ही कार्य करता है।
end (अंत-संरेखित)
1p {
2 text-align: end;
3}endटेक्स्ट को समाप्ति स्थिति के आधार पर संरेखित करता है। बाएं से दाएं लिखी जाने वाली भाषाओं में, यह दाएं संरेखण की तरह कार्य करता है।
text-align का उपयोग और उदाहरण
केंद्र संरेखण का उपयोग करते हुए शीर्षक
- वेब पेज और दस्तावेज़ों के शीर्षकों के लिए केंद्र संरेखण का अक्सर उपयोग किया जाता है। यह अच्छा दिखता है और एक दृष्टिगत रूप से संतुलित डिज़ाइन प्रदान करता है।
पैराग्राफ के लिए बाएं या दाएं संरेखण
- टेक्स्ट पैराग्राफ आमतौर पर डिफ़ॉल्ट रूप से बाईं ओर संरेखित होते हैं, लेकिन विशिष्ट डिज़ाइनों के लिए दाएं संरेखण या केंद्र संरेखण का उपयोग किया जा सकता है।
पाठ को समान रूप से समायोजित करना
justifyके साथ संरेखित होने पर, टेक्स्ट की प्रत्येक पंक्ति बाएं और दाएं किनारों के साथ समान रूप से संरेखित होती है। यह समाचार पत्र या पत्रिका शैली के लेआउट के लिए उपयोगी है।
सारांश
text-alignएक CSS प्रॉपर्टी है जिसका उपयोग टेक्स्ट या इनलाइन एलिमेंट्स को क्षैतिज रूप से संरेखित करने के लिए किया जाता है।- यह विभिन्न लेआउट जैसे बाएं संरेखण, दाएं संरेखण, केंद्र संरेखण और न्यायसंगत संरेखण (justification) को संभाल सकता है।
- लेआउट और डिज़ाइन उद्देश्यों के आधार पर उपयुक्त संरेखण का चयन करना एक पठनीय और सुंदर डिज़ाइन हासिल करने के लिए महत्वपूर्ण है।
आइए, अपने डिज़ाइन के हिस्से के रूप में text-align का प्रभावी उपयोग करें।
text-decoration प्रॉपर्टी
1/* Text decoration examples */
2.text-decoration-underline {
3 text-decoration: underline;
4}
5
6.text-decoration-overline {
7 text-decoration: overline;
8}
9
10.text-decoration-line-through {
11 text-decoration: line-through;
12}
13
14.text-decoration-custom-underline {
15 text-decoration: underline;
16 text-decoration-color: red;
17 text-decoration-style: wavy;
18 text-decoration-thickness: 2px;
19}text-decoration एक CSS प्रॉपर्टी है जिसका उपयोग टेक्स्ट पर अंडरलाइन, ओवरलाइन, स्ट्राइकथ्रू, या कस्टम स्टाइल्ड लाइन्स लागू करने के लिए किया जाता है। इस प्रॉपर्टी का उपयोग करके, आप टेक्स्ट स्टाइलिंग को अधिक सजावटी या दृष्टिगत रूप से प्रभावशाली बना सकते हैं।
व्याख्या:
text-decoration-underlineक्लास टेक्स्ट पर अंडरलाइन प्रदर्शित करती है।text-decoration-overlineक्लास टेक्स्ट के ऊपर एक रेखा खींचती है।text-decoration-line-throughक्लास टेक्स्ट पर स्ट्राइकथ्रू लागू करती है।text-decoration-custom-underlineक्लास अंडरलाइन के रंग, शैली, और मोटाई को कस्टमाइज़ करने का एक उदाहरण है।
text-decoration के मुख्य मान
none
1p {
2 text-decoration: none;
3}noneनिर्दिष्ट करने पर टेक्स्ट से सभी सजावट को हटा दिया जाएगा। उदाहरण के लिए लिंक से अंडरलाइन हटाने के लिए इसका उपयोग किया जाता है।
underline
1p {
2 text-decoration: underline;
3}underlineनिर्दिष्ट करने पर टेक्स्ट के नीचे अंडरलाइन खींची जाएगी। इसका उपयोग लिंक या उन भागों के लिए किया जा सकता है जिन्हें आप प्रमुख बनाना चाहते हैं।
overline
1p {
2 text-decoration: overline;
3}overlineनिर्दिष्ट करने पर टेक्स्ट के ऊपर एक रेखा खींची जाएगी। रूपांतरित उपस्थिति या विशेष सजावट के लिए इसका उपयोग किया जाता है।
line-through
1p {
2 text-decoration: line-through;
3}line-throughनिर्दिष्ट करने पर टेक्स्ट पर स्ट्राइकथ्रू खींची जाएगी। इसे सुधार दर्शाने के लिए उपयोग किया जाता है।
blink（点滅）
blinkएक मान है जो टेक्स्ट को झपकाने का कारण बनता है, लेकिन इसे अब अधिकांश ब्राउज़रों द्वारा समर्थित नहीं किया जाता है, इसलिए इसका उपयोग नहीं किया जाता।
text-decoration की उन्नत सेटिंग्स
text-decoration निम्न रूप से विस्तृत सेटिंग्स की अनुमती देता है:
text-decoration-color
1p {
2 text-decoration: underline;
3 text-decoration-color: red;
4}text-decoration-colorप्रॉपर्टी आपको अंडरलाइन या स्ट्राइकथ्रू का रंग निर्दिष्ट करने की अनुमति देती है। डिफ़ॉल्ट रूप से यह टेक्स्ट के रंग से मेल खाता है, लेकिन एक अलग रंग चुनकर आप एक दृश्य प्रभाव जोड़ सकते हैं।
text-decoration-style
1p.dshed {
2 text-decoration: underline;
3 text-decoration-style: solid;
4}
5p.double {
6 text-decoration: underline;
7 text-decoration-style: double;
8}
9p.dotted {
10 text-decoration: underline;
11 text-decoration-style: dotted;
12}
13p.dashed {
14 text-decoration: underline;
15 text-decoration-style: dashed;
16}
17p.wavy {
18 text-decoration: underline;
19 text-decoration-style: wavy;
20}text-decoration-styleप्रॉपर्टी आपको सजावटी लाइनों की शैली निर्दिष्ट करने की अनुमति देती है। इसमें निम्नलिखित मान शामिल हैं:।solid(डिफ़ॉल्ट, ठोस रेखा)double(डबल रेखा)डॉटेड(बिंदीदार रेखा)डैश्ड(पहली हुई रेखा)वेवी(लहराती रेखा)
**text-decoration-thickness
1p {
2 text-decoration: underline;
3 text-decoration-thickness: 2px;
4}text-decoration-thicknessप्रॉपर्टी आपको सजावटी लाइनों की मोटाई निर्दिष्ट करने की अनुमति देती है। आप इसे2pxया0.1emजैसी इकाइयों का उपयोग करके समायोजित कर सकते हैं।
सारांश:
text-decorationएक प्रॉपर्टी है जो टेक्स्ट में सजावटी लाइनों को जोड़ने के लिए उपयोग होती है, जैसे अंडरलाइन या स्ट्राइकथ्रू।text-decoration-color,text-decoration-style, औरtext-decoration-thicknessके साथ अधिक विस्तृत कस्टमाइजेशन संभव है।- इसे अक्सर लिंक या महत्वपूर्ण टेक्स्ट पर जोर देने के लिए, या एक डिज़ाइन तत्व के रूप में उपयोग किया जाता है।
text-decoration का उपयोग करके, आप टेक्स्ट में सूक्ष्म प्रभाव या जोर जोड़ सकते हैं।
text-transform प्रॉपर्टी
1/* Text transform examples */
2.text-transform-none {
3 text-transform: none;
4}
5
6.text-transform-capitalize {
7 text-transform: capitalize;
8}
9
10.text-transform-uppercase {
11 text-transform: uppercase;
12}
13
14.text-transform-lowercase {
15 text-transform: lowercase;
16}text-transform एक CSS प्रॉपर्टी है जो टेक्स्ट के अक्षरों के मामले (केस) को बदलने के लिए उपयोग की जाती है। यह प्रॉपर्टी आपको HTML में निर्दिष्ट टेक्स्ट के प्रदर्शन फॉर्मेट को नियंत्रित करने की अनुमति देती है, उपयोगकर्ता द्वारा दर्ज किए गए या मौजूदा टेक्स्ट के मामले को स्वचालित रूप से बदलते हुए।
व्याख्या:
text-transform-noneक्लास टेक्स्ट को उसके मूल रूप से बिना बदले प्रदर्शित करती है।text-transform-capitalizeक्लास हर शब्द के पहले अक्षर को अपरकेस में बदल देती है।text-transform-uppercaseक्लास पूरे टेक्स्ट को अपरकेस में बदल देती है।text-transform-lowercaseक्लास पूरे टेक्स्ट को लोअरकेस में बदल देती है।
text-transform के मुख्य मान
none
1p {
2 text-transform: none;
3}noneनिर्दिष्ट करने पर टेक्स्ट अपरिवर्तित रहता है।
capitalize
1/* "this is a sentence" -> "This Is A Sentence" */
2p {
3 text-transform: capitalize;
4}capitalizeनिर्दिष्ट करने पर हर शब्द के पहले अक्षर को अपरकेस में परिवर्तित कर देता है। शब्द सीमाओं को स्पेस या विराम चिह्नों से पहचाना जाता है।
uppercase
1/* "hello world" -> "HELLO WORLD" */
2p {
3 text-transform: uppercase;
4}uppercaseनिर्दिष्ट करने पर पूरा टेक्स्ट अपरकेस में परिवर्तित हो जाता है।
lowercase
1/* "HELLO WORLD" -> "hello world" */
2p {
3 text-transform: lowercase;
4}lowercaseनिर्दिष्ट करने पर पूरा टेक्स्ट लोअरकेस में परिवर्तित हो जाता है।
full-width
full-widthनिर्दिष्ट करने पर टेक्स्ट को फुल-विथ अक्षरों में बदला जाता है। यह आमतौर पर कंजी या काना के साथ काम करते समय एक विशेष शैली के रूप में उपयोग किया जाता है, लेकिन कुछ ही ब्राउज़र इसका समर्थन करते हैं।
सारांश:
text-transformटेक्स्ट के केस को बदलने के लिए एक सुविधाजनक CSS प्रॉपर्टी है।- यह अक्सर हेडिंग्स, नेविगेशन मेनू और फॉर्म टेक्स्ट के लिए दृश्य स्थिरता बनाने के लिए उपयोग किया जाता है।
- यह तब उपयोगी है जब आप उपयोगकर्ता के इनपुट की परवाह किए बिना टेक्स्ट को एक विशिष्ट शैली में प्रदर्शित करना चाहते हैं।
इस प्रॉपर्टी का उपयोग करके, आप टेक्स्ट को आसानी से नियंत्रित कर सकते हैं और साथ ही दृश्य स्थिरता बनाए रख सकते हैं।
आप हमारे YouTube चैनल पर Visual Studio Code का उपयोग करके ऊपर दिए गए लेख के साथ आगे बढ़ सकते हैं। कृपया YouTube चैनल को भी देखें।