Materialize CSS颜色介绍和用法示例

它是用HTML、CSS和JavaScript创建的，由谷歌设计。原生设计是一种结合了成功设计的经典原则以及创新和技术的设计语言。
颜色：这是基于原生设计基色的调色板。这些颜色中的每一个都由基本颜色类别和可选的变亮或变暗类别定义。
要应用背景色，只需添加颜色名称和明暗作为元素的类。

< !DOCTYPE html> < html > < head > < !--Import Google Icon Font--> < link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet" > < !-- Compiled and minified CSS --> < link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css" > < !--Let browser know website is optimized for mobile--> < meta name = "viewport" content = "width=device-width, initial-scale=1.0" /> < / head > < body > < div class = "card-panel green" > lsbin < / div > < !-- Compiled and minified JavaScript --> < script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js" > < / script > < / body > < / html >

输出如下：

文章图片
要应用文字颜色，只需像以前一样将-text附加到颜色类即可。

< !DOCTYPE html> < html > < head > < !--Import Google Icon Font--> < link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet" > < !-- Compiled and minified CSS --> < link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css" > < !--Let browser know website is optimized for mobile--> < meta name = "viewport" content= " width = device -width, initial-scale = 1 .0" /> < / head > < body > < div class = "card-panel" > < span class = "green-text text-darken-2" > lsbin < / span > < / div > < !-- Compiled and minified JavaScript --> < script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js" > < / script > < / body > < / html >

输出如下：

文章图片
以下是一些彩色调色板：

名称	十六进制	颜色
红色减光2	#e57373
红色变暗4	#b71c1c
粉色减光3	#f48fb1
粉红变暗4	#880e4f
紫色减3	#ce93d8
紫色口音2	#e040fb
深紫色	#673ab7
靛青	#3f51b5
蓝色口音1	#82b1ff
深青色3	#00695c
绿色	#4caf50
浅绿色	#8bc34a
浅绿色darken-4	#33691e
黄色变暗4	#f57f17
棕色变暗1	#6d4c41