وب کدر - آموزش زبان های برنامه نویسی تحت وب

آموزش زبان های برنامه نویسی وب از جمله زبان nodejs و هم چنین زبان های html ، css و جاوااسکریپت برای کاربران مبتدی و حرفه ای!

وب کدر - آموزش زبان های برنامه نویسی تحت وب

آموزش زبان های برنامه نویسی وب از جمله زبان nodejs و هم چنین زبان های html ، css و جاوااسکریپت برای کاربران مبتدی و حرفه ای!

چت-روم-فارسی-موبایل

درود;
به وب کدر خوش اومدین . بهترین سایت ایران برای آموزش زبان های برنامه نویسی وب !! به سوالات شما در اسرع وق پاسخ داده می شود.

طبقه بندی موضوعی

آموزش استفاده از رنگ ها در 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 >

نظرات  (۰)

هیچ نظری هنوز ثبت نشده است

ارسال نظر

ارسال نظر آزاد است، اما اگر قبلا در بیان ثبت نام کرده اید می توانید ابتدا وارد شوید.
شما میتوانید از این تگهای html استفاده کنید:
<b> یا <strong>، <em> یا <i>، <u>، <strike> یا <s>، <sup>، <sub>، <blockquote>، <code>، <pre>، <hr>، <br>، <p>، <a href="" title="">، <span style="">، <div align="">