| الخاصية أو القيمة | طريقة العمل والتأثير البرمجي | الاستخدام الشائع وملاحظة التصميم |
|---|---|---|
| text-decoration | تتحكم في ظهور وإخفاء الخطوط التي ترسم فوق النص أو تحته أو تتوسط أحرفه | تستخدم لإضافة لمسات بصرية للعناوين أو الروابط أو تمييز محتوى معين |
| none | تلغي أي خطوط تلقائية تظهر مع النص في المتصفح | الخيار الأساسي واليومي لإزالة الخط الافتراضي من تحت روابط القوائم والمقالات لجعلها تظهر بشكل نظيف |
| underline | يضع خطاً مستقيماً تحت النص مباشرة لتنبيه القارئ بأهميته | ممتاز لتمييز الكلمات الدلالية أو الروابط المدمجة داخل المقالات النصية لسهولة الوصول |
| overline | يضع خطاً مستقيماً فوق أحرف النص من الأعلى | يُستخدم في تأثيرات جمالية نادرة أو معادلات معينة لإعطاء نمط بصري مميز |
| line-through | يرسم خطاً أفقياً يمر في منتصف الكلمات وكأنها مشطوبة | الاستخدام الأشهر لها هو شطب الأسعار القديمة في المتاجر الإلكترونية لإبراز قيمة الخصم الجديد |
| التخصيص المتقدم للخط | يتيح تغيير نوع الخط ولونه وشكله في سطر واحد مثل خط مموج ومثال كود wavy | يسمح بصنع تأثيرات عصرية وتلوين خطوط التسطير بألوان متناسقة مع هوية الموقع |
| text-transform | تتحكم في تحويل أحرف اللغة الإنجليزية بين الكبيرة والصغيرة دون تعديل النص الأصلي | خاصية حصرية للغات الأجنبية لتنسيق مظهر العناوين والفقرات تلقائياً |
| uppercase | تحول جميع أحرف النص الإنجليزي إلى أحرف كابيتال كبيرة بالكامل | تستخدم بكثرة لعناوين الأزرار والقوائم لإعطائها مظهراً قوياً وواضحاً للعين |
| lowercase | تحول جميع أحرف النص الإنجليزي إلى أحرف سمول صغيرة بالكامل | تفيد في توحيد مظهر نصوص فرعية معينة أو بريد إلكتروني داخل الموقع |
| capitalize | تحول الحرف الأول فقط من كل كلمة إلى حرف كبير مع بقاء بقية الكلمات صغيرة | النمط المعتمد لكتابة عناوين المقالات والكتب لتبدو احترافية ومنظمة |
| text-indent | تزيح السطر الأول فقط من الفقرة النصية نحو الداخل بمقدار محدد بالبكسل | تعطي انطباعاً صحفياً راقياً يساعد القارئ على معرفة بداية كل فقرة جديدة بسهولة |
| letter-spacing | تتحكم في حجم الفراغ الفاصل بين أحرف الكلمة الواحدة لتوسيعها أو تضييقها | تستخدم لتنسيق العناوين المكتوبة بأحرف كبيرة لمنحها مساحة تهوية ومظهر عصري |
| word-spacing | تتحكم في حجم الفراغ الفاصل بين الكلمة والأخرى في الفقرة كاملة | تمنع تكتل النصوص المكتوبة بخطوط عريضة وتزيد من سلاسة وراحة القراءة لنوفيل |
مجموعة خصائص لتنسيق شكل وهيئة النص:
**text-decoration:** يتحكم في الخطوط فوق/تحت/على النص. - `none` — إزالة أي خط (لإزالة تسطير الروابط) - `underline` — تسطير - `overline` — خط فوق - `line-through` — خط يتوسط (للأسعار القديمة) - يمكن تخصيص: `text-decoration: underline wavy #e11d48;`
**text-transform:** يحوّل حالة الأحرف: - `uppercase` — كل الأحرف كبيرة - `lowercase` — كل الأحرف صغيرة - `capitalize` — أول حرف كبير في كل كلمة
**text-indent:** مسافة البداية للسطر الأول من الفقرة.
**letter-spacing:** المسافة بين الأحرف (tracking).
**word-spacing:** المسافة بين الكلمات.
| 1 | a { text-decoration: none; } |
| 2 | a:hover { text-decoration: underline dotted; } |
| 3 | |
| 4 | .title { text-transform: uppercase; letter-spacing: 0.1em; } |
| 5 | .price-old { text-decoration: line-through; color: #94a3b8; } |
| 6 | .paragraph { text-indent: 2em; } |
مثال 1: بطاقة سعر قديم وجديد
| 1 | .price-old { |
| 2 | text-decoration: line-through; |
| 3 | text-decoration-color: #ef4444; |
| 4 | color: #94a3b8; |
| 5 | font-size: 0.9em; |
| 6 | } |
| 7 | |
| 8 | .price-new { |
| 9 | font-size: 1.5em; |
| 10 | font-weight: 700; |
| 11 | color: #10b981; |
| 12 | } |
| 13 | |
| 14 | .badge-label { |
| 15 | text-transform: uppercase; |
| 16 | letter-spacing: 0.12em; |
| 17 | font-size: 0.75rem; |
| 18 | font-weight: 600; |
| 19 | } |