تًستخدم خاصية text-decoration-style للتحكم في ديكور النصوص وهي تعمل جنباً إلي جنب مع خاصية text-decoration-line وتتحكم في شكل الخطوط التي تكون أعلي أو أسفل أو من خلال النص.

قيم خاصية text-decoration-style في لغة CSS.

solid هو الوضع الأفتراضي خطوط رفيعة الشكل مستقيمة.
double تًستخدم لعمل خط النصوص مزدوج.
dotted تًستخدم لعمل خط النصوص مُنقط.
dashed تًستخدم لعمل خط النصوص مكون من علامة - dash.
wavy تًستخدم لعمل خط النصوص مكون أمواج.

text-decoration-line syntax

طريقة كتابة خاصية text-decoration-line في لغة CSS.

text-decoration-style:value;

value vs value

مقارنة بين قيم خاصية text-decoration-style في لغة CSS.

text-decoration-line values

قيم خاصية text-decoration في لغة CSS.

text-decoration-style:solid|double|dotted|dashed|wavy|initial|inherit;

</> CSS Text Decoration style solid
خاصية text-decoration-style مع القيمة solid في لغة CSS

خاصية text-decoration-line مع خاصية text-decoration-style بقيمة solid يكون خط النصوص خط مستقيم رفيع.

CSS text decoration style solid

إلغاء الخط من النص بواسطة خاصية text-decoration-style مع القيمة solid في لغة CSS.

جربها بنفسك

CSS text decoration style solid

خاصية text-decoration-style مع القيمة solid في لغة CSS.

p
{
  text-decoration-line:underline;
  text-decoration-style:solid;
  text-decoration-color:red;
  text-decoration-thickness:5px;
}

جربها بنفسك

ملاحظة

في الوضع الأفتراضي يكون نوع الخط هو solid بدون إضافة خاصية text-decoration-style.

</> CSS Text Decoration style double
خاصية text-decoration-style مع القيمة double في لغة CSS

خاصية text-decoration-line مع خاصية text-decoration-style بقيمة double يكون خط النصوص خط مستقيم مزدوج.

جربها بنفسك

CSS text decoration style double

خاصية text-decoration-style مع القيمة double في لغة CSS.

p
{
  text-decoration-line:underline;
  text-decoration-style:double;
  text-decoration-color:red;
  text-decoration-thickness:5px;
}

جربها بنفسك

</> CSS Text Decoration style dotted
خاصية text-decoration-style مع القيمة dotted في لغة CSS

خاصية text-decoration-line مع خاصية text-decoration-style بقيمة dotted يكون خط النصوص خط مكون من علامة dot نقطة [.].

جربها بنفسك

CSS text decoration style dotted

خاصية text-decoration-style مع القيمة dotted في لغة CSS.

p
{
  text-decoration-line:underline;
  text-decoration-style:dotted;
  text-decoration-color:red;
  text-decoration-thickness:5px;
}

جربها بنفسك

</> CSS Text Decoration style dashed
خاصية text-decoration-style مع القيمة dashed في لغة CSS

خاصية text-decoration-line مع خاصية text-decoration-style بقيمة dotted يكون خط النصوص خط مكون من علامة dot نقطة [.].

جربها بنفسك

CSS text decoration style dashed

خاصية text-decoration-style مع القيمة dashed في لغة CSS.

p
{
  text-decoration-line:underline;
  text-decoration-style:dashed;
  text-decoration-color:red;
  text-decoration-thickness:5px;
}

جربها بنفسك

</> CSS Text Decoration style wavy
خاصية text-decoration-style مع القيمة wavy في لغة CSS

خاصية text-decoration-line مع خاصية text-decoration-style بقيمة dotted يكون خط النصوص خط مكون من علامة dot نقطة [.].

جربها بنفسك

CSS text decoration style wavy

خاصية text-decoration-style مع القيمة wavy في لغة CSS.

p
{
  text-decoration-line:underline;
  text-decoration-style:dashed;
  text-decoration-color:red;
  text-decoration-thickness:5px;
}

جربها بنفسك

معلومات تهمك

لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.

عدد المشاركات

التالى

CLOSETAG

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

CSS Text Decoration style
ديكور شكل خطوط النصوص في لغة CSS

التاريخ

الدروس

المستوى

اللغة

المشاهدات

المواضيع

الشروحات CSS Text Decoration style CSS