زخرفة النص

جزء من قسم Styling with 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.

ورقة مرجعية

تضيف خاصية text-decoration زخارف إلى النص داخل عناصر HTML أو تزيلها.

القيم الشائعة:

none: يزيل أي زخرفة للنص (افتراضي)
underline: يضيف خطاً تحت النص
overline: يضيف خطاً فوق النص
line-through: يضيف خطاً يتوسط النص

a {
    text-decoration: none;
}

.underline {
    text-decoration: underline;
}

.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>