✨ Text Decoration في CSS: اجعل نصوصك تتحدث! ✨

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

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

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

القيمة الأساسية لهذه الخاصية هي none، أي بدون أي تزيين.

p {
  text-decoration: none; /* إزالة أي تزيين عن النص */
}

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

هناك أربع قيم رئيسية يمكنك استخدامها مع text-decoration، كل منها يضيف تأثيراً مختلفاً:

  1. underline: يضيف خطاً تحت النص. ⬇️
  2. overline: يضيف خطاً فوق النص. ⬆️
  3. line-through: يضيف خطاً في منتصف النص (شطب). ➖
  4. none: يزيل أي تزيين موجود. ❌

دعنا نرى مثالاً يوضح هذه القيم الأربع معاً.

.underline-text {
  text-decoration: underline; /* خط تحت النص */
}

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

.lineThrough-text {
  text-decoration: line-through; /* خط شطب في منتصف النص */
}

.noDecoration-text {
  text-decoration: none; /* بدون تزيين */
}

<p class="underline-text">هذا النص به خط تحته.</p>
<p class="overline-text">هذا النص به خط فوقه.</p>
<p class="lineThrough-text">هذا النص مشطوب.</p>
<p class="noDecoration-text">هذا النص بدون أي تزيين.</p>
<a href="#" class="noDecoration-text">رابط بدون الخط السفلي الافتراضي</a>

في المثال أعلاه، استخدمنا الخاصية لتطبيق تأثيرات مختلفة على فقرات نصية. كما استخدمنا text-decoration: none; لإزالة الخط السفلي الافتراضي عن رابط (<a>)، وهو استخدام شائع جداً في تصميم الويب.

مثال عملي: قائمة أسعار 🏷️

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

<div class="product">
  <h3>لابتوب رائع</h3>
  <p class="old-price">2500 ر.س</p>
  <p class="new-price">2000 ر.س</p>
</div>

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

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

في هذا المثال، استخدمنا line-through لشطب السعر القديم، مما يمنح المستخدم إشارة بصرية واضحة على وجود تخفيض.

خلاصة الدرس 📝

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

  • الوظيفة: إضافة خطوط زخرفية (تحت، فوق، شطب) أو إزالتها من النص.
  • القيم الأساسية: underline, overline, line-through, none.
  • التطبيق الشائع: إزالة الخط السفلي من الروابط باستخدام text-decoration: none;.

تذكر أن التزيين البسيط يمكن أن يحسن بشكل كبير من وضوح المعلومات وجاذبية التصميم.