این آموزش در تاریخ ۱۴۰۰/۱۱/۱۳ آپدیت شده است.
آموزش ویژگی text-decoration در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی text-decoration در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی text-decoration در CSS
با استفاده از ویژگی text-decoration در CSS میتوان دکوراسیون ( یا تزئین ) یک متن را مشخص و یا تعریف کرد، و همچنین از این ویژگی برای خلاصه نویسی ویژگی های زیر مورد استفاده قرار میگیرد :
- text-decoration-line ( ضروری )
- text-decoration-color
- text-decoration-style
- text-decoration-thickness
Free-Learn
مثال از این ویژگی
در ادامه میتوانید یک مثال از ویژگی text-decoration را در زبان CSS مشاهده نمایید.
مثال شماره ۱ : استفاده از همه ویژگی هاش بصورت خلاصه نویسی
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<style> .Text-1{ text-decoration: overline solid blue; } .Text-2{ text-decoration: underline overline wavy orange; } .Text-3{ text-decoration: overline dotted green 3px; } .Text-4{ text-decoration: line-through solid 4px; } </style> |
مثال شماره ۲ : استفاده از ویژگی هاش بصورت مجزا
|
1 2 3 4 5 6 7 8 9 10 |
<style> .Text-1{ text-decoration-line: underline overline; text-decoration-style: wavy; text-decoration-color: orange; text-decoration-thickness: 2px; } </style> |
مثال شماره ۳ : تگ a ( لینک ها ) بصورت پیش فرض یه خط زیرش کشیده شده، خیلی راحت میتونیم حذفش کنیم
|
1 2 3 4 |
a:link{ color:blue; text-decoration:none; } |
Free-Learn
جدول مشخصات ویژگی text-decoration در CSS
در جدول زیر میتوانید مشخصات کلی این ویژگی را در زبان CSS مشاهده نمایید.
| مقدار پیش فرض | none CurrentColor solid |
|---|---|
| قابل ارث بری | ندارد | اطلاعات بیشتر |
| قابل متحرک سازی | ندارد | اطلاعات بیشتر |
| نسخه | CSS3 |
| نحوه استفاده در جاوااسکریپت | object.style.textDecoration=”underline”; |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از ویژگی text-decoration در CSS پشتیبانی میکنند یا خیر.
| نام ویژگی | Chrome | Firefox | Opera | Safari | Edge |
| text-decoration | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در CSS بصورت زیر می باشد.
|
1 |
text-decoration: text-decoration-line text-decoration-color text-decoration-style text-decoration-thickness|initial|inherit; |
Free-Learn
جدول مقادیر ویژگی text-decoration در CSS
در جدول زیر میتوانید، مقادیری را که میتوان در این ویژگی استفاده کرد مشاهده نمایید.
| مقدار | توضیح |
|---|---|
| none | هیچ خطی در زیر یا بالای متن کشیده نمیشود |
| text-decoration-line | نوع/استایل خط رو مشخص میکنه ( پیش فرض none ) |
| text-decoration-color | رنگ خط رو مشخص میکنه ( پیش فرض رنگ متن خوده عنصر ) |
| text-decoration-style | استایل یا شکل شمایل خط رو مشخص میکنه ( پیش فرض solid ) |
| text-decoration-thickness | اندازه خط رو مشخص میکنه ( پیش فرض auto ) |
| initial | استفاده از مقدار پیش فرض یا اولیه | اطلاعات بیشتر |
| inherit | استفاده از مقدار پدر یا والد ( به ارث بری ) | اطلاعات بیشتر |
Free-Learn
نکات و توضیحات
- استفاده از ویژگی text-decoration-line ضروری می باشد، این یعنی اگه از این ویژگی استفاده نکرده باشید در خروجی هیچ خطی به زیر یا بالای متن کشیده نخواهد شد.
