ویژگی text-decoration در CSS
در طراحی وب، کنترل ظاهر متن از اهمیت ویژه‌ای برخوردار است. یکی از پرکاربردترین ویژگی‌های CSS برای این منظور، text-decoration است که امکان اعمال جلوه‌های مختلف روی متن را فراهم می‌کند.
این ویژگی نه تنها برای زیرخط دار کردن متن، بلکه برای ایجاد خط‌های روی متن، خط‌های عبوری و حتی ترکیب این موارد قابل استفاده است.
مقادیر اصلی text-decoration
ویژگی text-decoration می‌تواند مقادیر زیر را بپذیرد:
- none: حذف تمام تزئینات متن (پیش‌فرض)
- underline: ایجاد خط زیر متن
- overline: ایجاد خط بالای متن
- line-through: ایجاد خط روی متن (مانند متن حذف شده)
- blink: ایجاد اثر چشمک زن (منسوخ شده در بسیاری از مرورگرها)
| مقدار |
توضیح |
مثال |
| underline |
خط زیر متن |
متن نمونه |
| overline |
خط بالای متن |
متن نمونه |
| line-through |
خط روی متن |
متن نمونه |
تنظیمات پیشرفته text-decoration
در CSS3، ویژگی text-decoration به چند زیرویژگی تقسیم شده است که کنترل دقیق‌تری ارائه می‌دهند:
- text-decoration-line: نوع خط (underline, overline, ...)
- text-decoration-color: رنگ خط تزئینی
- text-decoration-style: سبک خط (solid, dotted, dashed, wavy, double)
- text-decoration-thickness: ضخامت خط
برای مثال، می‌توانید یک خط موج‌دار قرمز زیر متن ایجاد کنید:
text-decoration: underline wavy red;
برای اطلاعات بیشتر درباره این ویژگی، می‌توانید text decoration در css.
کاربردهای عملی
از text-decoration می‌توان در موارد زیر استفاده کرد:
- متمایز کردن لینک‌ها (معمولاً با underline)
- نمایش متن حذف شده یا اصلاح شده (با line-through)
- تاکید روی عناوین خاص (با ترکیب underline و overline)
- ایجاد جلوه‌های بصری خاص برای عناصر مهم
در طراحی مدرن، استفاده از text-decoration باید با دقت انجام شود. زیاده‌روی در استفاده از این ویژگی می‌تواند باعث شلوغی و کاهش خوانایی صفحه شود. همیشه به اصول طراحی مینیمال و تجربه کاربری توجه کنید.
