آموزش طراحی وب

[pari sima]

اولین و مهمترین استایلی که شما برای یک صفحه وب به کار می برید انتخاب رنگ برای تمامی اجزای صفحه است. زیرا این رنگ ها هستند که کاربران را به سایت شما جذب می کنند و اعتبار سایت شما را در نگاه اول در ذهن بیننده تعیین می کند.
رنگی که برای طراحی وبسایت در نظر می گیرید باید براساس روانشناسی کاربران انتخاب شده باشد. مثلا برای یک وبسایت پزشکی معمولا از رنگ های آبی یا سفید استفاده می کنند یا برای وبسایتهای موزیک از رنگ های داغ و شاد استفاده می شود.
اما در CSS چگونه رنگ ها برای استایل های مورد نظر تعریف می شوند؟

استفاده از رنگ ها در وب توسط CSS :
رنگ ها در وب ترکیبی از سه رنگ اصلی قرمز Red، آبی Blue و سبز Green می باشند. مثلا اگر رنگ آبی و سبز را باهم ترکیب کنیم حاصل رنگ فیروزه ای خواهد شد یا ترکیب رنگ قرمز و سبز رنگ زرد می شود.
در وب به شیوه های مختلفی از رنگ ها برای تغییر رنگ استایل های مورد نظر استفاده می شود
1- توسط نام رنگ
2- توسط مقدار RGB
3- توسط مقدار یا کد هگزا دسیمال یا hexadecimal
4- توسط مقدار HSL (CSS3)
5- توسط مقدار HWB (CSS4)

1- استفاده از نام رنگ :
سی اس اس(CSS) از 140 نام رنگ پشتیبانی می کند. مثلا برای رنگ زرد عبارت yellow یا برای آبی روشن light-blue را استفاده می کنیم. در کد زیر رنگ متن را برای کلاس sample به رنگ صورتی تغییر داده ایم :
.sample {
Color: pink;
}
لیست نام رنگ ها را می توانید از لینک زیر پیدا کنید :
HTML Color Names
البته استفاده از نام رنگ ها بعلت محدودیت و تاثیر سرعت بر روی برنامه زیاد پیشنهاد نمی شود.

استفاده از مقدار هگزا دسیمال :
کلیه رنگ ها با یک کد هگزا دسیمال (اعداد در مبنای 16) در وب قابل شناسایی هستند. مقدار هگزادسیمال در تمامی مرورگرها پشتیبانی می شود.
مقدار هگزا دسیمال اینگونه مشخص می شود: #RRGGBB
مقدارها RR(Red) و BB(Blue) و GG(Green) اعداد صحیحی هستند که از 0 تا 9 و A تا F مقدار دهی می شوند. مقدار A تا F همان اعداد 10 تا 15 هستند.
مثلا:
رنگ آبی مطلق به این صورت مشخص می شود : #0000FF یعنی مقدار قرمز و سبز 0 و مقدار آبی هم آخرین سطح یعنی F است.
مقدارهگزادسیمال هر رنگ را می توانید به صورت دستی یا از نرم افزارهای گرافیکی مختلفی که بهترین آنها فتوشاپ است پیدا کنید. ابتدای مقدار هگزا دسیمال را با استفاده از یک شارپ # در ابتدای آن مشخص می کنند.
برای مثال کد رنگ سفید #FFFFFF و کد رنگ نوعی بنفش #ad408f می باشد.
.sample {
Color: #ad408f;
}

3- استفاده از مقدار RGB:
مقدار رنگ RGB توسط کلیه مرورگرها پشتیبانی می شود.
یک مقدار رنگ RGB در CSS اینگونه مشخص می شود :
RGB(Red,Green,Blue)
میزان هر یک از مقادیر Red,Bule,Green با اعداد صحیح بین 0 تا 255 مشخص می شود و نتیجه رنگی ترکیب شده از این سه رنگ می شود. (یعنی از مشکی یا 0 شروع شده و تا 255 که رنگ اصلی هست مایل می شود)
مثلا سبز مطلق این گونه می شود rgb(0,255,0) (مقدار قرمز و آبی عدد 0 تعیین شده است)
.sample {
Color: rgb(0,255,0);
}