W3.CSS 颜色

Red

Pink

Purple

Deep Purple

Indigo

Blue

Light Blue

Cyan

Aqua

Teal

Green

Light Green

Lime

Sand

Khaki

Yellow

Amber

Orange

Deep Orange

Blue Gray

Brown

Light Gray

Gray

Dark Gray

Pale Red

Pale Yellow

Pale Green

Pale-Blue

W3.CSS 中使用的默认配色方案灵感来自材料设计颜色(用于营销、路标和便签的颜色)。


着色 HTML 元素

w3-colorw3-text-color 类可用于着色任何 HTML 元素:

容器:

伦敦是英国人口最多的城市, 拥有超过 900 万居民的大都市区。

伦敦是英国人口最多的城市, 拥有超过 900 万居民的大都市区。

按钮:

文本:

Red Purple Blue Green Orange

边框:

Red

Green

Blue

Yellow

Gray

Black

表格:

名称 点数
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

卡片:

A car is a wheeled, self-powered motor vehicle used for transportation. Most definitions of the term specify that cars are designed to run primarily on roads, to have seating for one to eight people, to typically have four wheels. (Wikipedia)


背景颜色

w3-color 类设置任何HTML元素的背景色:

伦敦

伦敦是英国人口最多的城市,其都市区人口超过900万。


伦敦

伦敦是英国人口最多的城市,其都市区人口超过900万。


伦敦

伦敦是英国人口最多的城市,其都市区人口超过900万。

实例

<div class="w3-red">
  <h2>London</h2>
  <p>伦敦是英国人口最多的城市,
  拥有超过 900 万居民的大都市区。</p>
</div>

<div class="w3-yellow">
  <h2>London</h2>
  <p>伦敦是英国人口最多的城市,
  拥有超过 900 万居民的大都市区。</p>
</div>

<div class="w3-gray">
  <h2>London</h2>
  <p>伦敦是英国人口最多的城市,
  拥有超过 900 万居民的大都市区。</p>
</div>
亲自试一试 »

颜色 graygrey 在所有 W3.CSS 类中都是可以互换的。


文本颜色

w3-text-color 类别设置任何 HTML 元素的文本颜色:

伦敦

伦敦是英国人口最多的城市,其都市区人口超过900万。

伦敦

伦敦是英国人口最多的城市,其都市区人口超过900万。

实例

<div class="w3-text-red">
  <h2>London</h2>
  <p>伦敦是英国人口最多的城市,
  拥有超过 900 万居民的大都市区。</p>
</div>

亲自试一试 »


悬停颜色

w3-hover-color 类定义为任何 HTML 元素的背景悬停颜色:

伦敦

伦敦是英国人口最多的城市,其都市区人口超过900万。

实例

<div class="w3-container w3-orange w3-hover-red">
  <h2>London</h2>
  <p>伦敦是英国人口最多的城市, 拥有超过 900 万居民的大都市区。</p>
</div>
亲自试一试 »

w3-hover-text-color 类定义任何 HTML 元素的文本悬停颜色:

伦敦

伦敦是英国人口最多的城市,其都市区人口超过900万。

实例

<div class="w3-container w3-orange w3-hover-text-white">
  <h2>London</h2>
  <p>伦敦是英国人口最多的城市, 拥有超过 900 万居民的大都市区。</p>
</div>
亲自试一试 »

颜色库

除了标准的 W3.CSS 颜色外,W3.CSS 还可以使用许多不同颜色库中的颜色:

Windows 颜色:

Red
Green
Blue
Yellow
Steel
Teal
Cobalt
Sienna

时尚颜色:

Flame
Greenery
Marina
Primrose
Yellow
Neutral Gray
Shaded
Spruce
Navy
Peony
Tawny
Port

公路颜色:

Red
Green
Blue
Yellow

在本教程的后续章节中,您将学到更多有关颜色的知识。