W3.CSS Colors (颜色)

2020-11-30 09:54 更新

W3.CSS 中使用的默认配色方案受“材料设计颜色”(营销,路标和便签中使用的颜色)的启发。

实例

<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>


尝试一下 »
点击“尝试一下”按钮查看在线实例

着色HTML元素

w3-color  和 w3-text-color 类可用于着色任何 HTML 元素:

容器:

实例

<div class="w3-panel w3-orange">

    <p><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">伦敦是英国人口最多的城市,拥有超过900万居民。</font></font></p>

</div>


尝试一下 »
点击“尝试一下”按钮查看在线实例

纽扣:

实例

<button class="w3-btn w3-margin-bottom w3-large w3-teal"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">蓝绿色</font></font></button>


尝试一下 »
点击“尝试一下”按钮查看在线实例

文本:

实例

<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>


尝试一下 »
点击“尝试一下”按钮查看在线实例

边框:

实例

<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>


尝试一下 »
点击“尝试一下”按钮查看在线实例

表格:

实例

<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;">点数</font></font></th>

    </tr>

    </tbody>

</table>


尝试一下 »
点击“尝试一下”按钮查看在线实例

卡片:

实例

<<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;">汽车是用于运输的轮式自供电汽车。</font><font style="vertical-align: inherit;">该术语的大多数定义都规定汽车的设计主要是在道路上行驶,可容纳1至8人的座位,通常具有四个车轮。</font><font style="vertical-align: inherit;">(维基百科)</font></font></p>

    </div>

</div>


尝试一下 »
点击“尝试一下”按钮查看在线实例

背景颜色

w3-color 类设置任何HTML元素的背景色:

实例

<div class="w3-red">

  <h2>伦敦</h2>

  <p>伦敦是英国人口最多的城市,拥有超过900万居民。</p>

</div>


尝试一下 »
点击“尝试一下”按钮查看在线实例

gray 和 grey 在所有 W3.CSS 类中都是可以互换的。


文本颜色

w3-text-color  类别设置任何 HTML 元素的文本颜色:

伦敦

伦敦是英国人口最多的城市,拥有超过900万居民。

伦敦

伦敦是英国人口最多的城市,拥有超过900万居民。

实例

<div class="w3-text-red">

   <h2>伦敦</h2>

   <p>伦敦是英国人口最多的城市,拥有超过900万居民。</p>

</div>


尝试一下 »
点击“尝试一下”按钮查看在线实例

悬停颜色

w3-hover-color 类定义为任何 HTML 元素的背景悬停颜色:

实例

<div class="w3-container w3-orange w3-hover-red">

   <h2>伦敦</h2>

   <p>伦敦是英国人口最多的城市,拥有超过900万居民。</p>

</div>

尝试一下 »
点击“尝试一下”按钮查看在线实例

w3-hover-text-color 类定义的任何 HTML 元素的文本悬停颜色:

实例

<div class="w3-container w3-orange w3-hover-text-white">

   <h2>伦敦</h2>

   <p>伦敦是英国人口最多的城市,拥有超过900万居民。</p> 

</div>


尝试一下 »
点击“尝试一下”按钮查看在线实例

颜色库

除了标准的 W3.CSS 颜色外,W3.CSS 还可以使用许多不同颜色库中的颜色:

Windows 颜色:

绿

蓝绿
 

时尚色彩:

火焰
绿化
码蓝
樱草黄

中性灰
阴影云杉
海军牡丹
黄褐色


公路颜色:

红色
绿色
蓝色
黄色


在本教程的后续章节中,您将学到更多有关颜色的知识。


以上内容是否对您有帮助:

您可能还喜欢:

在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号