32. زخرفة النص وتحويله

يمكننا تعديل المظهر المرئي للنص باستخدام الخطوط وحالة الأحرف باستخدام text-decoration و text-transform.

زخرفة النص (text-decoration)

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

الاستخدام الشائع: إزالة تسطير الروابط

css a { text-decoration: none; /* يزيل التسطير الافتراضي / color: blue; / يجب تعيين لون الرابط يدوياً */ }

a:hover { text-decoration: underline; /* يعيد إضافة التسطير عند تمرير الماوس */ }

الخصائص المفصلة (الحديثة)

يسمح CSS الآن بتنسيق الخط نفسه (نادراً ما يحتاجه المبتدئون):

• text-decoration-line: underline, overline, line-through
• text-decoration-style: solid, double, wavy
• text-decoration-color

تحويل النص (text-transform)

تتحكم هذه الخاصية في حالة أحرف محتوى النص (في اللغات التي تدعم ذلك مثل الإنجليزية) دون الحاجة إلى تعديل HTML.

css .button { text-transform: uppercase; /* يظهر كـ BUY NOW / letter-spacing: 1px; / يبدو أفضل مع المسافات */ }

.name { text-transform: capitalize; /* يظهر كـ John Smith */ }