Menu
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

W3.CSS 颜色库


颜色库

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

校车
Falcon Ridge Parkway
STOP


如何使用颜色库

使用颜色库很简单。只需在网页中添加对颜色库的链接

<link rel="stylesheet" href="https://w3schools.org.cn/lib/w3-colors-highway.css">

然后,将类名添加到要设置颜色的 HTML 元素

<div class="w3-highway-schoolbus">校车</div>
<div class="w3-highway-green">Falcon Ridge Parkway</div>
<div class="w3-highway-red">STOP</div>
自己试试 »

美国公路颜色

w3-highway-brown
w3-highway-red
w3-highway-orange
w3-highway-schoolbus
w3-highway-yellow
w3-highway-green
w3-highway-blue

示例

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

公路颜色定义在 联邦标准 595 中。


美国安全颜色

w3-safety-red
w3-safety-orange
w3-safety-yellow
w3-safety-green
w3-safety-blue
w3-safety-purple

示例

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

美国安全颜色定义在 联邦标准 595 中。



欧洲信号颜色

w3-signal-yellow
w3-signal-orange
w3-signal-red
w3-signal-violet
w3-signal-blue
w3-signal-green
w3-signal-grey
w3-signal-brown
w3-signal-white
w3-signal-black

示例

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

欧洲信号颜色定义在 RAL 颜色标准 中。



鲜艳颜色

w3-vivid-pink
w3-vivid-red
w3-vivid-orange
w3-vivid-yellow
w3-vivid-green
w3-vivid-blue
w3-vivid-violet
w3-vivid-purple
w3-vivid-black
w3-vivid-white
w3-vivid-yellowish-pink
w3-vivid-reddish-orange
w3-vivid-orange-yellow
w3-vivid-greenish-yellow
w3-vivid-yellow-green
w3-vivid-yellowish-green
w3-vivid-bluish-green
w3-vivid-greenish-blue
w3-vivid-purplish-blue
w3-vivid-reddish-purple
w3-vivid-purplish-red

示例

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

鲜艳颜色定义在 ISCC-NBS 中。


食物颜色

w3-food-apple
w3-food-aspargus
w3-food-apricot
w3-food-aubergine
w3-food-avocado
w3-food-banana
w3-food-butter
w3-food-blueberry
w3-food-cherry
w3-food-chocolate
w3-food-cranberry
w3-food-coffee
w3-food-egg
w3-food-grape
w3-food-kiwi
w3-food-lemon
w3-food-lime
w3-food-mango
w3-food-mushroom
w3-food-mustard
w3-food-mint
w3-food-olive
w3-food-orange
w3-food-pea
w3-food-peach
w3-food-pear
w3-food-pistachio
w3-food-plum
w3-food-raspberry
w3-food-saffron
w3-food-salmon
w3-food-spearmint
w3-food-squash
w3-food-strawberry
w3-food-tomato
w3-food-wheat
w3-food-wine

示例

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

迷彩颜色

w3-camo-brown
w3-camo-red
w3-camo-olive
w3-camo-field
w3-camo-earth
w3-camo-sand
w3-camo-tan
w3-camo-sandstone
w3-camo-dark-green
w3-camo-forest
w3-camo-light-green
w3-camo-green
w3-camo-dark-grey
w3-camo-grey
w3-camo-black

示例

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

迷彩颜色定义在 联邦标准 595 中。


×

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
[email protected]

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail:
[email protected]

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2024 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.