Text Decoration అంటే ఏమిటి?

CSSలో text-decoration propertyని textకు underline, overline, లేదా line-through వంటి decorationలు ఇవ్వడానికి ఉపయోగిస్తాము. Textను చదవడానికి, ప్రత్యేకంగా చూపించడానికి లేదా తొలగించిన textలా చూపించడానికి ఇది ఉపయోగపడుతుంది.

ప్రధాన Text Decoration values

• underline – text కింద గీతను చూపిస్తుంది.
• overline – text పైన గీతను చూపిస్తుంది.
• line-through – text మధ్యలో గీతను చూపిస్తుంది.
• none – decorationను తొలగిస్తుంది. Linksలో default underline తొలగించడానికి ఇది ఉపయోగపడుతుంది.

ఒకే declarationలో text-decoration: underline; వంటి shorthand రాయవచ్చు. మరింత నియంత్రణ కోసం text-decoration-line, text-decoration-color, text-decoration-style, మరియు text-decoration-thickness properties ఉపయోగించవచ్చు.

Syntax

selector {
  text-decoration: value;
}

Browser HTML textను చదివి, selectorకు సరిపోయే elementపై decorationను చూపిస్తుంది. Text decoration text యొక్క layoutను సాధారణంగా మార్చదు; textపై అదనపు గీతను చూపిస్తుంది.

గమనించాల్సిన విషయం

Linksకు browser సాధారణంగా underline ఇస్తుంది. అవసరమైతే a { text-decoration: none; }తో దాన్ని తొలగించవచ్చు. కానీ linksను underline లేకుండా ఉంచితే అవి link అని ఇతర visual cuesతో కూడా స్పష్టంగా ఉండేలా చూడండి.

Simple Explanation

Text Decoration అంటే textపై లేదా text చుట్టూ కనిపించే గీత. ఉదాహరణకు, ముఖ్యమైన headingకు underline, పూర్తి చేసిన పనికి line-through, లేదా link underline తొలగించడానికి text-decoration ఉపయోగిస్తాము.

ఉదాహరణ: text-decoration: underline; text కింద గీతను ఇస్తుంది. text-decoration: line-through; text మధ్యలో గీతను ఇస్తుంది.

Real-Life Example

ఒక shopping listను ఊహించండి. ఇంకా కొనాల్సిన itemకు underline ఇవ్వవచ్చు. కొనుగోలు చేసిన itemకు line-through ఇస్తే అది పూర్తయిందని తెలుస్తుంది. ఇదే విధంగా CSSలో text decorationను ఉపయోగిస్తాము.

Code Examples

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Text Decoration</title>
  <style>
    .underline {
      text-decoration: underline;
      text-decoration-color: #1d4ed8;
      text-decoration-thickness: 2px;
    }

    .overline {
      text-decoration: overline;
    }

    .completed {
      text-decoration: line-through;
      text-decoration-color: #b91c1c;
    }
  </style>
</head>
<body>
  <h1 class="underline">Important Notice</h1>
  <p class="overline">This text has an overline.</p>
  <p class="completed">This task is completed.</p>
</body>
</html>

The page shows an Important Notice heading with a blue underline, a paragraph with a line above the text, and a completed task with a red line through the text.

Line-by-Line Explanation

Try It

Try this CSS code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Try Text Decoration</title>
  <style>
    h1 {
      text-decoration: underline;
    }

    .done {
      text-decoration: line-through;
    }
  </style>
</head>
<body>
  <h1>My Tasks</h1>
  <p class="done">Read a CSS lesson</p>
  <p>Practice text decoration</p>
</body>
</html>

Practice

Common Mistakes

Interview Questions

Exam Questions

Quick Revision

• text-decoration textపై underline, overline లేదా line-through వంటి గీతలను చూపిస్తుంది.
• underline text కింద గీతను చూపిస్తుంది.
• overline text పైన గీతను చూపిస్తుంది.
• line-through text మధ్యలో గీతను చూపిస్తుంది.
• none decorationను తొలగిస్తుంది.
• text-decoration-color మరియు text-decoration-thicknessతో decoration గీత రంగు మరియు మందాన్ని మార్చవచ్చు.
• Class selectorను ఉపయోగించేటప్పుడు class name ముందు dot పెట్టాలి.