الدرس الثامن: تزيين النصوص (Text Decoration) في CSS

 تزيين النصوص يعني إضافة تأثيرات بصرية على النص مثل وضع خط تحته، أو فوقه، أو شطبه، مما يعطي النص شكلاً مختلفًا وجذابًا حسب الحاجة.

---

1. إضافة خط تحت النص

لإضافة خط تحت النص، نستخدم الخاصية text-decoration.

مثال:

text-decoration: underline;

---

2. إضافة خط فوق النص

لإضافة خط فوق النص، نستخدم:

text-decoration: overline;

---

3. شطب النص (خط في وسط الكلمة)

لشطب النص، نستخدم:

text-decoration: line-through;

---

4. إزالة أي تزيين افتراضي للنص

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

text-decoration: none;

مثال على إزالة الخط من رابط:

a {
  text-decoration: none;
}

---

5. التحكم بلون خط التزيين

يمكنك التحكم بلون الخط الزخرفي (الخط الذي يظهر تحت أو فوق النص) باستخدام text-decoration-color.

مثال:

text-decoration: underline;
text-decoration-color: red;

---

6. أنماط خط التزيين

باستخدام text-decoration-style يمكنك تحديد شكل الخط:

text-decoration-style: solid;   /* خط صلب */
text-decoration-style: dotted;  /* نقاط */
text-decoration-style: dashed;  /* خط متقطع */
text-decoration-style: wavy;    /* خط متموج */

---

مثال عملي كامل

text-decoration: underline;
text-decoration-color: blue;
text-decoration-style: wavy;
font-size: 20px;
color: #222;

---

الواجب العملي

• أنشئ فقرة نصية وجرب إضافة خط تحتها وخط فوقها وشطبها.
• غيّر لون الخط الزخرفي وجرب استخدام أنماط مختلفة (solid, dotted, dashed, wavy).
• أنشئ رابطًا (<a>) وأزل الخط السفلي الافتراضي له.