زخرفة النص

جزء من قسم Styling with CSS في رحلة HTML على Coddy. الدرس 22 من 76.

في CSS، تُستخدم الخاصية text-decoration لإضافة أو إزالة الزخارف من text داخل عنصر HTML. تتيح لك هذه الخاصية تطبيق underline أو overline أو strike-through على text، مما يوفر تأكيدًا بصريًا أو يشير إلى حالات محددة.

تتضمن القيم الشائعة لـ text-decoration ما يلي:

none: يزيل أي تنسيق للنص. هذه هي القيمة الافتراضية.

underline: يضيف خطًا سفليًا إلى النص.

overline: يضيف خطًا علويًا فوق النص.

line-through: يضيف خطًا عبر منتصف النص (نص يتوسطه خط).

على سبيل المثال:

a {
    text-decoration: none;
}

.underline {
    text-decoration: underline;
}

.strike {
    text-decoration: line-through;
}

التحدي

سهل

لديك مستند HTML يحتوي على paragraph (<p>) يتضمن عنصر anchor (<a>)، وdivision (<div>). مهمتك هي استخدام الخاصية text-decoration لتنسيق هذه العناصر. اتبع الخطوات التالية:

اكتب قاعدة CSS تستهدف جميع عناصر <a>. عيّن قيمة text-decoration إلى none لإزالة التسطير الافتراضي.
أضف السمة class بالقيمة "underline" إلى عنصر <p>.
اكتب قاعدة CSS تستهدف جميع العناصر التي لها الفئة underline. عيّن قيمة text-decoration إلى underline.
أضف السمة class بالقيمة "strike" إلى عنصر <div>.
اكتب قاعدة CSS تستهدف جميع العناصر التي لها الفئة strike. عيّن قيمة text-decoration إلى line-through.

المخرجات المطلوبة: [المحتوى المترجم هنا]

جرّب بنفسك

<html>
<head>
    <title>Text Decoration</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <p>This is a paragraph with a <a href="#">link</a>.</p>
    <div>This is a division.</div>
</body>
</html>