CSS Text Decoration Line
ديكور خطوط النصوص في CSS
ستتعلم في هذا الدرس طريقة زخرفة النصوص وإضافة خطوط أعلي وأسفل وخلال النص أو إلغاءها عن طريق خاصية text-decoration في لغة CSS.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
CSS Text Decoration
ديكور النصوص CSS
</>
CSS Text Decoration line
خاصية text-decoration-line في لغة CSS
تًستخدم خاصية text-decoration-line للتحكم في ديكور النصوص وهي تًضيف علي النص خطوط عرضية أعلي وأسفل ومن خلال النص لأي عنصر مثل سعر المنتج قبل الخصم يجب ان يكون عليه شطب عن طريق الخط العرضي من خلال السعر.
- 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;
مهم
</>
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;
}
ملاحظة
</>
CSS text decoration line overline
خاصية 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
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
CSS text decoration line underline
إضافة خط أسفل النص بواسطة خاصية text-decoration-line مع القيمة underline في لغة CSS.
h1
{
text-decoration-line:underline;
}
تزيين أو زخرفة
نص
خاصية
قيم
لاشئ
أعلي الخط
عبر الخط
أسفل الخط
عنصر
رابط
Cascading Style Sheets
صفحات الأنماط الانسيابية
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
