వెబ్సైట్ను డిజైన్ చేస్తున్నప్పుడు, ఆకట్టుకునే మరియు చదవగలిగే ఇంటర్ఫేస్ను రూపొందించడంలో టెక్స్ట్ను ఫార్మాటింగ్ చేయడం ఒక ముఖ్యమైన అంశం.
ఫాంట్ రంగు, పరిమాణం, కుటుంబం, సమలేఖనం, అంతరం మరియు మరిన్నింటితో సహా టెక్స్ట్ యొక్క వివిధ అంశాలను అనుకూలీకరించడానికి మిమ్మల్ని అనుమతించే అనేక లక్షణాలను 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
, , లేదా సంఖ్యా విలువలు 100 నుండి 900 వరకు bolder
. lighter
పరామితి 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లో టెక్స్ట్ ఫార్మాటింగ్ లక్షణాలను ఎలా ఉపయోగించాలో మరియు అనుకూలీకరించాలో అర్థం చేసుకోవడానికి పై వివరణలు మరియు ఉదాహరణలు మీకు సహాయపడతాయని మేము ఆశిస్తున్నాము.