تغییر رنگ پس زمینه (Background) عنصرها، با کلاس های (Class) به شکل کلی w3-color ، در W3.CSS
در کلید شماره 26146 ، در مورد رنگ ها (Color) در W3.CSS صحبت کردیم. با فرض دانستن مقدمات مربوط به آن کلید آموزشی، اکنون قصد داریم آموزش بدهیم که در صورت دانستن نام رنگ (Color) مورد نظرتان، چگونه آن را برای تغییر رنگ پس زمینه (Background) عنصرها به کار ببرید.
برای این منظور، شکل کلی کلاس (Class) مورد نیاز که باید برای عنصر مورد نظرمان در صفحه HTML ذکر شود، به صورت زیر می باشد :
که در آن، باید به جای کلمه color ، نام رنگ مورد نظر خود را بنویسید (البته با حروف کوچک).
بنابراین در کلاس های (Class) مربوط به تغییر رنگ پس زمینه (Background) عنصرها، ابتدا عبارت w3- نوشته می شود و سپس نام مربوط به رنگ، ذکر خواهد شد. مثل کلاس های زیر :
این کلاس ها (Class)، رنگ پس زمینه عنصر را تغییر می دهند. به عنوان مثال، کلاس w3-green ، باعث می شود که رنگ پس زمینه عنصر برابر رنگ سبز (green) باشد.
این کلاس ها (Class)، تنها رنگ پس زمینه را تغییر نمی دهند، بلکه رنگ متن نمایش داده شده در عنصر را نیز مشخص می کنند که بر اساس اینکه رنگ روشن باشد یا رنگ تیره، یکی از دو رنگ سیاه (black) یا سفید (white) را برای متن درون عنصر تعیین می کنند.
به مثال زیر توجه کنید :
بخش مهم کدها :
کد کامل صفحه HTML :
نتیجه :
رنگ پس زمینه عنصر برابر رنگ آبی (blue) تعیین شده است و همچنین رنگ متن درون عنصر نیز برابر رنگ سفید (white) خواهد بود (رنگ متن متناظر با رنگ پس زمینه آبی) :
در این مثال، فهرست رنگ های استاندارد تعریف شده در چارچوب W3.CSS را در کنار هم و با رنگی کردن پس زمینه تعدادی عنصر div نمایش می دهیم.
بخش مهم کدها :
کد کامل صفحه HTML :
نتیجه :
