آموزش استفاده از رنگ ها در w3.css

به اولین بخش از شروع کار عملی با w3.css خوش اومدین. از این پست به بعد شروع میکنیم به آموزش کلاس ها و فوت و فن های استفاده از اون ها. البته مهمه که قبل از اون درس های قبلی رو بخونید رو پیش زمینه داشته باشید. پس اگه پس های قبلی رو نخوندید پیشنهاد می دم این مقالات رو بخونید: مقدمه فریم ورک w3.css و شروع کار با w3.css

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

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

انتخاب رنگ پس زمینه (background) در w3.css

برای انتخاب رنگ پس زمینه در w3.css از کلاس w3-colorname  استفاده میکنیم. به مثال پایین توجه کنید:

w3.css is a free framework

< div class = " w3-container w3-blue" > w3.css is a free framework < /div >

در مثال بالا از کلاس w3-container استفاده شده که در آینده به اون می رسیم

شما می تونید لیست تمامی رنگ ها را در اینجا پیدا کنید.

شما می توانید از کلاس w3-colorname در تمامی عناصر موجود در صفحه که رنگ پس زمینه برای آن ها در نظر گرفته شده است استفاده کنید.

انتخاب رنگ متن در w3.css

برای انتخاب رنگ متن در w3.css از کلاس w3-text-colorname استفاده می کنیم. به مثال پایین توجه کنید:

w3.css is a free framework

< div class = " w3-container w3-text-blue" > w3.css is a free framework < /div >

در مثال بالا از کلاس w3-container استفاده شده که در آینده به اون می رسیم

شما می توانید لیست تمامی رنگ های متن را در اینجا ببنید.

تغییر رنگ هنگام قرار گرفتن ماوس بر روی عنصر در w3.css

برای اینکه بتونید رفتار رنگ پس زمینه و رنگ متن رو تعیین کنید وقتی که ماوس بر روی اون ها قرار میگیره می تونید از کلاس های w3-hover-colorname و w3-hover-text-colorname استفاده کنید.

ماوس رو روی جعبه زیر ببرید

w3.css is a free framework

< div class = " w3-container w3-blue w3-hover-red" > w3.css is a free framework < /div >

ماوس رو روی نوشته ی زیر ببرید

w3.css is a free framework

< div class = " w3-container w3-text-blue w3-hover-text-red" > w3.css is a free framework < /div >