انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 18
دورة لغة CSS

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

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

ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
6
الأمثلة
7
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
3,538
محتوى الدرس
في هذا الدرس 6تصفّح المواضيع

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

تحدد text-decoration-style شكل الخطوط التي تنشئها text-decoration-line؛ السماكة تضبط بخاصية مستقلة.

  • solid: خط واحد متصل، وهي القيمة الابتدائية؛ لا تفرض سماكة رفيعة.
  • double: خط مزدوج.
  • dotted: خط منقط.
  • dashed: خط متقطع بشرطات.
  • wavy: خط متموج.

text-decoration-style syntax

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

CSS 
text-decoration-style:value;

value vs value

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

text-decoration-style values

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

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

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

ترسم text-decoration-style: solid خطًا متصلًا عند وجود زخرفة مثل underline. يمكن أن يكون سميكًا أو رفيعًا بحسب text-decoration-thickness.

CSS text decoration style solid

يعرض المثال تسطيرًا أحمر متصلًا؛ القيمة solid لا تلغي الخط.

جرّب بنفسك

CSS text decoration style solid

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

HTML 
p
{
  text-decoration-line:underline;
  text-decoration-style:solid;
  text-decoration-color:red;
  text-decoration-thickness:5px;
}
جرّب بنفسك

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.

HTML 
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.

HTML 
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

ترسم القيمة dashed مع text-decoration-style خط زخرفة متقطعًا بشرطات، بخلاف النقاط في dotted.

جرّب بنفسك

CSS text decoration style dashed

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

HTML 
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

ترسم القيمة wavy مع text-decoration-style خط زخرفة متموجًا.

جرّب بنفسك

CSS text decoration style wavy

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

HTML 
p
{
  text-decoration-line:underline;
  text-decoration-style:wavy;
  text-decoration-color:red;
  text-decoration-thickness:5px;
}
جرّب بنفسك

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…