CSS

CSS Text Decoration Line
ديكور خطوط النصوص في CSS

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

التاريخ

09 نوفمبر 2020

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

3518

المواضيع

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

CSS Text Decoration
ديكور النصوص CSS

</> CSS Text Decoration line
خاصية text-decoration-line في لغة CSS

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


قيم خاصية text-decoration-line في لغة CSS.
  •  none تستخدم في إلغاء الخط الذي يوجد اسفل الروابط  Links.
  • overline  تًستخدم في إضافة خط أعلي النص.
  •  line-through  تُستخدم في إضافة خط من خلال النص.
  • underline تُستخدم في إضافة خط أسفل النص.
text-decoration-line syntax

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

text-decoration-line: value;
value vs value

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

text-decoration-line values

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

text-decoration-line:none|underline|overline|line-through|initial|inherit;
مهم
لا ننصح بإستخدام underline خط أسفل النصوص مع أي Element عنصر بخلاف عنصر Link لأنه يشتت إنتباه زوار صفحات الويب.

</> CSS text-decoration-line none
خاصية text-decoration-line مع القيمة none في لغة CSS

خاصية text-decoration مع القيمة none تُلغي الخط من النصوص في لغة CSS وهي القيمة الأفتراضية.

  • تُستخدم خاصية text-decoration مع القيمة none لتُلغي الخط من الرابط link.
CSS text decoration line none

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

.link
{
  text-decoration-line:none;
}
ملاحظة
في الوضع الأفتراضي يكون لعنصر الرابط a خط أسفل النص وعن طريق خاصية text-decoration-line تُمحي هذا الخط من أسفل نص الرابط.

</> CSS text decoration line overline
خاصية text-decoration-line مع القيمة overline في لغة CSS

خاصية text-decoration-line مع القيمة overline تُضيف خط أعلي النصوص في لغة CSS. 
CSS text decoration line overline

إضافة خط أعلي النص بواسطة خاصية text-decoration-line مع القيمة overline في لغة CSS.

h1
{
  text-decoration-line: overline;
}

</> CSS text decoration line through
خاصية text-decoration-line مع القيمة line-through في لغة CSS

خاصية text-decoration مع القيمة line-through-line تُضيف خط من خلال النصوص في لغة CSS. 
CSS text decoration line through

إضافة خط من خلال النص بواسطة خاصية text-decoration-line مع القيمة line-through في لغة CSS.

h1
{
  text-decoration-line: line-through;
}
css text decoration line through with Price

طريقة الغاء السعر القديم وإستبدالها بالسعر الجديد بواسطة text-decoration-line مع القيمة line-through في لغة CSS.

.old
{
  text-decoration-line: line-through;
  color:red;
}

</> CSS text decoration line underline
خاصية text-decoration-line مع القيمة underline في لغة CSS

خاصية text-decoration-line مع القيمة underline تُضيف خط أسفل النصوص في لغة CSS. 
CSS text decoration line underline

إضافة خط أسفل النص بواسطة خاصية text-decoration-line مع القيمة underline في لغة CSS.

h1
{
  text-decoration-line:underline;
}
مصطلحات الدرس
Decoration
Decoration

تزيين أو زخرفة

Property
Property

خاصية

Values
Values

قيم

None
None

لاشئ

Overline
Overline

أعلي الخط

Line-Through
Line-Through

عبر الخط

Underline
Underline

أسفل الخط

Element
Element

عنصر

Link
Link

رابط

اختصارات الدرس
CSS
CSS

Cascading Style Sheets

صفحات الأنماط الانسيابية
HTML
HTML

Hypertext Markup Language

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

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.