W3.CSS Colors (顏色)
W3.CSS 中使用的默認(rèn)配色方案受“材料設(shè)計顏色”（營銷，路標(biāo)和便簽中使用的顏色）的啟發(fā)。
實(shí)例
<tr>
<td class="w3-panel w3-red" style="width:50%"><p><a target="_blank" href="tryit.asp?filename=tryw3css_colors_red"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">紅</font></font></a></p></td>
</tr>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
著色HTML元素
w3-color 和 w3-text-color 類可用于著色任何 HTML 元素：
容器：
實(shí)例
<div class="w3-panel w3-orange">
<p><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">倫敦是英國人口最多的城市，擁有超過900萬居民。</font></font></p>
</div>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
紐扣：
實(shí)例
<button class="w3-btn w3-margin-bottom w3-large w3-teal"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">藍(lán)綠色</font></font></button>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
文本：
實(shí)例
<div>
<span class="w3-xlarge w3-text-red w3-margin-right"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">紅色</font></font></span>
</div>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
邊框：
實(shí)例
<div style="width:50%">
<div class="w3-panel w3-border w3-border-red"><p><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">紅</font></font></p></div>
</div>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
表格：
實(shí)例
<table class="w3-table w3-bordered w3-light-gray">
<tbody><tr class="w3-black">
<th><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">名稱</font></font></th>
<th><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">點(diǎn)數(shù)</font></font></th>
</tr>
</tbody>
</table>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
卡片：
實(shí)例
<<div class="w3-card-4 w3-yellow" style="width:50%">
<div class="w3-container">
<p><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">汽車是用于運(yùn)輸?shù)妮喪阶怨╇娖嚒?lt;/font><font style="vertical-align: inherit;">該術(shù)語的大多數(shù)定義都規(guī)定汽車的設(shè)計主要是在道路上行駛，可容納1至8人的座位，通常具有四個車輪。</font><font style="vertical-align: inherit;">（維基百科）</font></font></p>
</div>
</div>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
背景顏色
w3-color 類設(shè)置任何HTML元素的背景色：
實(shí)例
<div class="w3-red">
<h2>倫敦</h2>
<p>倫敦是英國人口最多的城市，擁有超過900萬居民。</p>
</div>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
gray 和 grey 在所有 W3.CSS 類中都是可以互換的。
文本顏色
w3-text-color 類別設(shè)置任何 HTML 元素的文本顏色：
倫敦
倫敦是英國人口最多的城市，擁有超過900萬居民。
倫敦
倫敦是英國人口最多的城市，擁有超過900萬居民。
實(shí)例
<div class="w3-text-red">
<h2>倫敦</h2>
<p>倫敦是英國人口最多的城市，擁有超過900萬居民。</p>
</div>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
懸停顏色
w3-hover-color 類定義為任何 HTML 元素的背景懸停顏色：
實(shí)例
<h2>倫敦</h2>
<p>倫敦是英國人口最多的城市，擁有超過900萬居民。</p>
</div>嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
w3-hover-text-color 類定義的任何 HTML 元素的文本懸停顏色：
實(shí)例
<div class="w3-container w3-orange w3-hover-text-white">
<h2>倫敦</h2>
<p>倫敦是英國人口最多的城市，擁有超過900萬居民。</p>
</div>
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
顏色庫
除了標(biāo)準(zhǔn)的 W3.CSS 顏色外，W3.CSS 還可以使用許多不同顏色庫中的顏色：
Windows 顏色：
時尚色彩：
公路顏色：
在本教程的后續(xù)章節(jié)中，您將學(xué)到更多有關(guān)顏色的知識。
更多建議：