codecamp

W3.CSS Color (材料)

CSS 默认颜色类

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

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

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

w3-红色尝试一下 »

w3-粉色尝试一下 »

w3-紫色尝试一下 »

w3-深紫色尝试一下 »

w3-靛蓝色尝试一下 »

w3-蓝色尝试一下 »

w3-浅蓝色尝试一下 »

w3-青色尝试一下 »

w3-aqua 尝试一下 »

w3-深绿色尝试一下 »

w3-绿色尝试一下 »

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，免费阅读超1000+编程语言教程

取消

确定

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }