10-5 上个色 - 使用color设置字体颜色
本节编程练习不计算学习进度,请电脑登录imooc.com操作

上个色 - 使用color设置字体颜色

有时候当我们需要给字体设置颜色,比如实现以下效果:

那么我们可以输入以下代码:

技术点的解释:

1、color属性可以设置字体颜色。

2、color的值有3种设置方式:

p{color:red;}

这个与 photoshop 中的 RGB 颜色是一致的,由 R(red)、G(green)、B(blue) 三种颜色的比例来配色。

p{color:rgb(133,45,200);}

每一项的值可以是 0~255 之间的整数,也可以是 0%~100% 的百分数。如:

p{color:rgb(20%,33%,25%);}

这种颜色设置方法是现在比较普遍使用的方法,其原理其实也是 RGB 设置,但是其每一项的值由 0-255 变成了十六进制 00-ff。

p{color:#00ffff;}

配色表:

(单击图片可放大)

 

任务

我来试一试:

给右侧编辑器中三个链接分别使用三种颜色值方式设置颜色为红色

(可以使用class类来选择不同的元素)

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5. <meta charset="UTF-8">
  6. <title>color颜色</title>
  7. <style type="text/css">
  8.  
  9. </style>
  10. </head>
  11.  
  12. <body>
  13. <a href="https://www.imooc.com/">慕课网1</a>
  14. <a href="https://www.imooc.com/">慕课网2</a>
  15. <a href="https://www.imooc.com/">慕课网3</a>
  16. </body>
  17.  
  18. </html>
下一节