لون النص

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

في CSS، تُستخدم خاصية color لتعيين لون النص داخل العنصر. يمكنك تطبيق قيم ألوان مختلفة على النص لتحسين مظهر صفحة الويب الخاصة بك.

selector {
    color: value;
}

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

h3{
  color: purple;
}

التحدي

سهل

لقد تم تزويدك بمستند HTML يحتوي على عنوان (<h1>) وفقرة (<p>). مهمتك هي استخدام خاصية color لتنسيق هذه العناصر. اتبع الخطوات أدناه:

اكتب قاعدة CSS تستهدف عنصر <h1>. قم بتعيين الـ color إلى purple.
اكتب قاعدة CSS تستهدف عنصر <p>. قم بتعيين الـ color إلى yellow.

ورقة مرجعية

تحدد خاصية color لون النص داخل العنصر:

selector {
    color: value;
}

مثال:

h3 {
    color: purple;
}

جرّب بنفسك

<html>
<head>
    <title>Text Color</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
</body>
</html>

اختبر نفسك

يتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.

جميع دروس Styling with CSS

1مقدمة

ما هي CSS؟بنية CSS تعليقات CSS وسم Head وسم Title

4أساسيات النصوص

لون النصعائلة الخط حجم الخط سمك الخط محاذاة النص زخرفة النص تحدي المراجعة رقم 1 تحدي المراجعة رقم 2

7نموذج الصندوق - الجزء الأول

ما هو نموذج الصندوق؟المسافات الداخلية (Padding)الهوامش (Margins)الحدود (Borders)العرض والارتفاع تحدي المراجعة

10نموذج تسجيل الدخول

جسم الصفحة حاوية النموذج

حقل إدخال

زر

13صفحة ويب تونغا

قائمة التنقل رأس الترحيب

2إضافة CSS

CSS سطري CSS داخلي CSS خارجي تحدي التنسيق الأساسي

5الألوان والخلفيات

لون الخلفية ألوان HEX ألوان RGB الشفافية باستخدام RGBA تحدي المراجعة #1

8نموذج الصندوق (Box Model) - الجزء الثاني

تحجيم الصندوق (Box Sizing)حواف العناصر (Border Radius)التدفق الزائد (Overflow)ظل الصندوق (Box Shadow)تحدي المراجعة

11تقنيات التخطيط

العناصر من نوع Block مقابل Inline أساسيات تحديد المواقع (Positioning)تحديد الموقع النسبي (Relative)تحديد الموقع المطلق (Absolute)تحديد الموقع الثابت (Fixed)أساسيات Z-Index تحدي المراجعة

14التحديات النهائية

ترتيب العناصر قائمة الأفلام بطاقة دعوة زفاف إشعار عائم