ویژگی text-decoration-style CSS
- صفحه قبل text-decoration-line
- صفحه بعدی text-decoration-thickness
تعریف و کاربرد
ویژگی text-decoration-style نوع تزئین متن را تنظیم می‌کند (خط صاف، امواج، خط نقطه‌ای، خط پرده‌ای، خط دوگانه، مقدار پیش‌فرض، ارث‌برداری).
توضیحات:لطفاً به: ویژگی text-decoration، که کوتاه‌نویسی این سه ویژگی است:
- text-decoration-line
- text-decoration-style
- text-decoration-color
لطفاً به:
آموزش CSS:متن CSS
دستورالعمل مرجع HTML DOM:textDecorationStyle ویژگی
مثال
تنظیم سبک‌های مختلف text-decoration:
div.a {
text-decoration-line: underline;
text-decoration-style: solid;
}
div.b {
text-decoration-line: underline;
text-decoration-style: wavy;
}
div.c {
text-decoration-line: underline;
text-decoration-style: double;
}
div.d {
text-decoration-line: overline underline;
text-decoration-style: wavy;
}
نحوه استفاده از CSS
text-decoration-style: solid|double|dotted|dashed|wavy|initial|inherit;
مقدار ویژگی
| مقدار | توضیحات |
|---|---|
| solid | مقدار پیش‌فرض. خط‌ها به صورت خطوط تک نمایش داده می‌شوند. |
| double | خط‌ها به صورت خطوط دوگانه نمایش داده می‌شوند. |
| dotted | خط‌ها به صورت خطوط نقطه‌ای نمایش داده می‌شوند. |
| dashed | خط‌ها به صورت خطوط پرده‌ای نمایش داده می‌شوند. |
| wavy | خط‌ها به صورت امواج نمایش داده می‌شوند. |
| initial | این ویژگی را به مقدار پیش‌فرض خود تنظیم کنید. لطفاً به: initial. |
| inherit | این ویژگی از ویژگی پدر خود ارث می‌برد. لطفاً به: inherit. |
جزئیات فنی
| مقدار پیش‌فرض: | solid |
|---|---|
| وراثت: | خیر |
| انیمیشن‌سازی: | پشتیبانی نمی‌شود. لطفاً به:ویژگی‌های مرتبط با انیمیشن. |
| نسخه: | CSS3 |
| نحوه استفاده از زبان برنامه‌نویسی JavaScript: | object.style.textDecorationStyle="wavy" |
پشتیبانی مرورگر
اعداد در جدول نشان‌دهنده نسخه اولیه مرورگرهایی هستند که این ویژگی را کامل پشتیبانی می‌کنند.
اعداد دارای -moz- نشان‌دهنده نسخه اولیه با استفاده از پیشوند هستند.
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 57.0 | 79.0 | 36.0 6.0 -moz- |
12.1 | 44.0 |
- صفحه قبل text-decoration-line
- صفحه بعدی text-decoration-thickness
