رنگ نوشته و رنگ زمینه دو ویژگی جدا هستن. color جوهر حروف رو تغییر می‌ده و background-color سطح پشت عنصر رو رنگ می‌کنه. رنگ زمینه، رنگ خود متن رو تعیین نمی‌کنه؛ پس برای یک ترکیب خوانا باید هر دو رو آگاهانه انتخاب کنیم. نام‌های ساده مثل navy و white برای تمرین مناسبه و بعداً می‌تونی از کدهای دقیق‌تر مثل #ffffff هم استفاده کنی.
توی مثال، نوشته سفید روی زمینه سرمه‌ای میاد و بخش‌های بیرون برچسب تغییر نمی‌کنن. یک خطای معمول جابه‌جانوشتن نام دو ویژگیه؛ نتیجه ممکنه متن تیره روی زمینه روشن باشه، اما با طراحی خواسته‌شده فرق داره. رنگ تنها راه انتقال معنا نباشه: اینجا متن «اعلان جدید» هم نقش پیام رو روشن می‌کنه. به فضای پشت حروف و خود حروف جدا نگاه کن. رنگ محاسبه‌شده‌ای که ابزار مرورگر نشون می‌ده معمولاً به شکل rgb است، حتی اگه توی کد از نام انگلیسی رنگ استفاده کرده باشی؛ این تفاوت نمایش، تغییر معنای رنگ نیست.
✍️ مثال حل‌شده:
<span class="highlight">یادداشت</span>
<style>.highlight { color: white; background-color: navy; }</style>
حالا نوبت توئه: نمونه اعلان را اجرا و دو ویژگی را پیدا کن: .notice باید نوشته سفید و زمینه سرمه‌ای داشته باشد. متن فارسی باقی بماند و ناحیه بیرون اعلان همان زمینه روشن صفحه باشد. این گام آموزشی است؛ تفاوت رنگ متن و زمینه را از روی خروجی تشخیص بده.
فعالیت شما
نمونه اعلان را اجرا و دو ویژگی را پیدا کن: .notice باید نوشته سفید و زمینه سرمه‌ای داشته باشد. متن فارسی باقی بماند و ناحیه بیرون اعلان همان زمینه روشن صفحه باشد. این گام آموزشی است؛ تفاوت رنگ متن و زمینه را از روی خروجی تشخیص بده.