خانه / آموزش CSS / بخش چهارم-آموزش رنگ ها در CSS یا آموزش CSS Colors
پشتیبان وب سایت وردپرس
آموزش CSS Colors"

تاریخ بروزرسانی: ۲۳ بهمن ۱۳۹۷ تعداد بازدید : 18 بازدید بدون دیدگاه

بخش چهارم-آموزش رنگ ها در CSS یا آموزش CSS Colors

قدم قبلی >< قدم بعدی

 

رنگ ها در CSS
آموزش رنگ ها در CSS

CSS Colors

رنگ ها در CSS با استفاده از نام رنگ های پیش تعریف شده یا RGB، HEX، HSL، RGBA، HSLA مشخص می شوند.

نام رنگ

در HTML، رنگ با استفاده از نام رنگ مشخص می شود.

     Tomato
Orange
Dodger Blue
Medium Sea Green
Gray
Slate Blue
Violet
Light Gray

HTML از ۱۴۰ نام رنگ استاندارد پشتیبانی می کند.

رنگ پس زمینه

شما می توانید رنگ پس زمینه برای عناصر HTML را تنظیم کنید به مثال زیر توجه کنید:

مثال:

با اجرا کردن کد بالا نتیجه زیر را در خروجی خواهید دید:

رنگ پس زمینه

رنگ متن

شما می توانید رنگ متن را تنظیم کنید به مثال زیر توجه کنید:

مثال:

با اجرا کردن کد بالا نتیجه زیر را در خروجی خواهید دید:

رنگ متن

رنگ لبه

شما می توانید رنگ مرزها را تنظیم کنید به مثال زیر توجه کنید:

با اجرا کردن کد بالا نتیجه زیر را در خروجی خواهید دید:

رنگ مرزها

ارزش گزاری رنگ ها

در HTML، رنگ ها می توانند با استفاده از مقادیر RGB، مقادیر HEX، مقادیر HSL، مقادیر RGBA و مقادیر HSLA مشخص شوندبه مثال زیر توجه کنید:

 

با اجرا کردن کد بالا نتیجه زیر را در خروجی خواهید دید:

ارزش گزاری رنگ ها

ارزش RGB

در HTML، یک رنگ را می توان به عنوان یک مقدار RGB تعریف کرد، با استفاده از این فرمول:

rgb(red, greenblue

هر پارامتر (قرمز، سبز و آبی) شدت رنگ را بین ۰ تا ۲۵۵ تعریف می کند.

به عنوان مثال،  rgb (255، ۰، ۰) به صورت قرمز نمایش داده می شود، چرا که قرمز به بالاترین مقدار آن (۲۵۵) و دیگران به ۰ تنظیم شده است.

برای نمایش رنگ سیاه، تمام پارامترهای رنگ باید به ۰ تنظیم شود، مانند این: rgb (0، ۰، ۰).

برای نمایش رنگ سفید، تمام پارامترهای رنگ باید به ۲۵۵ تنظیم شود، مانند این: rgb (255، ۲۵۵، ۲۵۵).

سایه خاکستری اغلب با استفاده از مقادیر برابر برای تمام ۳ منبع نور تعریف می شود

ارزش HEX

در HTML، یک رنگ را می توان با استفاده از مقدار هگزادسیمال آن در فرم مشخص کرد:     #rrggbb

جایی که rr (قرمز)، gg (سبز) و bb (آبی) مقادیر هگزادسیم بین ۰۰ و ff هستند (همانند decimal 0-255).

به عنوان مثال، # ff0000 به صورت قرمز نمایش داده می شود، زیرا قرمز به بالاترین مقدار (ff) تنظیم شده است و دیگران به کمترین مقدار (۰۰) تنظیم می شوند.

سایه خاکستری اغلب با استفاده از مقادیر برابر برای تمام ۳ منبع نور تعریف می شود

ارزش HSL

در HTML، رنگ را می توان با استفاده از رنگ، اشباع و سبک (HSL) در فرم مشخص کرد:

hsl(huesaturationlightness)

سایه یک رنگ در چرخه رنگ از ۰ تا ۳۶۰ است. ۰ قرمز است، ۱۲۰ رنگ سبز است و ۲۴۰ آبی است.

اشباع یک رنگ مقداری بر اساس درصد است، ۰٪ به معنای سایه خاکستری است و ۱۰۰٪ رنگ کامل است.

روشنایی نیز یک مقدار بر اساس درصد است، ۰٪ سیاه است، ۵۰٪ چیزی بین نور و تاریکی است، ۱۰۰٪ سفید است.

اشباع

اشباع را می توان به عنوان شدت یک رنگ توصیف کرد.

۱۰۰٪ رنگ خالص است، بدون سایه خاکستری.

۵۰٪ یعنی که ۵۰٪ خاکستری است، اما شما هنوز هم می توانید رنگ را ببینید.

۰٪ به طور کامل خاکستری است، شما دیگر نمی توانید رنگ را ببینید.

روشنایی

Lightness یا روشنایی رنگ ها در CSS را می توان به عنوان مقدار نور مورد نظر برای رنگ نشان داد، که ۰٪ به معنای بدون نور (سیاه )، ۵۰٪ به معنای ۵۰٪ نور (نه تاریک و نه روشن) ۱۰۰٪ به معنی نور کامل (سفید) است.

سایه خاکستری اغلب با تنظیم رنگ و اشباع به ۰ و تنظیم نور از ۰٪ به ۱۰۰٪ برای تیره شدن / روشن تر شدن سایه ها تعریف می شود.

ارزش RGBA

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

مقدار رنگ RGBA مشخص شده است با:

rgba(red, greenblue, alpha)

پارامتر alpha یک عدد بین ۰٫۰ (کاملا شفاف) و ۱٫۰ است (کاملا شفاف نیست).

ارزش HSLA 

مقادیر رنگ HSLA یک فرمت از مقادیر رنگ HSL با یک کانال آلفا هستند که کدر بودن را برای رنگ ها در CSS مشخص می کند.

مقدار رنگی HSLA با مشخص کردن:

hsla(hue, saturationlightness, alpha)

پارامتر alpha یک عدد بین ۰٫۰ (کاملا شفاف) و ۱٫۰ است (کاملا شفاف نیست).

گام قبلی >< گام بعدی
لطفا امتیاز بدهید

لینک کوتاه این مطلب: https://tiktheme.com/?p=14981


کانال تلگرام تیک تم

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *