慕课网

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

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

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

技术点的解释：

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

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

英文命令颜色

p{color:red;}

RGB颜色

这个与 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类来选择不同的元素）

?不会了怎么办

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>color颜色</title>
    <style type="text/css">
    .one {
        color: red;
    }

    .two {
        color: #FF0000;
    }

    .three {
        color: rgb(255, 0, 0);
    }
    </style>
</head>

<body>
    <a href="https://www.imooc.com/" class="one">慕课网1</a>
    <a href="https://www.imooc.com/" class="two">慕课网2</a>
    <a href="https://www.imooc.com/" class="three">慕课网3</a>
</body>

</html>

class类名自定义，上面只是举个例子

写笔记

公开笔记

提交

全屏

请验证，完成请求

由于请求次数过多，请先验证，完成再次请求

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

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

任务

写笔记

收藏课程后，能更快找到我哦～