Jassif Team Institution

CSS Text Decoration

CSS text-decoration பண்பு உரையில் அலங்கார கோடுகளின் தோற்றத்தை கட்டுப்படுத்த பயன்படுகிறது.

இது பின்வரும் தனிப்பட்ட பண்புகளுக்கான ஒரு சுருக்கப் பண்பாகும்:

• text-decoration-line
• text-decoration-color
• text-decoration-style
• text-decoration-thickness

உரைக்கு ஒரு Decoration Line சேர்க்கவும்

CSS text-decoration-line பண்பு உரையில் சேர்க்கப்பட்ட decoration line-ன் வகையை அமைக்கிறது.

இந்த பண்பு பின்வரும் மதிப்புகளில் ஒன்று அல்லது அதற்கு மேற்பட்டவற்றைக் கொண்டிருக்கலாம்:

• none - இயல்புநிலை மதிப்பு. எந்த decoration line-ஐயும் காட்டாது
• underline - decoration line உரையின் கீழ் காட்டப்படும்
• overline - decoration line உரையின் மேல் காட்டப்படும்
• line-through - decoration line உரையின் மூலம் காட்டப்படும்

எடுத்துக்காட்டு

வெவ்வேறு வகையான decoration lines-ஐ அமைக்கவும்:

h1 {
  text-decoration-line: overline;
}

h2 {
  text-decoration-line: line-through;
}

h3 {
  text-decoration-line: underline;
}

p {
  text-decoration-line: overline underline;
}

Decoration Line-க்கு ஒரு நிறத்தை குறிப்பிடவும்

CSS text-decoration-color பண்பு decoration line-ன் நிறத்தை அமைக்க பயன்படுகிறது.

எடுத்துக்காட்டு

Decoration line-க்கு வெவ்வேறு நிறங்களை சேர்க்கவும்:

h1 {
  text-decoration-line: overline;
  text-decoration-color: red;
}

h2 {
  text-decoration-line: line-through;
  text-decoration-color: blue;
}

h3 {
  text-decoration-line: underline;
  text-decoration-color: green;
}

p {
  text-decoration-line: overline underline;
  text-decoration-color: purple;
}

Decoration Line-க்கு ஒரு பாணியை குறிப்பிடவும்

CSS text-decoration-style பண்பு decoration line-ன் பாணியை அமைக்க பயன்படுகிறது.

இந்த பண்பு பின்வரும் மதிப்புகளில் ஒன்றைக் கொண்டிருக்கலாம்:

• solid - இயல்புநிலை மதிப்பு. கோட்டை ஒற்றைக் கோடாக காட்டுகிறது
• double - கோட்டை இரட்டைக் கோடாக காட்டுகிறது
• dotted - கோட்டை புள்ளியிட்ட கோடாக காட்டுகிறது
• dashed - கோட்டை துண்டு துண்டான கோடாக காட்டுகிறது
• wavy - கோட்டை அலைவடிவ கோடாக காட்டுகிறது

எடுத்துக்காட்டு

Decoration line-க்கு வெவ்வேறு பாணிகளை சேர்க்கவும்:

h1 {
  text-decoration-line: underline;
  text-decoration-style: solid;
}

h2 {
  text-decoration-line: underline;
  text-decoration-style: double;
}

h3 {
  text-decoration-line: underline;
  text-decoration-style: dotted;
}

p.ex1 {
  text-decoration-line: underline;
  text-decoration-style: dashed;
}

p.ex2 {
  text-decoration-line: underline;
  text-decoration-style: wavy;
}

p.ex3 {
  text-decoration-line: underline;
  text-decoration-color: red;
  text-decoration-style: wavy;
}

Decoration Line-க்கு தடிமனை குறிப்பிடவும்

CSS text-decoration-thickness பண்பு decoration line-ன் தடிமனை அமைக்க பயன்படுகிறது.

எடுத்துக்காட்டு

Decoration line-க்கு வெவ்வேறு தடிமனை சேர்க்கவும்:

h1 {
  text-decoration-line: underline;
  text-decoration-thickness: auto;
}

h2 {
  text-decoration-line: underline;
  text-decoration-thickness: 5px;
}

h3 {
  text-decoration-line: underline;
  text-decoration-thickness: 25%;
}

p {
  text-decoration-line: underline;
  text-decoration-color: red;
  text-decoration-style: double;
  text-decoration-thickness: 5px;
}

சுருக்கப் பண்பு

CSS text-decoration பண்பு பின்வருவனவற்றுக்கான ஒரு சுருக்கப் பண்பாகும்:

• text-decoration-line (கட்டாயம்)
• text-decoration-color (விருப்பம்)
• text-decoration-style (விருப்பம்)
• text-decoration-thickness (விருப்பம்)

எடுத்துக்காட்டு

h1 {
  text-decoration: underline;
}

h2 {
  text-decoration: underline red;
}

h3 {
  text-decoration: underline red double;
}

p {
  text-decoration: underline red double 5px;
}

இணைப்புகள் குறித்த ஒரு சிறிய உதவிக்குறிப்பு

HTML-ல் உள்ள அனைத்து இணைப்புகளும் இயல்பாக அடிக்கோடிடப்பட்டுள்ளன. சில நேரங்களில் இணைப்புகள் அடிக்கோடு இல்லாமல் வடிவமைக்கப்பட்டிருப்பதை நீங்கள் காணலாம். இணைப்புகளிலிருந்து அடிக்கோடை அகற்ற text-decoration: none; பயன்படுத்தப்படுகிறது, இது போல:

எடுத்துக்காட்டு

a {
  text-decoration: none;
}

CSS Text Decoration பயிற்சி

இந்த டுடோரியலில் உள்ள பல அத்தியாயங்கள் உங்கள் அறிவு நிலையைச் சரிபார்க்கக்கூடிய பயிற்சியுடன் முடிகின்றன.

a {
  text-decoration: ;
}

அனைத்து CSS text-decoration பண்புகள்