تغییر رنگ متن CSS

تغییر رنگ متن CSS کار بسیار راحتی است؛ شما می‌توانید با استفاده از ویژگی‌های CSS، رنگ متن‌های وب‌ سایت خود را تغییر دهید، برای این کار می‌توانید از ویژگی color استفاده کنید. به عنوان مثال، اگر می‌خواهید رنگ پاراگرافی را به رنگ قرمز تغییر دهید می‌توانید این کار انجام دهید:

p {
  color: red;
}

بررسی رنگ قلم CSS

برای تغییر رنگ متن در CSS کافیست با فرمول زیر آشنا باشید:

color : value ;

در اینجا color به معنی رنگ است و value به معنی مقدار؛ به جای مقدار می‌توان نام‌های انگلیسی یک رنگ، مقادیر RGBA ،RGB ،HSLA ،HSL یا HEX را قرار داد؛ هر یک از این مقادیر مدل نوشتاری و کاربرد خاص خود را دارند که در ادامه آن‌ها را معرفی می‌کنیم.

مقدار RGB
مقدار RGB در CSS یک روش برای تعیین رنگ است؛ این حرف مخفف سه مقدار است: قرمز (Red)، سبز (Green) و آبی (Blue)؛ این مقادیر به صورت اعداد بین 0 تا 255 یا با درصد (از 0% تا 100%) تعریف می‌شوند.

با استفاده از مقادیر RGB، می‌توانید یک رنگ خاص را به صورت دستی و با ترکیب مقادیر قرمز، سبز و آبی مشخص کنید.

مقدار RGBA
RGBA شامل چهار مقدار است: سه مقدار برای رنگ (قرمز، سبز، آبی) و یک مقدار برای شفافیت (آلفا). مقدار قرمز (Red)، سبز (Green) و آبی (Blue) مانند رنگ RGB معمولی است اما مقدار آلفا (Alpha) نشان دهنده شفافیت رنگ است و در بازه 0 تا 1 یا 0% تا 100% قابل تنظیم است.

به عنوان مثال، اگر شما می‌خواهید یک رنگ با شفافیت مشخصی داشته باشید، می‌توانید از مقدار RGBA استفاده کنید.

مقدار HSL
HSL مخفف Hue (رنگ)، Saturation (اشباع یا غلظت) و Lightness (روشنایی) است و برای تنظیم رنگ به کار می‌رود.

• Hue: این مقدار بین 0 و 360 تنظیم می‌شود و نشان دهنده رنگ اصلی مانند قرمز، آبی، سبز و… است.
• Saturation: این مقدار میزان اشباع یا غلظت رنگ را بین 0% تا 100% نمایش می‌دهد. مقدار 0% نشان دهنده رنگ خاکستری و مقدار 100% نشان دهنده رنگی روشن و کم غلظت است.
• Lightness: این مقدار نیز بین 0% تا 100% تنظیم می‌شود و نشان دهنده روشنایی یا تاریکی رنگ است؛ مقدار 0% سیاه کامل و مقدار 100% سفید کامل را نشان می‌دهد.

مقدار HSLA
مقدار HSLA مانند HSL است با این تفاوت که یک مقدار دیگر به نام آلفا (Alpha) یا شفافیت به آن اضافه شده است. در واقع HSLA نشان دهنده رنگ بر اساس Hue (رنگ)، Saturation (غلظت)، Lightness (روشنایی) و آلفا (شفافیت) است.

مقدار آلفا یک عدد اعشاری است که می‌تواند بین 0 تا 1 یا معادلش از 0% تا 100% قرار بگیرد. این مقدار نشان دهنده درصد شفافیت یک رنگ است که هنگام استفاده در CSS، مقدار کمتر از 1 یا 100% باعث می‌شود تا رنگ شفاف‌تر نمایش داده شود.

مقدار Hex
مقدار Hex یک روش برای نمایش رنگ‌ها است که از کدهای شش رقمی در قالب عددی شانزده‌ گانه استفاده می‌کند. این رمز‌ها شامل ارقام (0 تا 9) و حروف الفبایی انگلیسی (A تا F) هستند و به صورت #RRGGBB نشان داده می‌شوند.

• RR نمایانگر مقدار قرمز (Red) است و می‌تواند بین 00 تا FF باشد.
• GG نمایانگر مقدار سبز (Green) است و می‌تواند بین 00 تا FF باشد.
• BB نمایانگر مقدار آبی (Blue) است و و می‌تواند بین 00 تا FF باشد.

در مثال زیر می‌توانید رنگی را ببینید که به روش‌های مختلف تعریف شده است:

body {
  color: lime;
}   

h1 {
  color: #00fa00;
}

p {
  color: rgb(0, 250, 0);
}

.section {
  color: inherit;
}

نحوه تغییر رنگ متن در HTML

ساده‌ترین راه برای تغییر رنگ یک عنصر HTML استفاده از ویژگی style و خاصیت color برای تغییر رنگ است؛ مثلاً:

<p style="color: rgb(255, 0, 255);">I am a unicorn</p>
<p style="color: #42f4ee;">I am a star</p>
<p style="color: lime;">I am a lime</p>

در دوره آموزش CSS بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.