W3.CSS 颜色
W3.CSS 中使用的默认配色方案灵感来自材料设计颜色(用于营销、路标和便签的颜色)。
着色 HTML 元素
w3-color 和 w3-text-color 类可用于着色任何 HTML 元素:
容器:
伦敦是英国人口最多的城市, 拥有超过 900 万居民的大都市区。
伦敦是英国人口最多的城市, 拥有超过 900 万居民的大都市区。
按钮:
文本:
边框:
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>
亲自试一试 »
颜色 gray 和 grey 在所有 W3.CSS 类中都是可以互换的。
文本颜色
w3-text-color 类别设置任何 HTML 元素的文本颜色:
伦敦
伦敦是英国人口最多的城市,其都市区人口超过900万。
伦敦
伦敦是英国人口最多的城市,其都市区人口超过900万。
悬停颜色
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 颜色:
时尚颜色:
Yellow
Spruce
Peony
Port
公路颜色:
在本教程的后续章节中,您将学到更多有关颜色的知识。