خاصية text-decoration
آخر تحديث: 2026-09-13
text-decoration خاصية text-decoration
تضيف خاصية text-decoration في CSS خطوطًا زخرفية للنص، وأكثرها شيوعًا التسطير والتعليق والشطب. وهي اختصار لأربع خصائص فرعية: text-decoration-line وtext-decoration-style وtext-decoration-color وtext-decoration-thickness. افتراضيًا تكون الروابط (عناصر a) مسطّرة؛ وتزيل أنماط إعادة الضبط هذا التسطير عادةً.
| الفئة | |
|---|---|
| القيمة الأولية | none |
| موروث | لا |
| ينطبق على | all |
| نوع الحركة | shadow |
| إصدار CSS | CSS1 |
| الحالة | قياسي |
📝 التركيب
text-decoration: <text-decoration-line> || <text-decoration-style> || <text-decoration-color> || <text-decoration-thickness>;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
<text-decoration-line> || <text-decoration-style> || <text-decoration-color> || <text-decoration-thickness> | القيمة | اختصار لزخرفة النص (تسطير، شطب، إلخ) |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| text-decoration | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： استخدم text-decoration: none; لإزالة التسطير الافتراضي من الروابط، لكن احتفظ ببعض الدليل المرئي الآخر (مثل تغيير اللون) للحفاظ على إمكانية الوصول.
مهم： لم يعد text-decoration يُورَث افتراضيًا في CSS3، لكن زخرفة الأصل لا تزال تُعرض عبر نص الابن. استخدم خصائصه الفرعية إذا احتجت إلى تحكم دقيق.
❓ الأسئلة الشائعة
Qما الفرق بين التسطير في text-decoration وborder-bottom؟
Aالخط الذي يرسمه text-decoration يلتصق بالنص، وتتحكم المتصفحات في موضعه وسُمكه؛ أما border-bottom فهو حد العنصر السفلي، ويقع أسفل السطر بالكامل، حيث يمكنك التحكم بدقة في النمط واللون والمسافة — لكنه يمتد بعرض العنصر بالكامل.
Qكيف أغيّر لون التسطير أو نمط الخط وحده في CSS؟
Aاستخدم الخصائص الفرعية الثلاث: text-decoration-color للون، وtext-decoration-style لنوع الخط (solid أو dashed أو dotted أو wavy)، وtext-decoration-thickness للسُمك. يمكن تعيين كل منها بشكل مستقل بينما تبقى الأخرى في قيمها الافتراضية.
Qكيف يمكنني إزالة التسطير الافتراضي للروابط باستخدام CSS فقط؟
Aاكتب text-decoration: none على الرابط. بعد إزالته، احتفظ بتمييز مرئي آخر مثل تغيير اللون أو تأثير hover، وإلا قد لا يميّز المستخدمون الرابط وتتأثر إمكانية الوصول.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
خاصية text-decoration-line
تعيين نوع خط الزخرفة بشكل مستقل.
خاصية text-underline-offset
التحكم في المسافة بين التسطير والنص.
