این آموزش در تاریخ ۱۴۰۰/۱۱/۱۳ آپدیت شده است.
آموزش ویژگی text-decoration-line در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی text-decoration-line در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی text-decoration-line در CSS
با استفاده از ویژگی text-decoration-line در CSS میتوان نوع / استایل خط ( اون خطی که به زیر یا بالای متن کشیده میشه ) رو مشخص و یا تعریف کرد.
Free-Learn
مثال از این ویژگی
در ادامه میتوانید یک مثال از ویژگی text-decoration-line را در زبان CSS مشاهده نمایید.
مثال شماره ۱ : استفاده از ۲ مقدار ( از ۱ مقدار هم میشه استفاده کرد )
|
1 2 3 4 5 6 7 |
<style> .Text-1{ text-decoration-line: underline overline; } </style> |
Free-Learn
جدول مشخصات ویژگی text-decoration-line در CSS
در جدول زیر میتوانید مشخصات کلی این ویژگی را در زبان CSS مشاهده نمایید.
| مقدار پیش فرض | none |
|---|---|
| قابل ارث بری | ندارد | اطلاعات بیشتر |
| قابل متحرک سازی | ندارد | اطلاعات بیشتر |
| نسخه | CSS3 |
| نحوه استفاده در جاوااسکریپت | object.style.textDecorationLine=”overline underline”; |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از ویژگی text-decoration-line در CSS پشتیبانی میکنند یا خیر.
| نام ویژگی | Chrome | Firefox | Opera | Safari | Edge |
| text-decoration-line | ۵۷ | ۳۶ | ۴۴ | ۱۲٫۱ | ۷۹ |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در CSS بصورت زیر می باشد.
|
1 |
text-decoration-line: none|underline|overline|line-through|initial|inherit; |
Free-Learn
جدول مقادیر ویژگی text-decoration-line در CSS
در جدول زیر میتوانید، مقادیری را که میتوان در این ویژگی استفاده کرد مشاهده نمایید.
| مقدار | توضیح |
|---|---|
| none | مقدار پیش فرض – هیچ خطی به زیر یا بالای متن کشیده نمیشود |
| underline | به زیر متن خط کشیده میشود |
| overline | به بالای متن خط کشیده میشود |
| line-through | خط بروی متن کشیده میشود |
| initial | استفاده از مقدار پیش فرض یا اولیه | اطلاعات بیشتر |
| inherit | استفاده از مقدار پدر یا والد ( به ارث بری ) | اطلاعات بیشتر |
Free-Learn
نکات و توضیحات
- هم میشه از ۱ مقدار و هم ۲ مقدار استفاده کرد، باید بین مقادیر یک فاصله گذاشت.
|
1 2 3 4 5 6 7 8 9 |
/* استفاده از 1مقدار */ .Text-1{ text-decoration-line: overline; } /* استفاده از 2مقدار */ .Text-1{ text-decoration-line: underline overline; } |
