سیاساس/رنگ
| انتخابگر | رنگ | پسزمینه |
| سیاساس |
راهنمای رنگها در CSS
[ویرایش]در CSS، میتوان رنگها را به روشهای مختلفی تعریف کرد: استفاده از نامهای رنگ، مقادیر RGB، HEX، HSL، و نسخههای شفاف آنها (RGBA و HSLA).
۱. استفاده از نامهای رنگ
[ویرایش]CSS از ۱۴۰ نام رنگ استاندارد مانند موارد زیر پشتیبانی میکند:
- Tomato
- Orange
- DodgerBlue
- MediumSeaGreen
- Gray
- SlateBlue
- Violet
- LightGray
مثال:
متن با رنگ Tomato
۲. رنگ پسزمینه (Background Color)
[ویرایش]برای تعیین رنگ پسزمینه یک عنصر:
۳. رنگ متن (Text Color)
[ویرایش]متنی با رنگ سبز دریایی
۴. رنگ حاشیه (Border Color)
[ویرایش]۵. انواع فرمتهای رنگ
[ویرایش]رنگها را میتوان با روشهای زیر تعیین کرد:
- نام رنگ: Tomato
- RGB:rgb(255, 99, 71)
- HEX: #ff6347
- HSL: hsl(9, 100%, 64%)
- RGBA:rgba(255, 99, 71, 0.5) (با شفافیت)
- HSLA: hsla(9, 100%, 64%, 0.5) (با شفافیت)
مثال:
۶. RGB در CSS
[ویرایش]فرمت: rgb(red, green, blue)
- مقادیر بین 0 تا 255
مثالهای کاربردی:
- قرمز: rgb(255, 0, 0)
- آبی: rgb(0, 0, 255)
- خاکستری متوسط: rgb(128, 128, 128)
برای ساخت رنگ خاکستری:
rgb(60, 60, 60) rgb(120, 120, 120)
۷. RGBA در CSS
[ویرایش]فرمت: rgba(red, green, blue, alpha)
- alpha از ۰ تا ۱، نشاندهنده شفافیت است.
مثالها:
rgba(255, 99, 71, 0.2) rgba(255, 99, 71, 0.6) rgba(255, 99, 71, 1)
۸. HEX در CSS
[ویرایش]فرمت: #rrggbb
- #ff0000: قرمز
- #000000: سیاه
- #ffffff: سفید
همچنین نسخه کوتاهنویسی مانند #f00 برای قرمز وجود دارد.
۹. HSL در CSS
[ویرایش]فرمت: hsl(hue, saturation, lightness)
- hue (زاویه رنگ): 0 تا 360 درجه
- 0 = قرمز، 120 = سبز، 240 = آبی
- saturation (اشباع): 0% تا 100%
- lightness (روشنایی): 0% (سیاه) تا 100% (سفید)
مثال:
hsl(200, 100%, 50%)
۱۰. HSLA در CSS
[ویرایش]فرمت: hsla(hue, saturation, lightness, alpha)
- مشابه HSL، با پارامتر شفافیت (alpha)
مثال:
hsla(200, 100%, 50%, 0.3)