Text Decoration في CSS - دليلك الشامل لتنسيق النصوص

✨ Text Decoration في CSS: تزيين نصوصك باحترافية! ✨

اليوم سنتعلم كيفية إضافة لمسات جمالية احترافية على النصوص في موقعك باستخدام واحدة من أسهل وأقوى خواص CSS، وهي text-decoration. هل لاحظت الخطوط التي تظهر تحت الروابط أو الخط المشطوب على الأسعار القديمة؟ هذا بالضبط ما سنتعلمه اليوم! 🎯

ما هي خاصية text-decoration؟ 🤔

text-decoration هي خاصية في لغة CSS تسمح لك بإضافة خطوط زخرفية إلى النص. يمكنك استخدامها للتحكم في ظهور الخط تحت النص، أو فوقه، أو من خلاله (خط مشطوب)، أو حتى إزالة الخطوط الافتراضية (مثل تلك الموجودة تحت الروابط).

فكر فيها كأداة تزيين تساعدك على جذب انتباه القارئ إلى أجزاء معينة من النص أو تحسين المظهر العام لتصميمك.

قيم خاصية text-decoration الأساسية

لنبدأ بشرح القيم الأساسية التي يمكنك تعيينها لهذه الخاصية، مع أمثلة بسيطة على كل منها.

1. underline (خط تحت النص)

هذه القيمة تضيف خطاً أسفل النص. تُستخدم غالباً للروابط أو لإبراز كلمات مهمة.

.important-text {
  text-decoration: underline; /* إضافة خط تحت النص */
}

2. overline (خط فوق النص)

هذه القيمة تضيف خطاً أعلى النص. يمكن استخدامها للعناوين الفرعية أو للزينة.

.fancy-heading {
  text-decoration: overline; /* إضافة خط فوق النص */
}

3. line-through (خط مشطوب)

هذه القيمة تضيف خطاً في منتصف النص، مما يجعله يبدو "مشطوباً". هذا مفيد جداً لعرض الأسعار القديمة في عروض التخفيضات.

.old-price {
  text-decoration: line-through; /* إضافة خط مشطوب على النص */
}

4. none (إزالة الخط)

هذه القيمة تزيل أي خطوط زخرفية من النص. الاستخدام الأشهر لها هو إزالة الخط التحتي الذي يأتي افتراضياً مع عناصر الروابط (<a>).

.my-link {
  text-decoration: none; /* إزالة الخط من النص (مفيد للروابط) */
}

💻 مثال عملي شامل

لنطبق ما تعلمناه في مثال بسيط. تخيل أن لديك فقرة تحتوي على نص عادي، ورابط، وسعر قديم.

الخطوة 1: إنشاء هيكل HTML

<p>هذه جملة تحتوي على كلمة <span class="highlight">مهمة</span>.</p>
<a href="#" class="clean-link">رابط بدون خط سفلي</a>
<p>السعر: <span class="old-price">150 ريال</span> <span class="new-price">99 ريال</span></p>

الخطوة 2: تطبيق تنسيقات CSS

.highlight {
  text-decoration: underline; /* وضع خط تحت الكلمة المهمة */
}

.clean-link {
  text-decoration: none; /* إزالة الخط من الرابط */
}

.old-price {
  text-decoration: line-through; /* شطب السعر القديم */
  color: gray; /* تغيير لونه إلى الرمادي للإشارة إلى أنه قديم */
}

.new-price {
  color: green; /* جعل السعر الجديد أخضر */
  font-weight: bold; /* جعله عريضاً */
}

ستكون النتيجة واضحة: كلمة "مهمة" ستكون تحتها خط، والرابط سيظهر بدون الخط المعتاد، والسعر القديم سيكون مشطوباً وبلون رمادي بجانب السعر الجديد الأخضر والعريض.

خلاصة الدرس 🏁

تهانينا! لقد تعلمت اليوم كيفية استخدام خاصية text-decoration الأساسية في CSS. أنت الآن تستطيع:

• ✅ إضافة خط تحت النص باستخدام underline.
• ✅ إضافة خط فوق النص باستخدام overline.
• ✅ شطب النص باستخدام line-through.
• ✅ إزالة الخطوط باستخدام none.

تذكر أن هذه الخاصية بسيطة وقوية في نفس الوقت، وتساعدك على تحسين قابلية القراءة والمظهر البصري لموقعك.