CSS

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

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

التاريخ

09 نوفمبر 2020

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

5197

المواضيع

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

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