如何在CSS中更改文本和背景颜色

使用CSS颜色属性更改网页上的文本颜色。

在我们查看如何，重要的是要理解您可以设置属性值的不同方式。您可以使用：

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

虽然您可以使用任何这些值，但不建议使用颜色名称。它们不仅难以记住标准彩虹之外，他们也会引入不精确。一个人的紫红色可能是另一个人的洋红色可能是另一个热的粉红色，等等。

为确保您的网站的颜色方案看起来您想要的方式，请使用Hex Color Codes或RGB值。它们允许您选择所需颜色的确切阴影。在下面的示例中，我们将使用Hex Color Codes，因为他们是一个更初级友好学习的TAD。

现在让我们来通过如何在CSS中更改内联文本的颜色和背景颜色。

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

身体 {
颜色：蓝色;
}

如果身体选择器中没有定义的主体选择器或颜色，则默认颜色很可能是黑色的。

所以让我们说我想将我段落的颜色更改为海军，如上面的例子中所述，以及我网站上的所有链接到Aqua。然后我将使用类型选择器p和属性选择器a [href]，并分别将颜色属性设置为＃000080和＃00ffff。

这是CSS：

p {
颜色：＃000080;
}
a [href] {
颜色：＃00ffff;
}

这是HTML：

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

这是结果：

图像源码

您可以使用相同的过程来更改页眉的颜色，跨度标记，按钮复制和页面上的任何其他文本。现在让我们来看看如何改变文本的背景颜色。

在CSS中更改文本背景颜色

要更改内联文本的背景颜色，请转到网页的部分。只需添加相应的CSS选择器并使用所需的值定义颜色和背景颜色属性。假设您想将链接的背景颜色更改为黄色。然后你添加一个[href] {颜色：＃000000;背景颜色：＃ffff00;}。

请注意，如果定义颜色属性，则还应定义背景颜色。有必要符合W3C CSS和其他框架，否则不会受到伤害。

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

另一点看看上面的演示。虽然所使用的颜色对于无法看到不同颜色色调的人可能太相似，但下划线将有助于表示它是一个链接。但是，如果我从我网站上的链接删除了下划线的情况怎么样？然后我依靠颜色单独传达它是一个链接。在这种情况下，我需要为我的网站标识和使用Web Accessible Colors。

这将需要时间和研究。如果您刚刚开始研究颜色失明，那么一个像这样的工具对比检查可以帮助您在更改网站上的文本颜色时进行可访问的选择。您可以输入颜色和背景颜色，如果该对对比度为4.5：1，则会告诉您“通过”。更低的任何东西都会失败。我们将使用此工具识别下面示例中的颜色。

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

为了提高比例，我将将前景色的滑块与背景颜色的左侧和滑块移动到右侧，直到我达到4.5：1。由于我想确保我的设计尽可能清晰，因此我将选择颜色＃940000和背景颜色＃E0E0E0，其具有7：1的比例。我将使用这些链接，所以它真的来自段落的其余部分。

这是CSS：

a [href] {
颜色：＃940000;
背景颜色：＃e0e0e0;
文本装饰：无;
}

这是HTML：

这是一个段落。默认文本颜色为黑色。除了链接之外，您会发现以下段落也是黑色的。使用属性选择器，我设置了颜色，背景颜色和文本装饰属性，以便它出现在红色字体颜色，灰色背景和没有下划线。
具有 的一个段落 。

这是结果：

图像源码

向您的网站添加颜色

改变您网站上文本的颜色和背景颜色很容易。无论您是从划伤或建筑物构建您的网站Bootstrap CSS.，您只需要一些HTML和CSS的知识。但是，它会花时间学习颜色名称和代码以及如何将它们组合到使您的网站和其他营销抵押品可达。只有另一个原因开始向您的网站添加颜色。