W3.CSS 为我们提供了设置字体和容器颜色的类。不仅如此，还有一些类可以在将分区或部分悬停时更改或设置字体或容器的颜色。所有的着色元素大致可以分为以下几部分：
- 背景颜色
- 文字颜色
- 悬停背景颜色
- 悬停文本颜色
背景颜色：背景颜色分类如下：
|
Sr. No |
Background Color Name |
Background Color Class |
|---|---|---|
|
1. |
Red |
w3-red |
|
2. |
Pink |
w3-pink |
|
3. |
Purple |
w3-purple |
|
4. |
Dark Purple |
w3-dark-purple |
|
5. |
Indigo |
w3-indigo |
|
6. |
Blue |
w3-blue |
|
7. |
Light Blue |
w3-light-blue |
|
8. |
Cyan |
w3-cyan |
|
9. |
Aqua |
w3-aqua |
|
10. |
Teal |
w3-teal |
|
11. |
Green |
w3-green |
|
12. |
Light Green |
w3-light-green |
|
13. |
Lime |
w3-lime |
|
14. |
Sand |
w3-sand |
|
15. |
Khaki |
w3-khaki |
|
16. |
Yellow |
w3-yellow |
|
17. |
Amber |
w3-amber |
|
18. |
Orange |
w3-orange |
|
19. |
Deep Orange |
w3-deep-orange |
|
20. |
Blue Gray |
w3-blue-grey |
|
21. |
Brown |
w3-brown |
|
22. |
Light Gray |
w3-light-grey |
|
23. |
Gray |
w3-grey |
|
24. |
Dark Gray |
w3-dark-grey |
|
25. |
Pale Red |
w3-pale-red |
|
26. |
Pale Yellow |
w3-pale-yellow |
|
27. |
Pale Green |
w3-pale-green |
|
28. |
Pale Blue |
w3-pale-blue |
|
29. |
White |
w3-white |
|
30. |
Black |
w3-black |
示例：在分区上添加背景颜色。
HTML
Welcome To GFG
GeeksforGeeks is a Computer Science
portal for geeks. It contains well
written, well thought and well
explained computer science and
programming articles, quizzes etc.
HTML
Welcome To GFG
GeeksforGeeks is a Computer Science
portal for geeks. It contains well
written, well thought and well
explained computer science and
programming articles, quizzes etc.
HTML
Welcome To GFG
GeeksforGeeks is a Computer Science
portal for geeks. It contains well
written, well thought and well
explained computer science and
programming articles, quizzes etc.
HTML
Welcome To GFG
GeeksforGeeks is a Computer Science
portal for geeks. It contains well
written, well thought and well
explained computer science and
programming articles, quizzes etc.
输出：
文字颜色：字体颜色分类如下：
|
Sr. No. |
Text Color Name |
Text Color Class |
|---|---|---|
|
1. |
Amber |
w3-text-amber |
|
2. |
Aqua |
w3-text-aqua |
|
3. |
Blue |
w3-text-blue |
|
4. |
Light Blue |
w3-text-light-blue |
|
5. |
Brown |
w3-text-brown |
|
6. |
Cyan |
w3-text-cyan |
|
7. |
Blue Gray |
w3-text-blue-grey |
|
8. |
Green |
w3-text-green |
|
9. |
Light Green |
w3-text-light-green |
|
10. |
Indigo |
w3-text-indigo |
|
11. |
Khaki |
w3-text-khaki |
|
12. |
Lime |
w3-text-lime |
|
13. |
Orange |
w3-text-orange |
|
14. |
Deep Orange |
w3-text-deep-orange |
|
15. |
Pink |
w3-text-pink |
|
16. |
Purple |
w3-text-purple |
|
17. |
Deep Purple |
w3-text-deep-purple |
|
18. |
Red |
w3-text-red |
|
19. |
Sand |
w3-text-sand |
|
20. |
Teal |
w3-text-teal |
|
21. |
Yellow |
w3-text-yellow |
|
22. |
White |
w3-text-white |
|
23. |
Black |
w3-text-black |
|
24. |
Grey |
w3-text-grey |
|
25. |
Light Grey |
w3-text-light-grey |
|
26. |
Dark Grey |
w3-text-dark-grey |
示例：向分区添加字体颜色。
HTML
Welcome To GFG
GeeksforGeeks is a Computer Science
portal for geeks. It contains well
written, well thought and well
explained computer science and
programming articles, quizzes etc.
输出：
悬停背景颜色：可悬停的背景颜色类如下：
|
Sr. No. |
Background Color Name |
Background Color Class |
|---|---|---|
|
1. |
Amber |
w3-hover-amber |
|
2. |
Aqua |
w3-hover-aqua |
|
3. |
Blue |
w3-hover-blue |
|
4. |
Light Blue |
w3-hover-light-blue |
|
5. |
Brown |
w3-hover-brown |
|
6. |
Cyan |
w3-hover-cyan |
|
7. |
Blue Grey |
w3-hover-blue-grey |
|
8. |
Green |
w3-hover-green |
|
9. |
Light Green |
w3-hover-light-green |
|
10. |
Indigo |
w3-hover-indigo |
|
11. |
Khaki |
w3-hover-khaki |
|
12. |
Lime |
w3-hover-lime |
|
13. |
Orange |
w3-hover-orange |
|
14. |
Deep Orange |
w3-hover-deep-orange |
|
15. |
Pink |
w3-hover-pink |
|
16. |
Purple |
w3-hover-purple |
|
17. |
Deep Purple |
w3-hover-deep-purple |
|
18. |
Red |
w3-hover-red |
|
19. |
Sand |
w3-hover-sand |
|
20. |
Teal |
w3-hover-teal |
|
21. |
Yellow |
w3-hover-yellow |
|
22. |
White |
w3-hover-white |
|
23. |
Black |
w3-hover-black |
|
24. |
Grey |
w3-hover-grey |
|
25. |
Light Grey |
w3-hover-light-grey |
|
26. |
Dark Grey |
w3-hover-dark-grey |
|
27. |
Pale Red |
w3-hover-pale-red |
|
28. |
Pale Green |
w3-hover-pale-green |
|
29. |
Pale Yellow |
w3-hover-pale-yellow |
|
30. |
Pale Blue |
w3-hover-pale-blue |
示例：在分区上添加可悬停的背景颜色。
HTML
Welcome To GFG
GeeksforGeeks is a Computer Science
portal for geeks. It contains well
written, well thought and well
explained computer science and
programming articles, quizzes etc.
输出：
- 悬停前：
- 悬停时：
悬停文本颜色：可悬停的文本颜色类别如下：
|
Sr. No. |
Text Color Name |
Text Color Class |
|---|---|---|
|
1. |
Amber |
w3-hover-text-amber |
|
2. |
Aqua |
w3-hover-text-aqua |
|
3. |
Blue |
w3-hover-text-blue |
|
4. |
Light Blue |
w3-hover-text-light-blue |
|
5. |
Brown |
w3-hover-text-brown |
|
6. |
Cyan |
w3-hover-text-cyan |
|
7. |
Blue Grey |
w3-hover-text-blue-grey |
|
8. |
Green |
w3-hover-text-green |
|
9. |
Light Green |
w3-hover-text-light-green |
|
10. |
Indigo |
w3-hover-text-indigo |
|
11. |
Khaki |
w3-hover-text-khaki |
|
12. |
Lime |
w3-hover-text-lime |
|
13. |
Orange |
w3-hover-text-orange |
|
14. |
Deep Orange |
w3-hover-text-deep-orange |
|
15. |
Pink |
w3-hover-text-pink |
|
16. |
Purple |
w3-hover-text-purple |
|
17. |
Deep Purple |
w3-hover-text-deep-purple |
|
18. |
Red |
w3-hover-text-red |
|
19. |
Sand |
w3-hover-text-sand |
|
20. |
Teal |
w3-hover-text-teal |
|
21. |
Yellow |
w3-hover-text-yellow |
|
22. |
White |
w3-hover-text-white |
|
23. |
Black |
w3-hover-text-black |
|
24. |
Grey |
w3-hover-text-grey |
|
25. |
Light Grey |
w3-hover-text-light-grey |
|
26. |
Dark Grey |
w3-hover-text-dark-grey |
示例：在分区上添加可悬停的文本颜色。
HTML
Welcome To GFG
GeeksforGeeks is a Computer Science
portal for geeks. It contains well
written, well thought and well
explained computer science and
programming articles, quizzes etc.
输出：
- 悬停前：
- 悬停时：
