वेबसाइट डिझाइन करताना, मजकूराचे स्वरूपन करणे हा आकर्षक आणि वाचनीय इंटरफेस तयार करण्याचा एक महत्त्वाचा पैलू आहे.
CSS अनेक गुणधर्म प्रदान करते जे तुम्हाला फॉन्ट रंग, आकार, कुटुंब, संरेखन, अंतर आणि बरेच काही यासह मजकूराचे विविध घटक सानुकूलित करण्याची परवानगी देतात.
खाली प्रत्येक मालमत्तेच्या उदाहरणांसह, प्रत्येक मजकूर स्वरूपन गुणधर्मावर तपशीलवार मार्गदर्शक आहे.
फॉन्टचा रंग
पॅरामीटर: रंग मूल्य, जे रंगाचे नाव असू शकते(उदा., red), हेक्स कोड(उदा., "#FF0000"), RGB मूल्य(उदा., "rgb(255, 0, 0)"), किंवा RGBA मूल्य(उदा., "rgba(255, 0, 0, 0.5)").
p {
color: blue;
}
अक्षराचा आकार
पॅरामीटर: आकाराचे मूल्य, जे पिक्सेलमध्ये असू शकते(उदा. "16px"), em युनिट(उदा., "1em"), rem युनिट(उदा., "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;
}
रेषेची उंची आणि समास
पॅरामीटर लाइन-उंची: अंकीय मूल्य किंवा वर्तमान फॉन्ट आकाराची टक्केवारी.
पॅरामीटर मार्जिन: एक मापन मूल्य, जसे की पिक्सेल(px), em युनिट(em), rem एकक(rem), इ.
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;
}
आम्हाला आशा आहे की वरील स्पष्टीकरणे आणि उदाहरणांनी तुम्हाला तुमच्या वेबसाइटवर दृष्यदृष्ट्या आकर्षक आणि आकर्षक मजकूर इंटरफेस तयार करण्यासाठी CSS मधील मजकूर स्वरूपन गुणधर्म कसे वापरावे आणि सानुकूलित करावे हे समजून घेण्यात मदत केली आहे.