تعریف text-decoration
ویژگی text-decoration در CSS برای کنترل ظاهر خطوط تزئینی روی متن استفاده میشود.
این ویژگی یک ویژگی کوتاهنویسی (shorthand) است که شامل موارد زیر میشود:
- text-decoration-line → نوع خط تزئینی
- text-decoration-color → رنگ خط تزئینی
- text-decoration-style → سبک خط تزئینی
- text-decoration-thickness → ضخامت خط تزئینی
۱. افزودن خط تزئینی به متن (text-decoration-line)
ویژگی text-decoration-line نوع خط تزئینی را مشخص میکند. مقادیر آن:
- none → بدون خط تزئینی (پیشفرض)
- underline → خط زیر متن
- overline → خط بالای متن
- line-through → خط روی متن (خطخورده)
نکته: میتوان چند مقدار را ترکیب کرد، مثل overline underline برای نمایش خط بالا و پایین متن.
h1 {
text-decoration-line: overline;
}
h2 {
text-decoration-line: line-through;
}
h3 {
text-decoration-line: underline;
}
p {
text-decoration-line: overline underline;
}
توصیه: بهتر است برای متنهایی که لینک نیستند از underline استفاده نشود، چون ممکن است خواننده را گیج کند.۲. تعیین رنگ خط تزئینی (text-decoration-color)
ویژگی text-decoration-color رنگ خط تزئینی را مشخص میکند.
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;
}
۳. تعیین سبک خط تزئینی (text-decoration-style)ویژگی text-decoration-style سبک خط تزئینی را مشخص میکند. مقادیر آن:
- solid → خط ساده (پیشفرض)
- double → خط دوتایی
- dotted → خط نقطهای
- dashed → خط خطچین
- wavy → خط موجدار
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;
}
۴. تعیین ضخامت خط تزئینی (text-decoration-thickness)ویژگی text-decoration-thickness ضخامت خط تزئینی را مشخص میکند.
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;
}
۵. ویژگی کوتاهنویسی text-decorationویژگی text-decoration میتواند همه موارد بالا را در یک خط مشخص کند.
ترتیب مقادیر اهمیتی ندارد، اما خط تزئینی (line) الزامی است.
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;
}
جدول ویژگیهای text-decoration
| ویژگی | توضیح |
|---|---|
| text-decoration | ویژگی کوتاهنویسی برای همه خصوصیات تزئین متن |
| text-decoration-color | تعیین رنگ خط تزئینی |
| text-decoration-line | تعیین نوع خط تزئینی (underline, overline, line-through) |
| text-decoration-style | تعیین سبک خط تزئینی (solid, dotted, dashed, wavy) |
| text-decoration-thickness | تعیین ضخامت خط تزئینی |