کدلپر - مرجع جامع آموزش برنامه‌نویسی

All Right Reserved © 2025 Codoloper

background codoloper

آموزش تزئین متن در CSS

خانه

تعریف 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تعیین ضخامت خط تزئینی