زخرفة النص

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

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

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

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

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

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

line-through: يضيف خطًا في منتصف النص (يتوسطه خط). يُستخدم عادةً للإشارة إلى نص حُذف أو أُزيل أو لم يعد صالحًا.

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

a {
    text-decoration: none;
}

.underline {
    text-decoration: underline;
}

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

التحدي

سهل

أُعطيت مستند HTML يحتوي على فقرة (<p>) تتضمن عنصر ارتساء (<a>)، وعنصر تقسيم (<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>