رنگ‌ها در CSS
سلکتور را بلدید. حالا رنگ بزنید. اولین مهارت رنگ ساده است: رنگ متن را با ویژگی color تنظیم کنید. پس‌زمینه، گرادیان و ریاضیات کامل رنگ بعداً می‌آید — امروز رنگ پیش‌زمینهٔ خوانا و قابل‌استفادهٔ مجدد.
color چه کار می‌کند؟
ویژگی color رنگ پیش‌زمینه را می‌گذارد — عمدتاً رنگ حروف. مرورگر همان رنگ محاسبه‌شده را برای چیزهایی که از currentColor پیروی می‌کنند هم به‌کار می‌برد (حاشیه، بعضی SVGها و تزئینات). داخل جعبه پشت متن را رنگ نمی‌کند؛ آن کار background-color است (ماژول‌های بعدی).
رنگ‌های نام‌دار در یک نگاه
CSS کلی رنگ نام‌دار دارد — کلمه‌هایی مثل teal و navy. اول یک مجموعهٔ روزمره را حفظ کنید. hex دقیق و rgb() در درس مقادیر رنگ می‌آید.
📊 رنگ‌های نام‌دار روزمره
| نام | حس | استفادهٔ معمول |
|---|---|---|
black / white |
حداکثر کنتراست | متن بدنه یا بوم صفحه (با احتیاط) |
navy / teal |
تأکید آرام برند | لینک، تیتر، یادداشت |
maroon / crimson |
هشدار یا تأکید قوی | خطا، برچسب فروش (کم) |
gray / silver |
متن فرعی آرام | کپشن، برچسب کم‌رنگ |
transparent |
کاملاً شفاف | پنهان کردن حاشیه بدون حذف ویژگی |
رنگ متن با یک نام
یک declaration عادی بنویسید: ویژگی color، مقدار یک رنگ نام‌دار. از متن پاراگراف شروع کنید تا صفحه حس داشته باشد.
رنگ نام‌دار روی متن پاراگراف
cssp {
color: teal;
}نتیجه را چطور بخوانیم؟
هر <p> جور با قانون، حروفش فیروزه‌ای می‌شود. نام ویژگی همیشه color است — نه text-color و نه font-color.
تیتر می‌تواند با بدنه فرق کند
غالباً تیتر تیره‌تر و پاراگراف آرام‌تر می‌خواهید. سلکتور جدا، رنگ جدا.
تأکید تیتر در برابر متن بدنه
cssh1 {
color: navy;
}
.lead {
color: gray;
}عادت طراحی
تیتر پررنگ اسکن را آسان می‌کند. متن فرعی نرم جلوی داد زدن کپشن را می‌گیرد. باز هم کنتراست کافی برای خواندن بگذارید.
رنگ ارث می‌برد
فرزندان color والد را می‌گیرند مگر خودشان رنگ بگذارند. برای همین رنگ روی یک ظرف می‌تواند کل بلوک متن را تم کند.
رنگ ارثی روی بلوک یادداشت
css.note {
color: maroon;
}چه چیزی ارث می‌برد؟
داخل <div class="note">…</div> پاراگراف‌ها و spanها تا وقتی قانون قوی‌تری عوضشان نکند، زرشکی می‌مانند. ارث‌بری قابلیت است — باگ نیست.
currentColor با متن هم‌رنگ می‌شود
currentColor یعنی «همان color محاسبه‌شدهٔ عنصر را بگیر.» وقتی حاشیه یا آیکون باید با متن هم‌قدم بماند، کاربردی است.
حاشیه با currentColor از متن پیروی می‌کند
css.badge {
color: teal;
border: 2px solid currentColor;
padding: 0.25rem 0.5rem;
}چرا زحمتش را بکشیم؟
یک بار color را عوض کنید — حاشیه دنبالش می‌آید. دیگر دو تا teal جدا برای هم‌رنگ نگه داشتن ندارید.
کارت تم‌دار (جمع‌بندی)
رنگ ظرف، override آرام‌تر روی فرزند، و تأکید با currentColor را با هم بگذارید.
تم کارت با override و currentColor
css.card {
color: navy;
border: 1px solid currentColor;
padding: 1rem;
}
.card .muted {
color: gray;
}color پس‌زمینه نیست
تازه‌کارها گاهی color می‌نویسند وقتی منظورشان پر کردن پشت متن است. از روز اول جدا نگه دارید:
color→ متن (پیش‌زمینه)background-color→ جعبهٔ رنگ‌شده پشت محتوا (به‌زودی)
خودتان امتحان کنید
- صفحه‌ای با تیتر،
<p class="lead">و<div class="note">با یک پاراگراف کوتاه. - بگذارید
h1 { color: navy; }،p { color: teal; }و.note { color: maroon; }— هر ناحیه را چک کنید. - روی یک span کوچک
.badge { color: teal; border: 2px solid currentColor; }— حاشیه باید با متن یکی باشد. - داخل
.cardرنگ navy روی کارت وcolor: grayروی.muted— برای آن خط، override فرزند باید ببرد. - اختیاری:
color: transparentروی یک برچسب تزئینی — متن محو می‌شود ولی جای چیدمان می‌ماند.
اشتباهات رایج
- با
colorجعبه را رنگ کردن — برای پر کردن، بعداًbackground-color - اختراع اسم (
lightishblue) — به کلیدواژهٔ واقعی CSS بچسبید یا منتظر hex/rgb بمانید - انتظار اینکه هر ویژگی مثل
colorارث ببرد — خیلی‌ها نمی‌برند - پریدن مستقیم به رشته‌های بلند hex قبل از جا افتادن رنگ نام‌دار
- نادیده گرفتن کنتراست (خاکستری خیلی روشن روی سفید) — قشنگ ولی ناخوانا
خلاصه
colorرنگ پیش‌زمینهٔ متن را می‌گذارد- رنگ نام‌دار (
teal،navy،maroon، …) برای شروع کافی است - فرزندان
colorرا ارث می‌برند تا خودشان عوضش کنند currentColorرنگ محاسبه‌شدهٔ متن را برای حاشیه و دوستانش دوباره به‌کار می‌برد- فرمت‌های عمیق (hex، rgb، hsl) برای مقادیر رنگ؛ پس‌زمینه برای درس‌های بعد
- با تیتر / lead / note تمرین کنید تا ویژگی خودکار شود
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود