Html 简明教程
HTML - Colors
HTML Colors 是一种指定 Web 元素外观的方法。颜色是网页设计中非常重要的方面,因为它们不仅增强了视觉吸引力,而且还影响了用户行为。它们还用于唤起情感和突出重点内容。
在 HTML 中,颜色通常用于给背景、边框和文本着色。
HTML Color Coding Methods
以下三种方法主要用于在 HTML 中设置颜色:
-
Color Names: 我们可以直接指定颜色名称,如绿色、蓝色或红色。
-
HEX Color Codes: 一个六位数字代码,它表示颜色的红、绿和蓝的量。
-
RGB Color Values: 此值使用 rgb() 属性指定。
我们将在后面的章节中学习这些颜色编码方法。
尝试单击图标 运行按钮来运行以下 HTML 代码以查看输出。
Setting Text Color
要设置文本的颜色,可以使用 CSS color property 。颜色的值可以使用上述讨论的任何方法指定。
<!DOCTYPE html>
<html>
<head>
<title>Setting Text Color</title>
</head>
<body>
<h2 style="color: Fuchsia;">
Setting Text Color in HTML
</h3>
<p style="color: Teal;">
This line is created using paragraph tag
and its color is <b>Teal</b>. </p>
<p style="color: SlateBlue;">
This is another line created using paragraph
tag and its color is <b>SlateBlue</b>.
</p>
</body>
</html>
Setting Background Color
要为任何 HTML 元素设置背景颜色,请在 * CSS background-color property* 中指定颜色值。
<!DOCTYPE html>
<html>
<head>
<title>Setting Background Color</title>
</head>
<body>
<h2 style="background-color: Fuchsia;">
Setting Background Color in HTML
</h2>
<p style="background-color: Teal; padding: 5px;">
This line is created using paragraph tag
and its background color is <b>Teal</b>.
</p>
<p style="background-color: SlateBlue;">
This is another line created using paragraph
tag and its background color is <b>SlateBlue</b>.
</p>
</body>
</html>
Setting Border Color
要为任何 HTML 元素设置边框颜色,可以使用 CSS border property 或 * CSS border-color property* 。
<!DOCTYPE html>
<html>
<head>
<title>Setting Border Color</title>
</head>
<body>
<h2 style="border: 2.5px solid Fuchsia;">
Setting Border Color in HTML</h2>
<p style="border: 2.5px dotted Teal; padding: 5px;">
This line is created using paragraph
tag and its border color is <b>Teal</b>.
</p>
<p style="border: 2.5px dashed SlateBlue; padding: 5px;">
This is another line created using paragraph
tag and its border color is <b>SlateBlue</b>.
</p>
</body>
</html>
HTML Colors - Color Names
我们可以指定直接颜色名称来设置文本或背景颜色。W3C 列出了 16 个基本颜色名称,这些名称将通过 HTML 验证器进行验证,但主要浏览器支持 200 多种不同的颜色名称。
Note: 查看 * HTML Color Name* 的完整列表。
W3C Standard 16 Colors
以下是 W3C 标准 16 种颜色的名称列表,建议使用它们。
Black |
Gray |
Silver |
White |
||||
Yellow |
Lime |
Aqua |
Fuchsia |
||||
Red |
Green |
Blue |
Purple |
||||
Maroon |
Olive |
Navy |
Teal |
Setting Background Color with Color Names
以下是如何通过颜色名称设置 HTML 标记的背景的示例。
<!DOCTYPE html>
<html>
<body text="blue" bgcolor="green">
<p>
Use different color names for for body
and table and see the result.
</p>
<table bgcolor="black">
<tr>
<td>
<font color="white">
This text will appear white on black background.
</font>
</td>
</tr>
</table>
</body>
</html>
Browser Safe Colors
以下是 216 种颜色的列表,这些颜色应该是最安全的计算机无关颜色。这些颜色的十六进制代码从 000000 到 FFFFFF,并且它们将得到所有具有 256 色调色板的计算机的支持。
000000 |
000033 |
000066 |
000099 |
0000CC |
0000FF |
003300 |
003333 |
003366 |
003399 |
0033CC |
0033FF |
006600 |
006633 |
006666 |
006699 |
0066CC |
0066FF |
009900 |
009933 |
009966 |
009999 |
0099CC |
0099FF |
00CC00 |
00CC33 |
00CC66 |
00CC99 |
00CCCC |
00CCFF |
00FF00 |
00FF33 |
00FF66 |
00FF99 |
00FFCC |
00FFFF |
330000 |
330033 |
330066 |
330099 |
3300CC |
3300FF |
333300 |
333333 |
333366 |
333399 |
3333CC |
3333FF |
336600 |
336633 |
336666 |
336699 |
3366CC |
3366FF |
339900 |
339933 |
339966 |
339999 |
3399CC |
3399FF |
33CC00 |
33CC33 |
33CC66 |
33CC99 |
33CCCC |
33CCFF |
33FF00 |
33FF33 |
33FF66 |
33FF99 |
33FFCC |
33FFFF |
660000 |
660033 |
660066 |
660099 |
6600CC |
6600FF |
663300 |
663333 |
663366 |
663399 |
6633CC |
6633FF |
666600 |
666633 |
666666 |
666699 |
6666CC |
6666FF |
669900 |
669933 |
669966 |
669999 |
6699CC |
6699FF |
66CC00 |
66CC33 |
66CC66 |
66CC99 |
66CCCC |
66CCFF |
66FF00 |
66FF33 |
66FF66 |
66FF99 |
66FFCC |
66FFFF |
990000 |
990033 |
990066 |
990099 |
9900CC |
9900FF |
993300 |
993333 |
993366 |
993399 |
9933CC |
9933FF |
996600 |
996633 |
996666 |
996699 |
9966CC |
9966FF |
999900 |
999933 |
999966 |
999999 |
9999CC |
9999FF |
99CC00 |
99CC33 |
99CC66 |
99CC99 |
99CCCC |
99CCFF |
99FF00 |
99FF33 |
99FF66 |
99FF99 |
99FFCC |
99FFFF |
CC0000 |
CC0033 |
CC0066 |
CC0099 |
CC00CC |
CC00FF |
CC3300 |
CC3333 |
CC3366 |
CC3399 |
CC33CC |
CC33FF |
CC6600 |
CC6633 |
CC6666 |
CC6699 |
CC66CC |
CC66FF |
CC9900 |
CC9933 |
CC9966 |
CC9999 |
CC99CC |
CC99FF |
CCCC00 |
CCCC33 |
CCCC66 |
CCCC99 |
CCCCCC |
CCCCFF |
CCFF00 |
CCFF33 |
CCFF66 |
CCFF99 |
CCFFCC |
CCFFFF |
FF0000 |
FF0033 |
FF0066 |
FF0099 |
FF00CC |
FF00FF |
FF3300 |
FF3333 |
FF3366 |
FF3399 |
FF33CC |
FF33FF |
FF6600 |
FF6633 |
FF6666 |
FF6699 |
FF66CC |
FF66FF |
FF9900 |
FF9933 |
FF9966 |
FF9999 |
FF99CC |
FF99FF |
FFCC00 |
FFCC33 |
FFCC66 |
FFCC99 |
FFCCCC |
FFCCFF |
FFFF00 |
FFFF33 |
FFFF66 |
FFFF99 |
FFFFCC |
FFFFFF |