قبل تر در دوره HTML نگاه کوتاهی به رنگ ها و مدل های متفاوت اون ها داشتیم . در دوره آموزش CSS هم میخوایم یه مروری داشته باشیم و یکم بیشتر توضیح بدیم که حرفه ای تر بشیم !
اگه خاطرتون باشه رنگ ها چند حالت RGB, HEX, HSL, RGBA, HSLA داشت. هر کدوم خروجی یکسانی میده ولی طراحان گرافیک ممکنه از هر کدوم استفاده کنن و شما هم باید بدونین هر کدوم چجوری استفاده میشه .
توی دنیای کدنویسی رنگ ها اسم هم دارن. یعنی قرمز یه رنگ مشخص هست که توی تمام مرورگرها رنگش ثابت هست و کدش هم یکسانه. در کل ۱۴۰ رنگ و کدهاشون توی تمام مرورگرها و کدها تعبیه شده و وجود داره ولی کسی از اون ها استفاده نمیکنه و رنگ های خاص طراحی شده رو لحاظ میکنه .
رنگ پیش زمینه یا همون رنگ background
میتونین با استفاده از رنگ ها به پیش زمینه هر المان رنگ خاصی بدین مثل کدهای زیر :
Hello World
Lorem ipsum...
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>
رنگ متن ها در CSS
میتونین با استفاده از رنگ ها به رنگ متن هر المان رنگ خاصی بدین مثل کدهای زیر :
Hello World
Lorem ipsum...
Ut wisi enim...
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>
رنگ حاشیه ها در CSS
برای رنگ کردن حاشیه دور هر المان هم میتونین از رنگ ها استفاده کنین . مثل کدهای زیر :
Hello World
Hello World
Hello World
<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>
مقدارهای کمی متفاوت تر !
رنگ گوجه ای توی مرورگر ها قرار داره و کد رنگ ثابتی داره! کدهای زیر دقیقا رنگ گوجه ای در کدنویسی ها هستش که استاندارد ثابتی برای هست :
...
...
...
<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>
حالا میخوایم کاری کنیم که یکم transparent بشه رنگ! یعنی زیرش معلوم باشه تا حدودی !
...
...
<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>
از rgba و hsla استفاده میکنیم و عدد آخر رو برای transparent بودن رنگ در نظر میگیریم. که توی این مثال ۵۰ درصد استفاده شده. اون حرف a هم کوتاه شده alpha هست که همون transparent خودمونه !
