به آموزشگاه بیاموز خوش آمدید!

سبد خرید (0)

رنگ ها در W3.CSS

رنگ های جدید

کلاس های رنگی در W3.CSS  از رنگ های استفاده شده  در بازاریابی ،نشانه های جاده و یادداشت های چسبنده الهام گرفته است:

Red

Green

Blue

Black

Pink

Teal

Indigo

Brown

Orange

Cyan

Purple

Gray

Yellow

Lime

Khaki

Lightgray


کلاس های مربوط به رنگ در W3.CSS

در W3.CSS کلاس های زیر برای تنظیم رنگ ارائه شده است:

Class Defines
w3-color رنگ پس زمینه یک عنصر
w3-text-color رنگ متن برای یک عنصر
w3-hover-color یک رنگ پس زمینه با قابلیت  hoverable برای یک عنصر (زمانی که موس روی عنصر قرار گرفت، رنگ آن تغییر می کند)
w3-hover-text-color یک رنگ  متن با قابلیت hoverable برای یک عنصر (زمانی که موس روی عنصر قرار گرفت، رنگ آن تغییر می کند)

توجه: در کلاس های بالا بجای کلمه color از نام رنگ های از پیش تعریف شده W3.CSS  استفاده نمایید.


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

کلاس w3-color برای تنظیم یک رنگ پس زمینه برای یک عنصر خاص مورد استفاده قرار میگیرد:

لندن

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

 

لندن

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

مثال

<div class="w3-red">
  <h2>London</h2>
  <p>London is the most populous city in the United Kingdom,
  with a metropolitan area of over 9 million inhabitants.</p>
</div>
خودتان امتحان کنيد »

تنظیم رنگ برای متن ها

کلاس w3-text-color  برای تنظیم رنگ متن ها برای یک عنصر به کار می رود:

مثال

<div class="w3-text-red">
  <h2>London</h2>
  <p>London is the most populous city in the United Kingdom,
  with a metropolitan area of over 9 million inhabitants.</p>
</div>
خودتان امتحان کنيد »

کلیه کلاس های رنگ در W3.CSS 

کلاس های w3-color  برای هرکدام از عناصر HTML مورد استفاده قرار میگیرند : (کلمه color با رنگ مورد نظرتان جایگزین خواهد شد)


کلیه کلاس های رنگ متن در  W3.CSS

کلاس های w3-text-color  میتوانند روی هرکدام  از عنصر HTML  اعمال شوند. 

روی مشکی

w3-text-red

w3-text-pink

w3-text-purple

w3-text-deep-purple

w3-text-indigo

w3-text-blue

w3-text-light-blue

w3-text-cyan

w3-text-aqua

w3-text-teal

w3-text-green

w3-text-light-green

w3-text-lime

w3-text-sand

w3-text-khaki

w3-text-yellow

w3-text-amber

w3-text-orange

w3-text-deep-orange

w3-text-blue-grey

w3-text-brown

w3-text-light-grey

w3-text-grey

w3-text-dark-grey

w3-text-black

w3-text-white

روی خاکستری

w3-text-red

w3-text-pink

w3-text-purple

w3-text-deep-purple

w3-text-indigo

w3-text-blue

w3-text-light-blue

w3-text-cyan

w3-text-aqua

w3-text-teal

w3-text-green

w3-text-light-green

w3-text-lime

w3-text-sand

w3-text-khaki

w3-text-yellow

w3-text-amber

w3-text-orange

w3-text-deep-orange

w3-text-blue-grey

w3-text-brown

w3-text-light-grey

w3-text-grey

w3-text-dark-grey

w3-text-black

w3-text-white

روی سفید

w3-text-red

w3-text-pink

w3-text-purple

w3-text-deep-purple

w3-text-indigo

w3-text-blue

w3-text-light-blue

w3-text-cyan

w3-text-aqua

w3-text-teal

w3-text-green

w3-text-light-green

w3-text-lime

w3-text-sand

w3-text-khaki

w3-text-yellow

w3-text-amber

w3-text-orange

w3-text-deep-orange

w3-text-blue-grey

w3-text-brown

w3-text-light-grey

w3-text-grey

w3-text-dark-grey

w3-text-black

w3-text-white


رنگ های Hover در W3,.CSS

کلاس های w3-hover-color و w3-hover-text-color  تمام رنگ های بالا  را   به عنوان رنگ های شناور(hoverable) پس زمینه و متن  پشتیبانی میکنند .

 از کلاس w3-hover-color   برای تغییر رنگ پس زمینه زمانی که با موس روی یک عنصر می رویم ، استفاده می شود:

لندن

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

از کلاس w3-hover-text-color   برای تغییر رنگ متن زمانی که با موس روی یک عنصر می رویم ، استفاده می شود:

مثال

<div class="w3-container w3-orange w3-hover-yellow">
  <h2>London</h2>
  <p>London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.</p>
</div>

<div class="w3-container w3-orange w3-hover-text-white">
  <h2>London</h2>
  <p>London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.</p>
</div>
خودتان امتحان کنيد »

عناصر رنگی

کلاس های w3-color  و w3-text-color برای رنگ دهی هرعنصری که شما دوست دارید مورد استفاده قرار میگیرند:

 دکمه ها:

متن :

Red Purple Blue Green Orange

حاشیه ها:

Red Green Blue Black Orange

جداول:

Name Points
جیل اسمیت 50
اوی جکسون 94
آدام جانسون 67

کارت  ها:

یک خودرو، یک وسیله نقلیه دارای  چرخ و با موتور  خودنیرو  است که برای حمل و نقل استفاده میشود.اکثر تعاریف این کلمه اینگونه مشخص میکنند که خودروها در درجه اول برای حرکت روی جاده ها  با صندلی برای یک تا هشت فرد طراحی شده اند و به طور معمول چهار چرخ دارد.

(ویکی پدیا)