CSS Text Decoration Property Hindi - text decoration क्या है

Table of Contents hide

1 CSS Text Decoration Property

2 Text-Decoration Properties list

2.1 1) text-decoration-line

2.2 2) text-decoration-style

2.3 3) text-decoration-color

2.4 4) text-decoration-thickness

3 text-decoration shorthand

4 अन्य CSS Tutorial के सुझाव

CSS Text Decoration Property

Text को decoration देने के लिए text-decoration property का इस्तेमाल होता है | ये एक property का ग्रुप है, जिसमे 4 properties हैं | और उन properties को text-decoration properties list में बताया गया है |

तो चलिए इस लिस्ट को जानतें हैं उदाहरण के साथ |

Text-Decoration Properties list

CSS text decoration इन 4 properties के समारोह से बनती हैं और वो हैं :

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

1) text-decoration-line

इस property में text के साथ line लगायी जाती है | वो line text के निचे या ऊपर या बिच में लगायी जा सकती है |

text-decoration-line property के value हैं : 1) underline, 2) overline, 3) line-through, 4) none

underline : text के निचे line लगाने के लिए इस value का इस्तेमाल किआ जाता है |
overline : text के ऊपर line लगाना है तो overline value का इस्तेमाल होता है |
line-through : text के बिच में line खींचनी है तो इस value का इस्तेमाल होता है | जिससे फिर text कटी हुयी नज़र आती है |
none : अगर decoration हटाना है तो इस property का इस्तेमाल होता है |

Syntax
text-decoration-line : overline | underline | line-through | none;

उदाहरण:

<html>
 <head>
  <title>CSS Text Decoration Property</title>		
 </head>
 <body>
  <h2 style="text-decoration-line: underline">text with underline</h2>	 
  <h2 style="text-decoration-line: line-through">text with line-through</h2>
  <h2 style="text-decoration-line: overline">text with overline</h2>
 <a href="google.com" target="_blank" style="text-decoration-line: none">Google</a>
</body>
</html>

ऊपर के उदाहरण में text-decoration-line की none value के लिए <a> tag लिया गया है | <a> tag में default underline लगी हुयी आती है | उसे हटाने के लिए none value का उपयोग किया गया है |

output:

2) text-decoration-style

text-decoration-line को style देने के लिए इस property का इस्तेमाल होता है |

CSS text-decoration-style property की values हैं : 1) solid, 2) dotted, 3) dashed, 4) double, 5) wavy

Syntax
text-decoration-style : solid | dotted | dashed | double | wavy;

उदाहरण:

<html>
 <head>
  <title>CSS Text Decoration Property</title>	
  <style>
   h2{text-decoration-line: underline; color:blue;}
  </style> 	
 </head>
 <body>
  <h2 style="text-decoration-style: solid;">
   text-decroration with solid style
  </h2>	 
  <h2 style="text-decoration-style: dotted;">
   text-decroration with dotted style
  </h2>
  <h2 style="text-decoration-style: dashed;">
   text-decroration with dashed style
  </h2>
  <h2 style="text-decoration-style: double;">
   text-decroration with double style
  </h2>
  <h2 style="text-decoration-style: wavy;">
   text-decroration with wavy style
  </h2>
 </body>
</html>

3) text-decoration-color

इस property में text-decoration line को color कर सकतें हैं |

Syntax
text-decoration-color : color;

जैसे बाकि property में color की value सेट की जाती है, वैसे ही इसमें भी color सेट की जा सकती है | यानि आप color का नाम या hexacode या फिर RGB value सेट करके color value दे सकते हैं |

उदाहरण:

<html>
 <head>
  <title>CSS Text Decoration Property</title>	
  <style>
   h2{
      text-decoration-line: underline; 
      text-decoration-color:RGB(0,233,220);
    }
  </style> 
  </head>
  <body>
    <h2>text-decroration line with color</h2>  
 </body>
</html>

output

4) text-decoration-thickness

इस property में text-decoration की thickness बढाई या कम की जा सकती है | इसकी value pixel में set कर सकतें हैं |

पर ये property सारे browser में support नहीं करता | safari और mozilla browser इस property को support करता है |

Syntax
text-decoration-thickness: auto | font-file | length | percentage | global values;

उदाहरण:

<html>
 <head>
 <title>CSS Text Decoration Property</title>	
 <style>
  h2{
     text-decoration-line: underline; 
     text-decoration-color:RGB(0,233,220);
     text-decoration-thickeness: 30px;
   }
 </style> 
 </head>
 <body>
  <h2>text-decroration line with color</h2>  
 </body>
</html>

text-decoration shorthand

सारे properties को एक line में लिखने के लिए text-decoration shorthand का इस्तेमाल होता है |

Syntax
text-decoration : text-decoration–line text-decoration–color text-decoration–style text-decoration–thickness

उदाहरण
text-decoration : underline blue solid 10px

निचे दी गयी sample code से text-decoration shorthand को और अच्छे से समझ पायेंगें !

<html>
 <head>
    <title>CSS Text Decoration Property</title>		
  </head>
  <body>
     <h1 style="text-decoration: underline green wavy 4px;">
       code to show text-decoration
     </h1>
  </body>
</html>

output