Html 简明教程

HTML - Colors

HTML Colors 是一种指定 Web 元素外观的方法。颜色是网页设计中非常重要的方面，因为它们不仅增强了视觉吸引力，而且还影响了用户行为。它们还用于唤起情感和突出重点内容。

HTML Colors are a way of specifying the appearance of web elements. Colors are very important aspects of web design, as they not only enhance the visual appeal but also influence user behavior. They are also used to evoke emotions and highlight important content.

在 HTML 中，颜色通常用于给背景、边框和文本着色。

In HTML, colors are generally used to color backgrounds, borders and texts.

HTML Color Coding Methods

以下三种方法主要用于在 HTML 中设置颜色：

The following three methods are mostly used to set colors in HTML:

  1. Color Names: We can specify color names directly like green, blue or red.

  2. HEX Color Codes: A six-digit code representing the amount of red, green, and blue that makes up the color.

  3. RGB Color Values: This value is specified using the rgb() property.

我们将在后面的章节中学习这些颜色编码方法。

We will learn these color coding methods in upcoming chapters.

尝试单击图标 运行按钮来运行以下 HTML 代码以查看输出。

Try to click the icon run button to run the following HTML code to see the output.

Setting Text Color

要设置文本的颜色，可以使用 CSS color property 。颜色的值可以使用上述讨论的任何方法指定。

To set the text color on text we can use the CSS color property. The value of color can be specified using any of the above discussed methods.

<!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* 中指定颜色值。

To set the background color for any HTML element, we specify the color value inside the 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* 。

To set the border color for any HTML element, we can use the CSS border property or 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 多种不同的颜色名称。

We can specify direct a color name to set text or background color. W3C has listed 16 basic color names that will validate with an HTML validator but there are over 200 different color names supported by major browsers.

Note: 查看 * HTML Color Name* 的完整列表。

Note: Check a complete list of HTML Color Name.

W3C Standard 16 Colors

以下是 W3C 标准 16 种颜色的名称列表，建议使用它们。

Here is the list of W3C Standard 16 Colors names and it is recommended to use them.

Black

Gray

Silver

White

Yellow

Lime

Aqua

Fuchsia

Red

Green

Blue

Purple

Maroon

Olive

Navy

Teal

Setting Background Color with Color Names

以下是如何通过颜色名称设置 HTML 标记的背景的示例。

Here are the examples to set background of an HTML tag by color name.

<!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 色调色板的计算机的支持。

Here is the list of 216 colors which are supposed to be safest and computer independent colors. These colors very from hexa code 000000 to FFFFFF and they will be supported by all the computers having 256 color palette.

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