किसी वेबसाइट को डिज़ाइन करते समय, आकर्षक और पठनीय इंटरफ़ेस बनाने के लिए टेक्स्ट को फ़ॉर्मेट करना एक महत्वपूर्ण पहलू है।
सीएसएस कई गुण प्रदान करता है जो आपको टेक्स्ट के विभिन्न तत्वों को अनुकूलित करने की अनुमति देता है, जिसमें फ़ॉन्ट रंग, आकार, परिवार, संरेखण, रिक्ति और बहुत कुछ शामिल हैं।
नीचे प्रत्येक टेक्स्ट फ़ॉर्मेटिंग प्रॉपर्टी पर एक विस्तृत मार्गदर्शिका दी गई है, साथ ही प्रत्येक प्रॉपर्टी के उदाहरण भी दिए गए हैं।
लिपि का रंग
पैरामीटर: एक रंग मान, जो एक रंग का नाम(उदाहरण के लिए, red
), हेक्स कोड(उदाहरण के लिए, "#FF0000"), RGB मान(उदाहरण के लिए, "rgb(255, 0, 0)"), या RGBA मान(उदाहरण के लिए) हो सकता है, "आरजीबीए(255, 0, 0, 0.5)")।
p {
color: blue;
}
फ़ॉन्ट आकार
पैरामीटर: एक आकार मान, जो पिक्सल में हो सकता है(उदाहरण के लिए, "16px"), ईएम इकाइयां(उदाहरण के लिए, "1em"), रेम इकाइयां(उदाहरण के लिए, "1.2rem"), व्यूपोर्ट चौड़ाई इकाइयां(उदाहरण के लिए, "10vw"), व्यूपोर्ट ऊँचाई इकाइयाँ(उदाहरण के लिए, "5vh"), या अन्य इकाइयाँ।
h1 {
font-size: 24px;
}
फुहारा परिवार
पैरामीटर: एक फ़ॉन्ट परिवार सूची, पसंदीदा क्रम में निर्दिष्ट। आप फ़ॉन्ट नाम निर्दिष्ट कर सकते हैं(उदाहरण के लिए, Arial
) या विशेष वर्ण वाले फ़ॉन्ट नामों को दोहरे उद्धरण चिह्नों में संलग्न कर सकते हैं(उदाहरण के लिए, " Times New Roman
)।
body {
font-family: Arial, sans-serif;
}
फ़ॉन्ट वजन और शैली
पैरामीटर font-weight
: normal(default)
, bold
, bolder
, lighter
, या संख्यात्मक मान 100 से 900 तक।
पैरामीटर font-style: normal(default), italic
.
em {
font-style: italic;
}
strong {
font-weight: bold;
}
पाठ सजावट
पैरामीटर: "none"(default), "underline", "overline", "line-through"
या रिक्त स्थान द्वारा अलग किए गए मानों का संयोजन।
a {
text-decoration: underline;
}
del {
text-decoration: line-through;
}
पाठ्य संरेखण
पैरामीटर: "left"(default), "right", "center" or "justify"
.
p {
text-align: center;
}
लाइन की ऊंचाई और मार्जिन
पैरामीटर लाइन-ऊंचाई: एक संख्यात्मक मान या वर्तमान फ़ॉन्ट आकार का प्रतिशत।
पैरामीटर मार्जिन: एक माप मान, जैसे पिक्सेल(पीएक्स), ईएम इकाइयां(ईएम), रेम इकाइयां(रेम), आदि।
p {
line-height: 1.5;
margin-bottom: 10px;
}
मल्टीकॉलम टेक्स्ट लेआउट
पैरामीटर: एक सकारात्मक पूर्णांक या "auto"(default)
।
.container {
column-count: 2;
}
होवर पर टेक्स्ट का रंग बदलें
कोई विशिष्ट पैरामीटर नहीं, केवल छद्म वर्ग का उपयोग करें :hover
।
a:hover {
color: red;
}
राज्य पर टेक्स्ट का रंग बदलें(सक्रिय, विज़िट किया गया)
कोई विशिष्ट पैरामीटर नहीं, केवल छद्म वर्गों :active
और का उपयोग करें :visited
।
a:visited {
color: purple;
}
हमें उम्मीद है कि उपरोक्त स्पष्टीकरणों और उदाहरणों से आपको यह समझने में मदद मिली होगी कि अपनी वेबसाइट पर एक आकर्षक और आकर्षक टेक्स्ट इंटरफ़ेस बनाने के लिए सीएसएस में टेक्स्ट फ़ॉर्मेटिंग गुणों का उपयोग और अनुकूलन कैसे करें।