ویژگی text-decoration در CSS

ویژگی text-decoration می تواند ظاهر متن را با خط تغییر دهد.

ویژگی های تغییر ظاهر متن با خط شامل:

  • text-decoration-line: محل خطِ روی متن را مشخص می‌کند.
  • text-decoration-color: رنگ خطِ کشیده شده را مشخص می‌کند.
  • text-decoration-style: سبک خطِ کشیده شده را مشخص می‌کند.
  • text-decoration-thickness: ضخامت خطِ کشیده را مشخص می‌کند.
  • text-decoration: کوتاه نویسی ویژگی های بالا است.

ویژگی text-decoration-line در CSS

ویژگی text-decoration-line، محل خط را مشخص می کند. مقادیر این ویژگی شامل:

  • overline: خط بالای متن قرار می گیرد.
  • underline: خط زیر متن قرار می گیرد.
  • line-through: خط روی متن قرار می گیرد.
text-decoration-line: overline;

ویژگی text-decoration-color در CSS

ویژگی text-decoration-color، رنگ خط را مشخص می کند. مقادیر این ویژگی شامل:

  • نام رنگ 
  • مقدار HEX
  • مقدار RGB
  • مقدار HSL
text-decoration-color: red;

نکته: برای آشنایی بیشتر با رنگ ها، به درس رنگ ها در CSS مراجعه کنید.

ویژگی text-decoration-style در CSS

ویژگی text-decoration-style، سبک خط را مشخص می کند. این ویژگی مقادیر زیر را می پذیرد.

مقادیر

توضیحات

dotted یک خط را به صورت نقطه چین تعریف می کند.
dashed یک خط را به صورت خط چین تعریف می کند.
solid یک خط ساده را می سازد.
double یک خط دوتایی را تعریف می کند.
wavy یک خط موج دار را می سازد.

text-decoration-style: solid;

ویژگی text-decoration-thickness در CSS

ویژگی text-decoration-thickness، ضخامت خط را مشخص می کند.

text-decoration-thickness: 5px;

ویژگی text-decoration در CSS

text-decoration-line: overline;
text-decoration-color: red;
text-decoration-style: solid;
text-decoration-thickness: 5px;

برای خلاصه کردن چهار ویژگی بالا در یک ویژگی، می توانیم از ویژگی text-decoration استفاده کنیم.

text-decoration : td-line td-color td-style td-thickness;
  • مقدار td-line، جایگاه خط را مشخص می‌ کند.
  • مقدار td-color، رنگ خط را مشخص می‌ کند.
  • مقدار td-styke، سبک خط را مشخص می‌ کند.
  • مقدارtd-thickness، ضخامت خط را مشخص می‌ کند.
text-decoration: underline red double 5px;
مقادیر

توضیحات

text-decoration

خلاصه نویسی ویژگی های text-decoration

text-decoration-line

تنظیم محل خط روی متن

text-decoration-color تنظیم رنگ خط روی متن
text-decoration-style تنظیم سبک خط روی متن
text-decoration-thickness تنظیم ضخامت خط روی متن

خلاصه درس

در این درس با ویژگی های text-decoration در CSS:

  • ویژگی text-decoration-line
  • ویژگی text-decoration-color
  • ویژگی text-decoration-style
  • ویژگی text-decoration-thickness
  • ویژگی text-decoration 

آشنا شدیم.

توسعه دهندگان
احسان اسلامی