ویژگی text-decoration در CSS برای کنترل ظاهر خطوط تزئینی روی متن استفاده میشود.
این ویژگی یک ویژگی کوتاهنویسی (shorthand) است که شامل موارد زیر میشود:
ویژگی text-decoration-line نوع خط تزئینی را مشخص میکند. مقادیر آن:
نکته: میتوان چند مقدار را ترکیب کرد، مثل 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 رنگ خط تزئینی را مشخص میکند.
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 سبک خط تزئینی را مشخص میکند. مقادیر آن:
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 | تعیین ضخامت خط تزئینی |
این محتوا کاملا رایگان توسط تیم کدلپر ترجمه شده و در اختیار شما کاربران عزیز قرار گرفته است، هر گونه کپی برداری برای مقاصد غیر رایگان و بدون ذکر منبع، مورد پیگیری قانونی قرار میگیرد.
ترجمه شده از منبع: courses