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

با سلام خدمت شما همراهان گرامی وب سایت پرنیان طرح

در این آموزش قصد داریم رنگ ها و نحوه کار با رنگ ها را در css و استایل دهی صفحات وب سایت به شما آموزش دهیم.

در ادامه با ما همراه باشید.

دنیای رنگ ها در کامپیوتر

قبل از شروع مباحث استایل دهی در css باید بدانیم که رنگ ها در دنیای کامپیوتر چگونه مقداردهی و به سیستم معرفی می شوند.

رنگ ها در دنیای کامپیوتر با سه رنگ اصلی R قرمز(RED) و G سبز (GREEN) و B آبی (BLUE) مشخص می شوند. و باقی رنگ ها از ترکیب مقادیر متفاوتی از این رنگ ها با یکدیگر ایجاد می شوند. برای بیان رنگ ها در CSS معمولا نیاز به تعیین 3 مولفه داریم که این 3 مولفه همان مقادیر این سه رنگ اصلی هستند.(در مورد RGBبیشتر بدانیم)

برای معرفی یک رنگ و شدت و روشنایی آن در یک سیستم کامپیوتری روش های گوناگونی وجود دارد.برای مثال روش های  HEX-RGB-RGBA-HSL-HSLA

روش HEX

در این روش، سه رنگ اصلی گفته شده به مبنای 16 تبدیل شده و مقدار دهی می شوند.

نکته: در این روش قبل از مقدار دهی به کد رنگ ها باید از علامت” # ” استفاده کنید.
[PHP]
div {
background-color:#b7dac9;
}
p {
color:#dad6e6;
}
[/PHP]

نکته: در این روش اگر شما به جای مقداردهی 6حرفی، از مقداردهی 3 حرفی استفاده کنید برای مرورگر به این معنی خواهد بود که سایر ارقام ذکر نشده نیز همان مقدار را می گیرند. مثال:

[php]
div {
/* ffffff */
background-color: #fff;
}
p {
/* 333333 */
color: #333;
}
[/php]

نکته: اشکال این روش، در این است که از فاکتور آلفا (alpha) برای تعیین میزان شفافیت (opacity) پشتیبانی نمی کند.

روش RGB

همانطور که در ابتدای توضیحات گفته شد، این روش از مقدار دهی به سه رنگ اصلی قرمز، سبز و آبی تشکیل می شود. اما این روش نیز مانند روش HEXاز فاکتور آلفا پشتیبانی نمی کند.

[PHP]
p {
color: rgb(99,141,200);
}
[/php]

نکته : در این روش اعداد، بدون تغییر مبنا، در بازه ای بین 0 تا 255 تعریف می شوند.

روش RGBA

این روش دقیقا مانند روش RGB است با این تفاوت که از فاکتور آلفا نیز پشتیبانی می کند.

[PHP]
P {
color: rgb(99,141,200,0.4);
}
[/PHP]

روش HSL و HSLA

این روش ها نیز دقیقا مانند روش RGBو RGBA مانند بکدیگر هستند که روش HSL بدون پشتیبانی از فاکتور آلفا و روش HSLA با اعمال فاکتور آلفا عمل مقداردهی را انجام می دهند.

پیشنهاد می شود به علت پیچیده بودن این روش، مطالعه بیشتری درباره آن داشته باشید.

[PHP]
H4 {
background-color: hsl(120, 100%, 25%);
}

H4{
background-color: hsla(120, 90%, 25%, 0.1);
}
[/PHP]

رنگ های از پیش تعریف شده در مرورگرها

برخی رنگ ها به دلیل اینکه برای مرورگرها شناخته شده هستند، می توانند تنها با نوشتن نام آنها توسط برنامه نویس اعمال شوند. یعنی کافیست نام آنها را به ذهن بسپارید و درموقعیت دلخواه از آن استفاده کنید.

برای مثال به جای FFF#  میتوانید از  نوشتن کلمه WHITE و به جای 000# از کلمه BLACK استفاده کنید.

[PHP]
a{
color: blue;
border-color: black;
}

p{
color: yellow;
}

div {
color: green;
}
[/php]

میخواهم بیشتر بدانم.