How to Change Text and Background Color in CSS

CSS颜色属性很容易在网页上更改文本的颜色。

Before we look at how, it’s important to understand the different ways you can set the property value. You can use:

• HTML颜色名称：CSS中支持140个颜色名称。黄色，紫红色，栗色和Skyblue只是几个例子。
• 十六进制颜色代码：这些代码由三对字符组成，这些字符代表三种原色的强度。可能的值范围从00（原色的最低强度）到FF（主要颜色的最高强度）。黑色的十六进制颜色代码为＃000000，红色为＃ff0000，而蓝色为＃0000ff。
• RGB值：RGB是基于原色红色，绿色和蓝色组合的另一种颜色模型。由逗号分隔的三个数字组成，每个数字都代表相应的主要颜色的强度为0到255之间的整数RGB（0，0，255）。

While you can use any of these values, color names are not recommended. Not only are they difficult to remember beyond the standard rainbow, they also introduce imprecision. One person’s fuchsia may be another’s magenta may be another’s hot pink, and so on.

确保您的网站的配色方案看起来像您想要的方式，使用十六进制颜色代码或RGB值。它们使您可以选择所需的颜色的精确阴影。在下面的示例中，我们将使用十六进制颜色代码，因为它们更适合初学者学习。

现在，让我们浏览如何更改CSS中的内联文本的颜色和背景颜色。

您可能想知道，如果您不设置CSS中的颜色属性会发生什么。这是个好问题。页面选择器中定义了页面的默认文本颜色。这是一个身体选择器将文本颜色设置为蓝色的示例：

body {
color: blue;
}

If there is no body selector or color defined in the body selector, then the default color is most likely black.

因此，假设我想将段落的颜色更改为海军，如上所述，以及网站上的所有链接与Aqua。然后，我将使用类型的选择器P和属性选择器A [HREF]，并将颜色属性分别设置为＃000080和＃00FFFF。

这是CSS：

p {
颜色：＃000080;
}
a [href] {
color: #00FFFF;
}

Here’s the HTML:

这是一个段落。默认文本颜色是黑色的，但是我添加了一个段落选择器并定义了颜色属性，因此它是海军。您会看到下面的段落也是海军，除了链接。使用单独的选择器，链接的颜色已更改为Aqua。
Another paragraph that has a link.

Here’s the result:

See the PenChanging Inline Text Color in CSSby Christina Perricone (@hubspot) onCodePen。

You can use this same process to change the color of headings, span tags, button copy, and any other text on a page. Now let’s look at how to change the background color of text.

更改CSS中的文本背景颜色

要更改内联文本的背景颜色，请转到网页的部分。只需添加适当的CSS selectorand define the color and background-color property with the values you want. Say you want to change the background color of links to yellow. Then you’d add the following code:

a [href] {
颜色：＃000000;
background-color: #FFFF00;
}

CSS Background Color

The CSS background-color property allows you to更改HTML元素的背景颜色。You can set the background color for many elements, including a table, div, heading, and span element.

When defining the color property, you should also define the background color. It’s necessary to be compliant with W3C CSS and other frameworks and it doesn’t hurt otherwise.

Checking Color Contrast

改变文本的颜色和背景颜色对于避免问题也很重要web accessibility在您的网站上。

再看看上面的演示。虽然坳ors used may be too similar for people who can’t see different shades of colors, the underline would help to indicate it is a link. But what if I removed the underline from links on my site? Then I’d be relying on color alone to convey that it was a link. In that case, I’d need toidentify and use web accessible colors for my website。

This will take time and research. If you’re just getting started researching color blindness, then a tool like对比检查器在更改网站上的文本颜色时，可以帮助您做出可访问的选择。

您可以输入颜色和背景颜色，如果对比度为4.5：1，它将告诉您“通过”。任何较低的东西都会失败。我们将使用此工具来识别下面示例中的颜色。

说我希望我的文字是红色的，背景是灰色的。我可能会首先将＃FF0000和＃808080插入对比检查器中，并看到它的对比度仅为1：1。这不好。

To improve the ratio, I’ll move the slider of the foreground color to the left and the slider of the background color to the right until I hit the minimum of 4.5:1.

由于我想确保我的设计尽可能清晰，因此我将选择具有7：1比率的颜色＃940000和背景颜色＃E0E0E0。

I’ll use these to style the link so it really stands out from the rest of the paragraph.

这是CSS：

a [href] {
color: #940000;
background-color: #E0E0E0;
text-decoration: none;
}

Here’s the HTML:

这是一个段落。The default text color is black. You'll see that the paragraph below is also black, except for the link. Using an attribute selector, I've set the color, background color, and text decoration property so that it appears with a reddish font color, gray background, and no underline.
Another paragraph that has a link.

Here’s the result:

See the Pen更改CSS中的文本背景颜色by Christina Perricone (@hubspot) onCodePen。

向您的网站添加颜色

更改网站上文本的颜色和背景颜色很容易。无论您是从头开始建造网站还是与Bootstrap CSS，您只需要对HTML和CSS的知识。但是，它将花时间学习颜色名称和代码以及如何将它们结合到make your website and other marketing collateral accessible。立即开始向您的网站添加颜色的另一个原因。