CSS使您能够控制构建和管理的网页上文本的外观。在本指南中,我们将向您展示如何使用颜色关键字、十六进制颜色代码或RGB颜色编号更改CSS中的字体颜色。
颜色值可以表示为颜色关键字、十六进制颜色数或RGB颜色数。在本课程中,您将需要一个HTML文档来查看CSS更改,并需要一个附加到该文档的单独CSS文件。我们将特别关注段落元素。
要更改HTML文件中每个段落的文本颜色,请转到外部样式表并键入p{}。将color属性放置在后跟冒号的样式中,如p{color:}。然后,在属性后添加颜色值,并以分号结束。在此示例中,段落文本更改为黑色:
p { color: black; }使用颜色关键字将文本更改为红色、绿色、蓝色或其他一些基本颜色,在创建这些颜色的不同色调时,无法提供所需的精度。这就是十六进制值的含义。
这种CSS样式可用于将段落涂成黑色,因为十六进制代码#000000可转换为黑色。你甚至可以用简写法把这个十六进制值写成#000,得到同样的结果。
p { color: #000000; }当您需要的颜色不仅仅是黑色或白色时,十六进制值可以很好地工作。例如,此十六进制代码使您能够设置非常特定的蓝色阴影,即中等范围的石板状蓝色:
p { color: #2f5687; }十六进制通过将颜色的RGB(红、绿、蓝)值分别设置为十六进制值来工作。这就是为什么它们除了数字0到9之外还包含字母A到F的原因。
每种颜色,红色、绿色和蓝色,都接收自己的两位数值。00是可能的最低值,而FF是最高值。颜色以十六进制的RGB顺序列出,因此前两位数字表示红色值,依此类推。
最后,可以使用RGBA颜色值编辑字体颜色。RGCA在所有现代浏览器中都受支持,因此您可以放心地使用这些值,它将适用于大多数观众,但您也可以设置一个简单的回退。
此RGBA值与上面指定的石板蓝颜色相同:
p { color: rgba(47,86,135,1); }前三个值设置红色、绿色和蓝色值,最后一个数字是透明度的alpha设置。alpha设置设置为1表示100%,因此此颜色没有透明度。如果将该值设置为十进制数,如.85,它将转换为85%的不透明度,颜色将略微透明。
如果要防弹您的颜色值,请复制以下CSS代码:
p { color: #2f5687; color: rgba(47,86,135,1); }此语法首先设置十六进制代码,然后用RGBA编号覆盖该值。这意味着任何不支持RGBA的旧浏览器将获得第一个值并忽略第二个值。
请记住,color属性适用于CSS中的任何HTML文本元素,这一点很重要。例如,您可以更改所有链接颜色。此示例将使您的链接亮绿色:
a { color: #16c616; }这同样适用于多个元素。您可以同时设置每个标题级别。例如,这会将所有标题元素设置为午夜蓝色:
h1, h2, h3, h4, h5, h6 { color: #020833; }为您的颜色提供十六进制或RGBA值并不总是容易的。大多数网页设计师会使用图像编辑程序,如Photoshop或GIMP,来生成准确的代码。你也可以在网上找到方便的颜色选择工具,比如w3schools的这个。
可以使用外部样式表、内部样式表或HTML文档中的内联样式更改字体颜色。但是,最佳实践要求您应该为CSS样式使用外部样式表。
内部样式表是直接写在文档“标题”中的样式,通常仅用于小型的单页网站。应该避免使用内联样式,因为它们类似于我们多年前处理的旧“字体”标记。这些内联样式使管理字体样式变得非常困难,因为您必须在内联样式的每个实例中更改它们。
...么是图标字体?今天我将向您展示什么是图标字体,以及如何使用它们来活跃您的网站。我们开始吧。 ...
...许你读过我们的一些HTML(理解HTML)和CSS教程,但不知道如何在更大的项目中使用这些语言。 ...
... 下面是几个简单的CSS示例,向您展示如何在web页面上进行一些基本的样式更改。 ...
... 在你学会了如何用HTML构建静态网页之后,是时候去发现如何用CSS来设计它们的样式并使它们看起来更漂亮了。下面我们的CSS3属性备忘表可以帮助您做到这一点!它涵盖了CSS3中您需要...
...长一段时间了,所以是时候学习基本知识了。它是什么,如何工作,以及如何在HTML中编写一些常用元素。 ...
...建网站的过程称为web开发。HTML、CSS和JavaScript是web开发中使用的三种基本语言。网站可以是静态的,也可以是动态的。静态网站是没有自定义编码和数据库的基本网站,而***站显示不同的内容,它们更复杂,更具交互性。 覆盖的...
在我们关于如何创建网站的夜校系列的第一部分中,我们学习了一些关于网页的基本知识:HTML。在今天的课程中,我们将开始使用样式和CSS将衣服放到我们的网站上。上面的视频将引导您了解将样式应用于HTML文档中元素的三种...
...使用浏览器对其进行解析都很好,但是查看文档时文档将如何显示?XML不是一种表示语言。用XML编写的文档将完全没有格式。 如何查看xml 在浏览器中查看XML的关键是级联样式表。样式表允许您定义XML文档的各个方面,从文...
响应式网页设计是一种构建网页的方法,这些网页可以根据访问者的屏幕大小动态更改其布局和外观。大屏幕接收适合大屏幕显示的布局,而较小的设备(如移动电话)接收以适合小屏幕的方式格式化的相同网站。这种方法为...
了解如何使用CSS创建段落的首字母大写别致。甚至还有一种简单的图像替换技术,可以将图形图像用于初始cap。 首字母大写的基本样式 文档中的首字母大写有三种基本样式: 凸起-最常见,第一个字母较大,与当前文...