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



ఈ వ్యాసం మీకు ఉదాహరణలతో CSS ను ఉపయోగించి వివిధ రకాల టెక్స్ట్ డెకరేషన్ గురించి వివరణాత్మక మరియు సమగ్రమైన జ్ఞానాన్ని అందిస్తుంది.

పత్రం లేదా వచనాన్ని అండర్లైన్ చేయడం ఎల్లప్పుడూ సులభం. మేము వెబ్‌సైట్ల కేసును పరిశీలిస్తే, ఇది ఇంకా సులభం కాదా? మనలో చాలా మంది అవును అని చెబుతారు కాని కొన్ని అనుకూల డిజైన్లతో సహా క్షితిజ సమాంతర రేఖను తయారు చేయడం ఈ సాధారణ పనిని అలసిపోతుంది. ఈ క్రింది పద్ధతిలో CSS ఉపయోగించి టెక్స్ట్ డెకరేషన్ జర్నీని ప్రారంభిద్దాం:

టెక్స్ట్ డెకరేషన్ అంటే ఏమిటి?

ఇది వచనంలో అలంకరణ పంక్తుల రూపాన్ని సెట్ చేస్తుంది. ఇది దీనికి సంక్షిప్తలిపి ఆస్తి:





  • టెక్స్ట్-డెకరేషన్-లైన్
  • టెక్స్ట్-డెకరేషన్-కలర్
  • టెక్స్ట్-డెకరేషన్-స్టైల్

ఇది లాంగ్-హ్యాండ్ టీని సూచించే ఒకటి లేదా అంతకంటే ఎక్కువ స్థలాన్ని వేరు చేసిన విలువలుగా పేర్కొనబడిందిxt- అలంకరణ లక్షణాలు.

సింటాక్స్:



టెక్స్ట్-డెకరేషన్: || ||

ఎక్కడ,

ఆపరేటర్ యొక్క శక్తికి జావా
  • టెక్స్ట్-డెకరేషన్-లైన్: వంటి అలంకరణ రకాన్ని సెట్ చేయడానికి ఇది ఉపయోగించబడుతుందిఅండర్లైన్, ఓవర్లైన్ మరియు లైన్-త్రూ.

  • టెక్స్ట్-డెకరేషన్-కలర్:అలంకరణ యొక్క రంగును సెట్ చేయడానికి ఇది ఉపయోగించబడుతుంది.



  • టెక్స్ట్-డెకరేషన్-స్టైల్: వంటి పంక్తి శైలిని సెట్ చేయడానికి ఇది ఉపయోగించబడుతుందిఘన, ఉంగరాల, చుక్కల, గీతల, డబుల్

CSS లో టెక్స్ట్ డెకరేషన్ల రకాలు

  • ఓవర్‌లైన్:
# అలంకరణ {టెక్స్ట్-డెకరేషన్: ఓవర్‌లైన్}

Overline-text-decoration-using-css

  • లైన్-త్రూ:
# అలంకరణ {టెక్స్ట్-డెకరేషన్: లైన్-ద్వారా}

  • అండర్లైన్:
# అలంకరణ {టెక్స్ట్-డెకరేషన్: అండర్లైన్}

  • కలయిక:
# అలంకరణ {టెక్స్ట్-డెకరేషన్: అండర్లైన్ లైన్-త్రూ ఓవర్లైన్}

అవుట్పుట్:

CSS ఉపయోగించి టెక్స్ట్ డెకరేషన్: కోడ్

కోడ్:

  

CSS కోడ్:

# ఓవర్‌లైన్ {టెక్స్ట్-డెకరేషన్: ఉంగరాల ఓవర్‌లైన్ సున్నం} # అండర్‌ఓవర్ {టెక్స్ట్-డెకరేషన్: డాష్ చేసిన అండర్లైన్ ఓవర్‌లైన్} # చుక్కల {టెక్స్ట్-డెకరేషన్: అండర్లైన్ ఓవర్‌లైన్ చుక్కల ఎరుపు

అవుట్పుట్:

టెక్స్ట్ డెకరేషన్ దాటవేయి

టెక్స్ట్-డెకరేషన్-స్కిప్ అని పిలువబడే ఆస్తిని టెక్స్ట్ ఓవర్‌లైన్, లైన్-త్రూ మరియు అండర్లైన్ ఉన్న చోట కూడా ఉపయోగించవచ్చు. ఇది వచనాన్ని అలంకరించడంలో సహాయపడుతుంది. ఆరోహణ మరియు అవరోహణలను దాటినప్పుడు ఓవర్‌లైన్ మరియు అండర్లైన్ ఎలా డ్రా అవుతాయో ఇది నిర్దేశిస్తుంది.

# అలంకరణ {టెక్స్ట్-డెకరేషన్-దాటవేయి: సిరా}

టెక్స్ట్-డెకరేషన్ స్కిప్‌లతో ఉపయోగించగల విలువలు:

  • వస్తువులు : (డిఫాల్ట్) పంక్తి చిత్రాలు లేదా ఇన్లైన్-బ్లాక్ మూలకాలు వంటి ఇన్లైన్ వస్తువులను దాటవేస్తుంది.

  • ఏదీ లేదు : లైన్ ప్రతిదీ దాటుతుంది.

  • ఖాళీలు : అలంకరణ పంక్తి ఖాళీలు, పద-విభజన అక్షరాలు మరియు అక్షరాల-అంతరం లేదా పద-ఖాళీలతో సెట్ చేయబడిన ఖాళీలను దాటవేస్తుంది.

  • సిరా : డెకరేషన్ లైన్ గ్లిఫ్స్, అవరోహణలు లేదా ఆరోహణలను దాటవేస్తుంది.

  • అంచులు : డెకరేషన్ లైన్ కంటెంట్ ప్రారంభ అంచు తర్వాత కొద్దిగా మొదలవుతుంది మరియు కంటెంట్ ముగింపు అంచుకు కొద్దిగా ముగుస్తుంది.

  • బాక్స్-అలంకరణ : డెకరేషన్ లైన్ వారసత్వంగా మార్జిన్, బోర్డర్ మరియు పాడింగ్ మీద దాటవేస్తుంది.

ఈ ఆస్తికి ఏ బ్రౌజర్ మద్దతు ఇవ్వనందున ఇంకా డెమో లేదు, కానీ టెక్స్ట్-డెకరేషన్-స్కిప్ అమలు చేసిన తర్వాత ప్రతి విలువలు ఎలా కనిపిస్తాయో క్రింద ఉన్న చిత్రంలో ఒక ఉదాహరణ ఇక్కడ ఉంది.

దీనితో, మేము CSS బ్లాగును ఉపయోగించి ఈ టెక్స్ట్ డెకరేషన్ చివరికి వస్తాము. ఈ అంశానికి సంబంధించి మీకు ఏవైనా ప్రశ్నలు ఉంటే, దయచేసి క్రింద ఒక వ్యాఖ్యను ఇవ్వండి మరియు మేము మిమ్మల్ని సంప్రదిస్తాము.

మా చూడండి ఇది బోధకుడు నేతృత్వంలోని ప్రత్యక్ష శిక్షణ మరియు నిజ జీవిత ప్రాజెక్ట్ అనుభవంతో వస్తుంది. ఈ శిక్షణ బ్యాక్ ఎండ్ మరియు ఫ్రంట్ ఎండ్ వెబ్ టెక్నాలజీలతో పనిచేయడానికి మీకు నైపుణ్యాలలో నైపుణ్యం కలిగిస్తుంది. ఇందులో వెబ్ డెవలప్‌మెంట్, j క్వెరీ, కోణీయ, నోడ్జెఎస్, ఎక్స్‌ప్రెస్‌జెఎస్ మరియు మొంగోడిబిపై శిక్షణ ఉంటుంది.

అల్గోరిథం క్రమబద్ధీకరణ c ++

మాకు ప్రశ్న ఉందా? దయచేసి దీనిని 'CSS ఉపయోగించి టెక్స్ట్ డెకరేషన్' బ్లాగ్ యొక్క వ్యాఖ్యల విభాగంలో పేర్కొనండి మరియు మేము మిమ్మల్ని సంప్రదిస్తాము.