原创作品,未经许可不得转载
到目前为止,我们网页上的文本的颜色都是黑色的。但有些时候你可能需要有不同颜色。
可通过给元素设置color
样式改变文本的颜色:
<div style="color:rgb(255,0,0)">这是红色的文本</div>
上面的示例中,color
的值rgb(255,0,0)
是由RGB格式表示的颜色。在现实世界中,所有的颜色都是由红色、绿色、蓝色这三种基本色组合成的。rgb(255,0,0)
中的第一个数值是红色、第二个值是绿色、第三个值是蓝色,每个颜色的取值范围是0至255。就像画画时调颜料一样,放一点红色、放一点绿色、放一点蓝色,调成各种各样的其它颜色。
作为一名程序员,不用知道一个颜色的RGB值是如何组成的,很多工具都可以用来取得一个颜色的RGB值。并且,真实开发中,颜色的值是由美术人员告诉你的。
另外,颜色还可用16进制的格式表示。例如,#ff0000
也是红色的意思,它与rgb(255,0,0)
是等效的。
<div style="color:#ff0000">这是红色的文本</div>
16进制的表示形式其实是RGB格式的另一种写法。16进制表示形式的前两位、中间两位、最后两位分别与RGB表示形式的第一个、第二个、第三个数值相对应。
例如:#ff0000
中的ff
其实就是rgb(255,0,0)
中的255
的16进制书写方式。
好吧,如果你不知道16进制是什么,可以不用理会。不用担心,这只是一种颜色的表示形式而已,不会对你学习编程产生什么影响。
一些常见的颜色还可直接用它们的英文名称。例如:white
是白色、black
是黑色、red
是红色、等等:
<div style="color:red">这是红色的文本</div>
<div style="color:blue">这是蓝色的文本</div>
<div style="color:black">这是黑色的文本</div>
<div style="color:green">这是绿色的文本</div>
<div style="color:yellow">这是黄色的文本</div>