درس پنجم : رنگها در CSS
رنگها در CSS
رنگها در CSS با استفاده از نامهای رنگی از پیش تعریف شده یا مقادیر RGB، HEX، HSL، RGBA و HSLA مشخص میشوند.
نام رنگها (Color Names)
در CSS، یک رنگ را میتوان با استفاده از نام آن مشخص کرد. CSS از ۱۴۰ نام رنگ استاندارد پشتیبانی میکند.
Tomato
Orange
DodgerBlue
MediumSeaGreen
Gray
SlateBlue
رنگ پسزمینه (Background Color)
شما میتوانید برای عناصر HTML رنگ پسزمینه تنظیم کنید:
<h1 style=”background-color:DodgerBlue;”>Hello World</h1>
<p style=”background-color:Tomato;”>Lorem ipsum…</p>
<p style=”background-color:Tomato;”>Lorem ipsum…</p>
خروجی:
Hello World
این پاراگراف دارای پسزمینه گوجهفرنگی (Tomato) است.
رنگ متن (Text Color)
میتوانید رنگ متن را با ویژگی color تغییر دهید:
تیتر با رنگ Tomato
پاراگراف با رنگ DodgerBlue
پاراگراف با رنگ MediumSeaGreen
رنگ حاشیه (Border Color)
شما میتوانید رنگ حاشیهها را نیز تنظیم کنید:
Tomato Border
DodgerBlue Border
Violet Border
مقادیر رنگ (Color Values)
علاوه بر نامها، رنگها را میتوان با استفاده از فرمتهای دقیقتری مشخص کرد:
| فرمت | مثال | توضیح |
|---|---|---|
| RGB | rgb(255, 99, 71) | ترکیب قرمز، سبز و آبی (0-255) |
| HEX | #ff6347 | کد ششرقمی هگزادسیمال |
| HSL | hsl(9, 100%, 64%) | رنگ، غلظت و روشنایی |
شفافیت (RGBA و HSLA)
با اضافه کردن حرف a (Alpha) به انتهای RGB یا HSL، میتوانید میزان شفافیت رنگ را از 0.0 (کاملاً شفاف) تا 1.0 (کاملاً مات) تنظیم کنید.
این رنگ با 50% شفافیت نمایش داده شده است:
rgba(255, 99, 71, 0.5)پایان فصل پنجم
در درس بعدی به مبحث مهم «پسزمینهها در CSS» میپردازیم.