رنگ در css – آموزش کار با رنگ در css

بعد از معرفی مقدمات استفاده از Css در دوره جامع آموزش Css، در این جلسه قراره درباره رنگ در css با هم صحبت کنیم. رنگ‌ها بخش مهمی از طراحی هستن که لازمه توجه زیادی بهشون داشته باشیم. یه سایت هر چقدر هم پیشرفته باشه اگه از رنگ‌ها به خوبی استفاده نکنه، شانس موفقیت چندانی نداره. چون بدون رنگ امکان جلب توجه کاربر سخت و تا حدی غیر ممکنه. به همین دلیل اولین جلسه بعد از مقدمات css رو اختصاص دادیم به نحوه استفاده از رنگ در css.

سیستم‌های مختلف انتساب رنگ در طراحی

قبل از اینکه درباره استایل‌های مربوط به کار با رنگ در css صحبت کنیم لازمه کمی درباره رنگ‌ها در طراحی بدونیم. میشه گفت توضیحاتی که در این قسمت میدم فقط مختص css یا طراحی سایت و یا برنامه نویسی نیست. بلکه این توضیحات به همه نرم افزارهای گرافیکی مثل فتوشاپ، ایلاستریتور و… هم مربوطه. وقتی قصد دارید رنگ قسمتی از صفحه سایتتون رو آبی کنید باید کامپیوتر رو متوجه کنید که هدفتون رنگ آبیه. شاید به نظرتون این قضیه ساده و بدیهی باشه اما خوبه بدونید که طیف‌های زیاد و متنوعی از رنگ آبی وجود داره. به این ترتیب ما نیاز به سیستمی داریم که طیف رنگی دلخواهمون رو به صورت دقیق و مشخص به سیستم کامپیوتری معرفی کنه.

برای حل این مشکل سیستم انتساب کد به طیف‌های رنگی مختلف پیشنهاد شد. وظیفه این سیستم اینه که هر رنگ موجود رو به یه کد انتساب میده. به این ترتیب دیگه نیاز نیست برای مشخص کردن رنگ ها و یا انتخاب اونها دچار سردرگمی بشیم و کافیه برای فراخوانی یه رنگ از کد اون رنگ استفاده کنیم. کدهای رنگی موجود به دو شکل کد هگز و کد RGB در دسترس هستند که می‌تونیم ازشون استفاده کنیم. کد هگز یه عبارت 6 حرفی الی 8 حرفی تشکیل شده از اعداد و حروف انگلیسیه که ترکیب اونها یه طیف رنگی رو مشخص میکنه. همچنین در ابتدای این عبارت یه علامت # قرار داره. کد رنگی RGB هم یه عدد سه بخشیه که هر بخش اون به ترتیب میزان رنگ قرمز، سبز و آبی برای ایجاد طیف رنگی مورد نظر رو نشون میده.

انتساب رنگ در css

برای انتساب رنگ به المان‌های مختلف در css شما می‌تونید از کد هگز و کد RGB رنگ مورد نظرتون استفاده کنید. البته اینم بگم که یکی از روش‌های انتساب رنگ به المان‌ها در css استفاده از اسم رنگ هست. یعنی به جای اینکه از کد رنگ قرمز استفاده کنیم می‌تونیم از کلمه Red استفاده کنیم که معادل رنگ قرمزه. اما این روش چندان محبوب و مورد علاقه نیست چون برای همه طیف‌های رنگ قرمز فقط می‌تونیم از عبارت Red استفاده کنیم که یه رنگ قرمز سیره. در این حالت همه طیف‌های رنگی قرمز نادیده گرفته میشن و قابل استفاده هم نیستن. به این ترتیب بهتره برای انتساب رنگ از کد هگز یا کد RGB رنگ مورد نظر استفاده کنید.

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

• سایت color hunt
• سایت colors
• سایت canva
• سایت color space

استایل‌های کار با رنگ در css

برای استفاده از رنگ در css یه سری استایل‌ها هست که با انتساب این استایل‌ها به المان‌های html مختلف، تغییرات مورد نظر به اون المان اعمال میشه. درواقع این استایل‌ها مخصوص به المان خاصی نیستن و میشه برای یک یا چند المان مورد استفاده قرار بگیرن. برای مثال استایلی که رنگ پس زمینه یه متن و رنگ پس زمینه یه div رو تغییر میده یکیه و اینجور نیست که هر المان استایل‌های خاص خودش رو داشته باشه. این در حالیه که بعضی از استایل‌ها خصوصی‌تر و فقط مربوط به یک المان html هستن و اگه برای المان دیگه‌ای مورد استفاده قرار بگیرن خرجی‌ای ندارن. به مرور که با استایل‌های مختلف آشنا میشید و ازشون استفاده میکنید کاربرد هرکدوم و محل استفادشون رو هم یاد میگیرید، بنابراین اصلا لازم نیست نگران باشید.

تغییر رنگ متن

برای تغییر رنگ متن از استایل color استفاده می‌کنیم. کد زیر یه تگ h1 رو نشون میده که قصد داریم رنگ اون رو تغییر بدیم. به این منظور کافیه استایل color رو بنویسیم و بعد از علامت : از اسم رنگ که در اینجا blue هست استفاده کنیم. همچنین ما می‌تونیم به جای استفاده از کلمه blue که اسم رنگ هست از کد هگز یا RGB اون استفاده کنیم.

<h1 style=”color:blue;”>Hello World</h1>

استفاده از کد هگز:

<h1 style=”color:#0000FF;”>Hello World</h1>

استفاده از کد RGB:

<h1 style=”color:rgb(0,0,255);”>Hello World</h1>

تغییر رنگ پس زمینه

به همین ترتیب برای تغییر رنگ پس زمینه یه المان html می‌تونیم از استایل background-color استفاده کنیم. برای نمونه کد زیر پس زمینه تگ h1 رو به رنگ آبی در میاره.

<h1 style=”background-color:Blue;”>Hello World</h1>

تغییر رنگ حاشیه

برای اغییر رنگ کادر دور یه المان هم می‌تونید از خاصیت border-color استفاده کنید. برای مثال کد زیر یه کادر آبی رنگ دور تا دور محتوای h1 ایجاد میکنه.

<h1 style=”border: 2px solid; border-color: blue;”>Hello World</h1>