W3.CSS Color (材料)

2020-12-03 10:06 更新

CSS 默认颜色类

CSS 中使用的默认颜色类是受材质设计的启发。

材料设计的颜色反映了在市场营销、路标和便利贴中使用的颜色。

以下 W3.CSS 颜色类可以用于任何 HTML 元素:





w3-深紫色  尝试一下 »

w3-靛蓝色   尝试一下 »

w3-蓝色    尝试一下 »

w3-浅蓝色    尝试一下 »



w3-深绿色   尝试一下 »

w3-绿色    尝试一下 »

w3-浅绿色   尝试一下 »

w3-石灰色    尝试一下 »


w3-卡其色  尝试一下 »


w3-琥珀色  尝试一下 »


w3-深橙色    尝试一下 »

w3-蓝灰色    尝试一下 »


w3-浅灰色   尝试一下 »


w3-深灰色   尝试一下 »


w3-浅红色   尝试一下 »

w3-淡黄色  尝试一下 »

w3-浅绿色    尝试一下 »

w3-浅蓝色   尝试一下 »

CSS 文本颜色类

以下 W3.CSS 文本颜色类可以用于任何 HTML 元素:


在黑色板

w3-text-红色

w3-text-粉色

w3-text-紫色

w3-text-深紫色

w3-text-靛蓝色

w3-text-蓝色

w3-text-浅蓝色

w3-text-青色

w3-text-水蓝色

w3-text-青绿色

w3-text-绿色

w3-text-浅绿色

w3-text-石灰色

w3-text-沙色

w3-text-卡其色

w3-text-黄色

w3-text-琥珀色

w3-text-橙色

w3-text-深橙色

w3-text-蓝灰色

w3-text-棕色

w3-text-浅灰色

w3-text-gray灰色

w3-text-深灰色

w3-text-黑色

w3-text-白色

在灰色板

w3-text-红色

w3-text-粉色

w3-text-紫色

w3-text-深紫色

w3-text-靛蓝色

w3-text-蓝色

w3-text-浅蓝色

w3-text-青色

w3-text-水蓝色

w3-text-青绿色

w3-text-绿色

w3-text-浅绿色

w3-text-石灰色

w3-text-沙色

w3-text-卡其色

w3-text-黄色

w3-text-琥珀色

w3-text-橙色

w3-text-深橙色

w3-text-蓝灰色

w3-text-棕色

w3-text-浅灰色

w3-text-灰色

w3-text-深灰色

w3-text-黑色

w3-text-白色

在白色板

w3-text-红色

w3-text-粉色

w3-text-紫色

w3-text-深紫色

w3-text-靛蓝色

w3-text-蓝色

w3-text-浅蓝色

w3-text-青色

w3-text-水蓝色

w3-text-青绿色

w3-text-绿色

w3-text-浅绿色

w3-text-石灰色

w3-text-沙色

w3-text-卡其色

w3-text-黄色

w3-text-琥珀色

w3-text-橙色

w3-text-深橙色

w3-text-蓝灰色

w3-text-棕色

w3-text-浅灰色

w3-text-灰色

w3-text-深灰色

w3-text-黑色

w3-text-白色



尝试一下 »


悬停颜色类

以下 W3.CSS 悬停颜色类可以在任何 HTML 元素上使用:


w3-hover-红色   尝试一下 »

w3-hover-粉色    尝试一下 »

w3-hover-紫色   尝试一下 »

w3-hover-深紫色  尝试一下 »

w3-hover-靛蓝   尝试一下 »

w3-hover-蓝色   尝试一下 »

w3-hover-浅蓝色    尝试一下 »

w3-hover-青色   尝试一下 »

w3-hover-水蓝色    尝试一下 »

w3-hover-青绿色   尝试一下 »

w3-hover-绿色    尝试一下 »

w3-hover-浅绿色   尝试一下 »

w3-hover-石灰色   尝试一下 »

w3-hover-沙色  尝试一下 »

w3-hover-卡其色   尝试一下 »

w3-hover-黄色    尝试一下 »

w3-hover-琥珀色    尝试一下 »

w3-hover-橙色    尝试一下 »

w3-hover-深橙色    尝试一下 »

w3-hover-蓝灰色    尝试一下 »

w3-hover-棕色    尝试一下 »

w3-hover-浅灰色    尝试一下 »

w3-hover-灰色    尝试一下 »

w3-hover-深灰色    尝试一下 »

w3-hover-黑色    尝试一下 »

w3-hover-浅红色    尝试一下 »

w3-hover-浅黄色  尝试一下 »

w3-hover-浅绿色   尝试一下 »

w3-hover-浅蓝色    尝试一下 »



以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号