رنگ ها در W3.CSS
رنگ های جدید
کلاس های رنگی در W3.CSS از رنگ های استفاده شده در بازاریابی ،نشانه های جاده و یادداشت های چسبنده الهام گرفته است:
Red
Green
Blue
Black
Pink
Teal
Indigo
Brown
کلاس های مربوط به رنگ در 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 میلیون نفر میباشد.
مثال
<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 برای تنظیم رنگ متن ها برای یک عنصر به کار می رود:
مثال
<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 برای تغییر رنگ متن زمانی که با موس روی یک عنصر می رویم ، استفاده می شود:
مثال
<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 Green Blue Black Orange
جداول:
Name | Points |
---|---|
جیل اسمیت | 50 |
اوی جکسون | 94 |
آدام جانسون | 67 |
کارت ها:
یک خودرو، یک وسیله نقلیه دارای چرخ و با موتور خودنیرو است که برای حمل و نقل استفاده میشود.اکثر تعاریف این کلمه اینگونه مشخص میکنند که خودروها در درجه اول برای حرکت روی جاده ها با صندلی برای یک تا هشت فرد طراحی شده اند و به طور معمول چهار چرخ دارد.
(ویکی پدیا)
- نوشته شده توسط زهرا داوودی
- بازدید: 5719