最适合网络开发者的网站
W3CSS。初学者课程

尿素

W3.CSS 颜色库


颜色库

颜色库是小型 CSS 文件,包含常用的颜色值,如安全标准、高速公路颜色、时尚颜色、迷彩颜色等。

校车
猎鹰岭公园大道
停止

如何使用颜色库

颜色库使用起来很简单。只需在网页中添加颜色库的链接即可:

<link rel="stylesheet" href="../lib/w3-colors-highway.css">

然后,为想要着色的 HTML 元素添加一个类名:

<div class="w3-highway-schoolbus">校车</div>
<div class="w3-highway-green">猎鹰岭公园大道</div>
<div class="w3-highway-red">停止</div>
亲自尝试 »

美国高速公路颜色

w3-高速公路-棕色
w3-高速公路-红色
w3-高速公路-橙色
w3-高速公路校车
w3-高速公路-黄色
w3-高速公路-绿色
w3-高速公路-蓝色

例子

<div class="w3-highway-red">停止</div>
亲自尝试 »  全部尝试 »  下载 CSS »

高速公路颜色定义为 联邦标准 595.


美国安全色

w3-安全-红色
w3-安全-橙色
w3-安全-黄色
w3-安全-绿色
w3-安全-蓝色
w3-安全-紫色

例子

<div class="w3-safety-red">危险</div>
亲自尝试 »  全部尝试 »  下载 CSS »

美国安全颜色的定义是 联邦标准 595.


欧洲信号颜色

w3-信号-黄色
w3-信号-橙色
w3-信号-红色
w3-信号-紫罗兰
w3-信号-蓝色
w3-信号-绿色
w3-信号-灰色
w3-信号-棕色
w3-信号-白色
w3-信号-黑色

例子

<div class="w3-signal-red">停止</div>
<div class="w3-signal-yellow">等待</div>
<div class="w3-signal-green">去</div>
亲自尝试 »  全部尝试 »  下载 CSS »

欧洲信号颜色定义如下: RAL 颜色标准.


鲜艳的色彩

w3-鲜艳粉红色
w3-鲜艳红色
w3-鲜艳橙色
w3-鲜艳黄色
w3-鲜绿色
w3-鲜艳蓝色
w3-鲜艳紫罗兰
w3-鲜艳紫色
w3-鲜艳-黑色
w3-鲜艳-白色
W3-鲜艳的黄粉色
W3-鲜艳的红橙色
w3-鲜艳的橙黄色
W3-鲜艳的绿黄色
W3-鲜艳的黄绿色
W3-鲜艳的黄绿色
W3-鲜艳的蓝绿色
W3-鲜艳的绿蓝色
W3-鲜艳的紫蓝色
W3-鲜艳的红紫色
W3-鲜艳的紫红色

例子

<div class="w3-vivid-red">
<p>伦敦是英国人口最多的城市,
大都市区居民超过 900 万。</p>
</div>
亲自尝试 »  下载 CSS »

鲜艳的色彩被定义为 国立科学研究院.


食用色素

w3-食物-苹果
w3-食品-芦笋
w3-食品-杏
w3-食物-茄子
w3-食物-鳄梨
w3-食品-香蕉
w3-食物-黄油
w3-食品-蓝莓
w3-食品-樱桃
w3-食品-巧克力
w3-食物-蔓越莓
w3-食品-咖啡
w3-食物-鸡蛋
w3-食品-葡萄
w3-食品-猕猴桃
w3-食品-柠檬
w3-食品石灰
w3-食品-芒果
w3-食物-蘑菇
w3-食品-芥末
w3-食品-薄荷
w3-食品-橄榄
w3-食物-橙色
w3-食物豌豆
w3-食品-桃子
w3-食品梨
w3-食品-开心果
w3-食品-李子
w3-食物-覆盆子
w3-食品-藏红花
w3-食品-鲑鱼
w3-食品-留兰香
w3-食物-南瓜
w3-食品-草莓
w3-食物-番茄
w3-食品-小麦
w3-食物-葡萄酒

例子

<div class="w3-food-apple">苹果</div>
<div class="w3-food-banana">香蕉</div>
亲自尝试 »  全部尝试 »  下载 CSS »

迷彩颜色

w3-迷彩-棕色
w3-迷彩-红色
w3-迷彩-橄榄
w3-迷彩-领域
w3-迷彩-地球
w3-迷彩-沙色
w3-迷彩-棕褐色
w3-迷彩-砂岩
w3-迷彩-深绿色
w3-迷彩-森林
w3-迷彩-浅绿色
w3-迷彩-绿色
W3-迷彩-深灰色
w3-迷彩-灰色
w3-迷彩-黑色

例子

<div class="w3-camo-earth">伪装卡车</div>
<div class="w3-camo-grey">迷彩船</div>
亲自尝试 »  全部尝试 »  下载 CSS »

迷彩颜色定义为 联邦标准 595.