ویژگی 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
آشنا شدیم.