CSS 如何设置字体颜色？

在 CSS 中设置字体颜色非常简单，主要使用 color 属性。以下是详细说明和一些示例。

基本用法

使用 color 属性为元素的文本设置颜色。可以使用颜色名称、十六进制颜色值、RGB 或 RGBA 颜色值、HSL 或 HSLA 颜色值。

1. 使用颜色名称

HTML:

<p class="color-name">这是一个使用颜色名称设置的文本。</p>

CSS:

.color-name {
    color: red;
}

2. 使用十六进制颜色值

HTML:

<p class="hex-color">这是一个使用十六进制颜色值设置的文本。</p>

CSS:

.hex-color {
    color: #ff5733;
}

3. 使用 RGB 颜色值

HTML:

<p class="rgb-color">这是一个使用 RGB 颜色值设置的文本。</p>

CSS:

.rgb-color {
    color: rgb(255, 87, 51);
}

4. 使用 RGBA 颜色值（包含透明度）

HTML:

<p class="rgba-color">这是一个使用 RGBA 颜色值设置的文本。</p>

CSS:

.rgba-color {
    color: rgba(255, 87, 51, 0.5); /* 透明度为50% */
}

5. 使用 HSL 颜色值

HTML:

<p class="hsl-color">这是一个使用 HSL 颜色值设置的文本。</p>

CSS:

.hsl-color {
    color: hsl(9, 100%, 60%);
}

6. 使用 HSLA 颜色值（包含透明度）

HTML:

<p class="hsla-color">这是一个使用 HSLA 颜色值设置的文本。</p>

CSS:

.hsla-color {
    color: hsla(9, 100%, 60%, 0.5); /* 透明度为50% */
}

组合使用

你可以为不同的元素设置不同的字体颜色，也可以通过 CSS 类选择器、ID 选择器或元素选择器来统一设置。

1. 多个元素设置不同的字体颜色

HTML:

<p class="color1">这是红色文本。</p>
<p class="color2">这是绿色文本。</p>
<p class="color3">这是蓝色文本。</p>

CSS:

.color1 {
    color: red;
}
.color2 {
    color: green;
}
.color3 {
    color: blue;
}

2. 统一设置字体颜色

HTML:

<p class="unified-color">这是一个统一设置字体颜色的段落。</p>
<p class="unified-color">这是另一个统一设置字体颜色的段落。</p>

CSS:

.unified-color {
    color: #333; /* 深灰色 */
}

具体应用

1. 标题和段落

HTML:

<h1 class="title">这是标题</h1>
<p class="paragraph">这是段落文本。</p>

CSS:

.title {
    color: #4CAF50; /* 绿色 */
}

.paragraph {
    color: #555; /* 灰色 */
}

2. 链接文本

HTML:

<a href="#" class="link">这是一个链接</a>

CSS:

.link {
    color: #1E90FF; /* 深蓝色 */
    text-decoration: none;
}

.link:hover {
    color: #FF4500; /* 橙红色 */
}

通过以上示例，你可以看到如何使用 CSS 设置字体颜色。根据具体需求选择适合的颜色表示方法，可以轻松实现各种文本颜色效果。