HTML में लिखा normal text बहुत ही boring होता है इसे attractive बनाने के लिए CSS के text decoration property का use करते है। इसके मदद से आप text में colour, style और बहुत सी चीजे दे सकते है। इसके साथ कुछ और भी property का use किया जाता है जो इस प्रकार है।
- text-decoration-line
- text-decoration-color
- text-decoration-style
- text-decoration-thickness
- text-decoration (shorthand)
आइये इसे एक – एक करके समझने का प्रयास करते है।
CSS text-decoration-line
CSS में इस property का use किसी भी text के ऊपर, निचे और बीचोबीच एक लाइन देने के लिए करते है।
Syntax
element{
text-decoration-line: none;
text-decoration-line: under;
text-decoration-line: overline;
text-decoration-line: line-through;
text-decoration-line: initial;
text-decoration-line: inherit;
}Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS text-decoration-line Example by Technalay </title>
</head>
<body>
<p style="text-decoration-line:underline;">Hello, this is <b>underline</b> example by Technalay</p>
<p style="text-decoration-line:overline;">Hello, this is <b>overline</b> example by Technalay</p>
<p style="text-decoration-line:line-through;">Hello, this is <b>line-through</b> example by Technalay</p>
<p style="text-decoration-line:initial;">Hello, this is <b>initial</b> example by Technalay</p>
<p style="text-decoration-line:inherit;">Hello, this is <b>inherit</b> example by Technalay</p>
</body>
</html>Preview
Hello, this is underline example
Hello, this is overline example
Hello, this is line-through example
Hello, this is initial example
Hello, this is inherit example
CSS text-decoration-color
CSS में इस property का use किसी भी text line को colour define करने के लिए किया जाता है।
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS text-decoration-line Example by Technalay </title>
<style>
#p1{
text-decoration-line:underline;
text-decoration-color:green;
}
#p2{
text-decoration-line:overline;
text-decoration-color:red;
}
#p3{
text-decoration-line:line-through;
text-decoration-color:blue;
}
</style>
</head>
<body>
<p id="p1">Hey , this is <b>underline</b> example</p>
<p id="p2">Hey, this is <b>overline</b> example</p>
<p id="p3">Hey, this is <b>line-through</b> example</p>
</body>
</html>Preview
Hey , this is underline example
Hey, this is overline example
Hey, this is line-through example
CSS text-decoration-style
CSS में इस property का use किसी भी text line को style देने के लिए किया है।
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS text-decoration-style Example</title>
<style>
#p1{
text-decoration-line:underline;
text-decoration-color:green;
text-decoration-style: double;
}
#p2{
text-decoration-line:underline;
text-decoration-color:red;
text-decoration-style:dotted;
}
#p3{
text-decoration-line:overline;
text-decoration-color:blue;
text-decoration-style:dashed;
}
#p4{
text-decoration-line:overline;
text-decoration-color:blue;
text-decoration-style:wavy;
}
</style>
</head>
<body>
<p id="p1">Hey , this is <b>unaderline, double style</b> example</p>
<p id="p2">Hey , this is <b>underline, dashed style</b> example</p>
<p id="p3">Hey , this is <b>overline, dotted style</b> example</p>
<p id="p4">Hey , this is <b>overline, wavy style</b> example</p>
</body>
</html>Preview
Hey , this is unaderline, double style example
Hey , this is underline, dashed style example
Hey , this is overline, dotted style example
Hey , this is overline, wavy style example
CSS text-decoration-thickness
CSS में इस property का use किसी भी text line के मोटाई को set करने के लिए किया जाता है।
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS text-decoration-style Example</title>
<style>
#p1{
text-decoration-line:underline;
text-decoration-color:green;
text-decoration-thickness:2px;
}
#p2{
text-decoration-line:underline;
text-decoration-color:red;
text-decoration-thickness:4px;
}
#p3{
text-decoration-line:overline;
text-decoration-color:blue;
text-decoration-thickness:5px;
}
#p4{
text-decoration-line:overline;
text-decoration-color:blue;
text-decoration-thickness:px;
}
</style>
</head>
<body>
<p id="p1">Hey , this is <b>unaderline, thickness:2px </b> example</p>
<p id="p2">Hey , this is <b>underline, thickness:4px </b> example</p>
<p id="p3">Hey , this is <b>overline, thickness:5px </b> example</p>
<p id="p4">Hey , this is <b>overline, thickness:3px </b> example</p>
</body>
</html>Preview
Hey , this is unaderline, thickness:2px example
Hey , this is underline, thickness:4px example
Hey , this is overline, thickness:5px example
Hey , this is overline, thickness:3px example