آموزش ویژگی text-decoration-line در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی text-decoration-line در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی text-decoration-line در CSS
با استفاده از ویژگی text-decoration-line در CSS میتوان نوع خط ( اون خطی که به زیر یا بالای متن کشیده میشه ) رو مشخص و یا تعریف کرد.
این ویژگی در مرورگر اینترنت اکسپلورر یا IE پشتیبانی نمیشود.
Free-Learn
مثال از این ویژگی
در ادامه میتوانید یک مثال از ویژگی text-decoration-line را در زبان CSS مشاهده نمایید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
h2.f1{ text-decoration-style: solid; text-decoration-line: none; } h2.f2{ text-decoration-style: solid; text-decoration-line: underline; } h2.f3{ text-decoration-style: solid; text-decoration-line: overline; } h2.f4{ text-decoration-style: solid; text-decoration-line: line-through; } |
مثال شماره ۲ : استفاده از ۲ مقدار بصورت همزمان ( هم خط زیر متن و هم خط بالای متن )
|
1 2 3 4 |
h2.f1{ text-decoration-style: solid; text-decoration-line: underline overline; } |
Free-Learn
جدول مشخصات ویژگی text-decoration-line در CSS
در جدول زیر میتوانید مشخصات کلی این ویژگی را در زبان CSS مشاهده نمایید.
| مقدار پیش فرض | none |
|---|---|
| قابل ارث بری | ندارد | اطلاعات بیشتر |
| قابل متحرک سازی | ندارد | اطلاعات بیشتر |
| نسخه | CSS3 |
| نحوه استفاده در جاوااسکریپت | object.style.textDecorationLine=”overline underline”; |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از ویژگی text-decoration-line در CSS پشتیبانی میکنند یا خیر.
| نام ویژگی | Chrome | Firefox | Opera | Safari | IE |
| text-decoration-line | ۵۷٫۰ | ۳۶٫۰ ۶٫۰ -moz- |
۴۴٫۰ | ۱۲٫۱ ۸٫۰ -webkit- |
خیر |
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
نکات و توضیحات
- این ویژگی در مرورگر اینترنت اکسپلورر پشتیبانی نمیشود.
- میتوان بصورت همزمان از ۲ مقدار استفاده کرد، باید بین مقادیر یک فاصله گذاشت. ( همانند مثال شماره ۲ )
- از نسخه ۶ تا ۳۵ مرورگر فایرفاکس باید از پیشوند -moz- و از نسخه ۸ تا ۱۲ مرورگر سافاری باید از پیشوند -webkit- استفاده نمایید.
