ఏదైనా కథనం లేదా పత్రాన్ని వ్రాస్తున్నప్పుడు, నిర్దిష్ట సందర్భాలలో కొన్ని అక్షరాలు ఉండాలి. వెబ్ పేజీలో, టెక్స్ట్‌ని మార్చాల్సిన HTML మూలకం CSS ప్రాపర్టీతో వర్తింపజేయబడుతుంది “ టెక్స్ట్-పరివర్తన ”. అన్ని అక్షరాలను జోడించిన తర్వాత, వాటి కేసును ఒకేసారి మార్చగలిగే విధంగా ఈ ఆస్తి సమయాన్ని కూడా ఆదా చేస్తుంది.

మేము CSSతో టెక్స్ట్ కేసులను ఎలా మార్చవచ్చో ఈ పోస్ట్ మీకు నేర్పుతుంది. కాబట్టి, ప్రారంభిద్దాం!

CSSని ఉపయోగించి వచనాన్ని పెద్ద అక్షరం మరియు లోయర్‌కేస్ చేయడం ఎలా?

CSS లో, ' టెక్స్ట్-పరివర్తన ” ప్రాపర్టీ టెక్స్ట్ క్యాపిటలైజేషన్‌ని నియంత్రిస్తుంది. ఇది వచనాన్ని పెద్ద అక్షరం లేదా చిన్న అక్షరంగా మార్చడానికి కూడా ఉపయోగించబడుతుంది.

టెక్స్ట్-ట్రాన్స్‌ఫార్మ్ ప్రాపర్టీ విలువలు

CSS టెక్స్ట్-ట్రాన్స్‌ఫార్మ్ ప్రాపర్టీ యొక్క సాధ్యమైన విలువలు క్రింద ఇవ్వబడ్డాయి:

• • ' పెద్ద అక్షరం ”: ఈ విలువ మూలకం యొక్క టెక్స్ట్‌లోని అన్ని అక్షరాలను క్యాపిటలైజ్ చేస్తుంది.
  • ' చిన్న అక్షరం ”: ఈ విలువ మూలకం యొక్క వచనాన్ని చిన్న అక్షరానికి మారుస్తుంది.
  • ' క్యాపిటలైజ్ ”: ఈ విలువ ప్రతి పదంలోని మొదటి అక్షరాన్ని క్యాపిటలైజ్ చేస్తుంది.
  • ' ఏదీ లేదు ”: ఈ విలువ సవరణ కోసం మూలకం యొక్క వచనాన్ని పరిమితం చేస్తుంది.
  • ' ప్రారంభ ”: ఈ విలువ డిఫాల్ట్ విలువను సెట్ చేస్తుంది.
  • ' మీరు వారసత్వంగా ”: ఈ విలువ దాని మూలకం నుండి దాని విలువను సెట్ చేస్తుంది.

దిగువ ఉదాహరణను విశ్లేషించండి!

ఉదాహరణ: వచనాన్ని పెద్ద అక్షరం మరియు చిన్న అక్షరం లోకి మార్చడం

ముందుగా, తరగతి పేరుతో ఒక div మూలకాన్ని జోడించండి “ పెట్టె ”. శరీరం లోపల,

,

మరియు

అనే మూడు హెడ్డింగ్ ట్యాగ్‌లను జోడించండి, ఇక్కడ

హెడ్డింగ్ యొక్క టెక్స్ట్ అంతా పెద్ద అక్షరంతో ఉంటుంది,

చిన్న అక్షరంలో ఉంటుంది మరియు మూడవది కూడా చిన్న అక్షరంలో ఉంటుంది.

క్రింద HTML కోడ్ ఉంది:

< div తరగతి = 'పెట్టె' >
< h1 > చిన్న అక్షరం: LINUXHINTకి స్వాగతం h1 >
< h2 > పెద్ద అక్షరం: linuxhint కు స్వాగతం h2 >
< h3 > క్యాపిటలైజ్: linuxhint కు స్వాగతం h3 >
div >

స్టైల్ బాక్స్ డివి

.పెట్టె {
ఎత్తు: 200px;
వెడల్పు: 80 % ;
అంచు: 4px ఘన #e4cfcf;
నేపథ్య రంగు: క్యాడెట్బ్లూ;
మార్జిన్: 1px ఆటో;
పాడింగ్: 10px;
}

పై HTML ఫైల్‌లో సృష్టించబడిన div ఇప్పుడు క్రింద వివరించబడిన CSS లక్షణాలతో రూపొందించబడింది:

• • ' ఎత్తు ” div యొక్క ఎత్తును సెట్ చేయడానికి ఉపయోగించబడుతుంది.
  • ' వెడల్పు ” div వెడల్పును సెట్ చేయడానికి ఉపయోగించబడుతుంది.
  • ' సరిహద్దు ” 4px వెడల్పు, ఘన పంక్తి రకం మరియు #e4cfcf రంగు కలిగిన మూలకం చుట్టూ అంచుని వర్తింపజేయడానికి ప్రాపర్టీ ఉపయోగించబడుతుంది.
  • ' నేపథ్య రంగు ” మూలకం యొక్క నేపథ్య రంగును నిర్దేశిస్తుంది.
  • ' మార్జిన్ ” ఆస్తి మూలకం యొక్క ప్రతి వైపు స్థలాన్ని సర్దుబాటు చేస్తుంది.
  • ' పాడింగ్ div మూలకం యొక్క కంటెంట్ చుట్టూ లేదా మూలకం యొక్క సరిహద్దు లోపల ఖాళీని ఉత్పత్తి చేయడానికి ఆస్తి ఉపయోగించబడుతుంది.

దిగువ కోడ్ బ్లాక్‌లు అన్ని హెడ్డింగ్ ఎలిమెంట్‌లు టెక్స్ట్-ట్రాన్స్‌ఫార్మ్ ప్రాపర్టీస్ యొక్క విభిన్న విలువలతో స్టైల్ చేయబడిందని సూచిస్తున్నాయి.

మూలకం ప్రాపర్టీ టెక్స్ట్-ట్రాన్స్‌ఫార్మ్‌తో 'విలువతో సెట్ చేయబడింది' చిన్న అక్షరం ”:

h1 {
టెక్స్ట్-ట్రాన్స్ఫార్మ్: చిన్న అక్షరం;
}

మూలకం టెక్స్ట్-ట్రాన్స్‌ఫార్మ్ ప్రాపర్టీతో 'విలువతో సెట్ చేయబడింది' పెద్ద అక్షరం ”:

h2 {
టెక్స్ట్-ట్రాన్స్ఫార్మ్: పెద్ద అక్షరం;
}

మూలకం కోసం, టెక్స్ట్-ట్రాన్స్‌ఫార్మ్ ప్రాపర్టీ విలువ ''గా సెట్ చేయబడింది క్యాపిటలైజ్ ”:

h3 {
టెక్స్ట్-ట్రాన్స్ఫార్మ్: క్యాపిటలైజ్;
}

పైన పేర్కొన్న కోడ్‌ను అందించడం ద్వారా, మొదటి శీర్షికలోని వచనం మొత్తం చిన్న అక్షరాలుగా మరియు రెండవ శీర్షిక పెద్ద అక్షరానికి రూపాంతరం చెందుతుంది. ప్రతి పదం యొక్క మొదటి అక్షరం మూడవ శీర్షికలో పెద్ద అక్షరంతో ఉంటుంది:

గొప్ప! వచనాన్ని పెద్ద అక్షరం, చిన్న అక్షరం మరియు అన్ని క్యాపిటలైజ్‌లుగా మార్చడం ఎలాగో మేము విజయవంతంగా నేర్చుకున్నాము.

ముగింపు

CSS యొక్క టెక్స్ట్-ట్రాన్స్‌ఫార్మ్ ప్రాపర్టీ టెక్స్ట్ యొక్క క్యాపిటలైజేషన్‌ను నియంత్రిస్తుంది మరియు డాక్యుమెంట్ టెక్స్ట్ కేసులను మార్చడానికి ఉపయోగించబడుతుంది. ఈ లక్షణం అన్ని మూలకాలకు వర్తిస్తుంది, ఈ ఆస్తి విలువలు పెద్ద అక్షరం, చిన్న అక్షరం, పెద్ద అక్షరం లేదా ఏదీ కాకపోవచ్చు. ఈ బ్లాగ్ CSS టెక్స్ట్-ట్రాన్స్‌ఫార్మ్ ప్రాపర్టీని ఉపయోగించి వచనాన్ని పెద్ద అక్షరానికి మరియు చిన్న అక్షరానికి మార్చే విధానాన్ని వివరించింది.