خانه » آشنایی و تعریف رنگ ها در HTML , CSS

آشنایی و تعریف رنگ ها در HTML , CSS

  • تاریخ :‌
  • دسته : ---
در جلسه قبل با اصول کدنویسی در CSS آشنا شدید. در این قسمت از آموزش به معرفی رنگ ها در وب و نحوه تعریف یک رنگ در CSS می پردازیم.

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

استفاده از رنگ ها در وب توسط CSS
رنگ ها در وب ترکیبی از سه رنگ اصلی قرمز Red، آبی Blue و سبز Green می باشند. مثلا اگر رنگ آبی و سبز را باهم ترکیب کنیم حاصل رنگ فیروزه ای خواهد شد یا از ترکیب رنگ قرمز و سبز رنگ زرد به وجود می آید.

در وب به شیوه های مختلفی از رنگ ها برای تغییر رنگ استایل های مورد نظر استفاده می شود
توسط نام رنگ
توسط مقدار RGB
توسط مقدار یا کد هگزا دسیمال یا hexadecimal
توسط مقدار HSL (CSS3)
توسط مقدار HWB (CSS4)

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

.sample {
Color: pink;
}


لیست نام رنگ ها به طور کامل موجود است و می توانید از آنها استفاده کنید. البته استفاده از نام رنگ ها بعلت محدودیت و تاثیر سرعت بر روی برنامه زیاد پیشنهاد نمی شود.

2- استفاده از مقدار هگزا دسیمال
کلیه رنگ ها با یک کد هگزا دسیمال (اعداد در مبنای 16) در وب قابل شناسایی هستند. مقدار هگزادسیمال در تمامی مرورگرها پشتیبانی می شود.
مقدار هگزا دسیمال اینگونه مشخص می شود:

#RRGGBB

مقدارها RR(Red) و BB(Blue) و GG(Green) اعداد صحیحی هستند که از 0 تا 9 و A تا F مقداردهی می شوند. مقدار A تا F همان اعداد 10 تا 15 هستند.

مثال تعیین کدرنگ به روش هگزا دسیمال
رنگ آبی مطلق به این صورت مشخص می شود : #0000FF یعنی مقدار قرمز و سبز 0 و مقدار آبی هم آخرین سطح یعنی F است.
مقدارهگزادسیمال هر رنگ را می توانید به صورت دستی یا از نرم افزارهای گرافیکی مختلفی که بهترین آنها فتوشاپ است پیدا کنید. ابتدای مقدار هگزادسیمال را با استفاده از یک شارپ # در ابتدای آن مشخص می کنند.
برای مثال کد رنگ سفید #FFFFFF و کد رنگ نوعی بنفش #ad408f می باشد.
 
 .sample {
Color: #ad408f;
}


رنگ در html

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);
}


خب دوستان آموزش این قسمت از طراحی وب هم به پایان رسید. امیدوارم مفید واقع شده باشد.


مطالب مشابه

ارسال نظر

عکس خوانده نمی‌شود





2018 © تمامی حقوق این وب‌سایت برای پیشروسافت محفوظ است.
انصراف
سوالی دارید؟ پاسخگو هستیم