CSS

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

ستتعلم في هذا الدرس طريقة زخرفة النصوص وتغيير شكل خطوط أعلي وأسفل وخلال النص عن طريق خاصية text-decoration-style في لغة CSS.

التاريخ

03 نوفمبر 2022

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

822

المواضيع

24
الشروحات chevron_left CSS Text Decoration style chevron_left CSS
CSS Flex Box keyboard_arrow_down

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

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

تًستخدم خاصية 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;
}
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات