如何使用CSS更改网站字体颜色

好的印刷设计是成功网站的重要组成部分。 CSS使您可以很好地控制网页上的文本的外观,这些网页是您构建的网页。 这包括能够更改您使用的任何字体的颜色。

可以使用外部样式表内部样式表来更改字体颜色,也可以使用HTML文档中的内联样式来更改字体颜色。 最佳做法决定您应该为您的CSS样式使用外部样式表。 内部样式表是直接写入文档“头部”的样式,通常只用于小型的单页面网站。 内联样式应该避免,因为它们与我们多年前处理的旧“字体”标签类似。 这些内联样式使得管理字体样式非常困难,因为您需要在内联样式的每个实例中更改它们。

在本文中,您将学习如何使用外部样式表和段落标记中使用的样式来更改字体颜色。 您可以应用相同的样式属性来更改围绕文本的任何标记(包括标记)的字体颜色。

添加样式以更改字体颜色

在这个例子中,你需要为你的页面标记提供一个HTML文档,并且需要一个附加到该文档的单独的CSS文件。 HTML文档可能会在其中创建许多元素。 我们为本文的目的而关心的是段落元素。

以下是如何使用外部样式表更改段落标记内文本的字体颜色。

颜色值可以表示为颜色关键字,RGB颜色编号或十六进制颜色编号。

  1. 添加段落标记的样式属性:
    1. p {}
  2. 颜色属性放置在样式中。 在该属性后放置冒号:
    1. p {color:}
  3. 然后在属性后添加你的颜色值。 确保使用分号结束该值:
    1. p {color:black;}

现在页面中的段落会变成黑色。

此示例使用颜色关键字 - “黑色”。 这是在CSS中添加颜色的一种方式,但它非常有限。 使用关键字“黑色”和“白色”很简单,因为这两种颜色非常具体,但如果使用“红色”,“蓝色”或“绿色”等关键字会发生什么? 究竟是什么颜色的红色,蓝色或绿色你会得到什么? 您无法使用关键字准确指定您想要的颜色阴影。 这就是为什么十六进制值经常用于代替颜色关键字的原因。

p {color:#000000; }

此CSS样式也会将段落的颜色设置为黑色,因为#000000的十六进制代码转换为黑色。 你甚至可以用这个十六进制值的简写形式,并把它写成#000,你会得到同样的结果。

正如我们已经提到的,当你需要一种不仅仅是黑色或白色的颜色时,十六进制值可以很好地工作。 这里是一个例子:

p {color:#2f5687; }

这个十六进制值可以将段落设置为蓝色,但与关键字“蓝色”不同,此十六进制代码可让您设置非常特定的蓝色阴影 - 可能是设计人员在创建界面时选择的一种颜色这个网站。 在这种情况下,颜色应该是中等的石板状蓝色。

最后,您还可以将RGBA颜色值用于字体颜色。 现在,所有现代浏览器都支持RGCA,因此您可以使用这些值,而不必担心Web浏览器不支持这些值,但您也可以设置一个简单的回退。

p {color:rgba(47,86,135,1); }

此RGBA值与前面指定的平板蓝色颜色相同。 前3个值设置红色,绿色和蓝色值,最后一个数字为alpha设置。 它被设置为“1”,意思是“100%”,所以这种颜色将不具有透明度。 如果将其设置为一个十进制数字,例如0.85,它将转换为85%的不透明度,并且颜色将稍微透明。

如果你想要防止你的颜色值,你可以这样做:

p {
颜色:#2f5687;
颜色:rgba(47,86,135,1);
}

该语法首先设置十六进制代码。 然后用RGBA数字覆盖该值。 这意味着任何不支持RGBA的旧浏览器都会获得第一个值,而忽略第二个值。 现代浏览器会按CSS级联使用第二个浏览器。