color

از ویژگی color برای اعمال رنگ به متن عنصر استفاده می شود.

رنگ یه متن می تواند یک رنگ تخت باشد و یا یک رنگ نیمه شفاف باشد. توجه داشته باشید که مقدار یک رنگ نمی تواند gradient باشد چرا که گرادینت ها نوعی تصویر هستند نه رنگ.

به عنوان نمونه فرض کنید پاراگرافی به صورت زیر داریم:

<p class="test">یه متن خوووشگل</p>

حال اگر می خواهیم متن پاراگراف را آبی کنیم خواهیم داشت:

.test {
  color: blue;
}

در ادامه مقادیری که این ویژگی می تواند بپذیرد در چندین مثال نشان داده شده اند:

color: lightblue;
color: #000;
color: #f5f5f5;
color: rgba(0,0,0);
color: rgba(0,0,0,0.5);
color: hsl(200, 50%, 80%);
color: hsla(140, 30%, 50%, 0.4);

برای بررسی کامل مقادیری که این ویژگی می تواند بپذیرد به مطلب مربوط به نوع داده ای <color> مراجعه کنید.

زمانی که رنگ نوشته تغییر می کند, رنگ خط روی نوشته, خط زیر نوشته و غیره که توسط ویژگی text-decoration تعیین می شود, نیز تغییر خواهد کرد.

رنگی که توسط ویژگی color تعیین می شود همان رنگی خواهد بود که currentColor عنصر در خود نگه می دارد.

ویژگی color از آن دسته ویژگی هایی است که به ارث می رسد. یعنی وقتی از طریق این ویژگی رنگی بر عنصری اعمال می کنیم آن رنگ به فرزندان آن عنصر نیز به ارث می رسد و تا زمانی که خود آن عناصر رنگشان تغییر نکند همان رنگ پدرشان را خواهند داشت.