• :一大波赠书活动正式来袭!满足条件的小伙伴每人赠送一本书,只限前100名!小伙伴们赶紧到碗里来!查看详情

3.4 字体颜色color

一、color属性简介

在CSS中,使用color属性来定义字体颜色。

语法:

color:颜色值;

说明:

颜色值是一个关键字或一个16进制的RGB值。

二、color属性

1、color属性使用关键字

关键字指的就是颜色的英文名称,如red、blue、green等。

在Visual Studio或其他编辑软件都出现自动提示,你直接点击就可以免输入了。

CSS的color属性

举例:

 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>color属性</title>
    <style type="text/css">
        #p1{color:gray;}
        #p2{color:orange;}
        #p3{color:red;}
    </style>
</head>
<body>
    <p id="p1">字体颜色为灰色</p>
    <p id="p2">字体颜色为橙色</p>
    <p id="p3">字体颜色为红色</p>
</body>
</html>

在浏览器预览效果如下:

CSS颜色

2、16进制RGB

color属性值还可以取16进制RGB,所谓的16进制RGB值指的就是类似“#FBF9D0”这种形式的值。学过Photoshop的朋友可能比较熟悉这样的数值。

那这个值是怎样来的呢?怎样取得到我们需要的颜色值呢?很多教程往往都会跳过这一步,可是别忘了,我们打造的这一套教程绝对都是精品,肯定会考虑到初学者的需求的。哎,毕竟哥曾经也迷茫过……

对于颜色值的选取,大家可以使用绿叶学习网开发的“在线调色板”工具。“在线调色板”是一个非常简洁方便的颜色选取工具,最重要的是它的本地存储功能。大家在CSS练习或开发网站的过程中需要大量使用重复地颜色值,这个时候绿叶学习网的“在线调色板”的颜色库功能就很好用了。对于这个在线工具,大家稍微摸索一下就会用了,希望大家喜欢。

举例:

 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>color属性</title>
    <style type="text/css">
        #p1{color: #03FCA1;}
        #p2{color: #048C02;}
        #p3{color: #CE0592;}
    </style>
</head>
<body>
    <p id="p1">字体颜色为#03FCA1</p>
    <p id="p2">字体颜色为#048C02</p>
    <p id="p3">字体颜色为#CE0592</p>
</body>
</html>

在浏览器预览效果如下:

color属性

:本站所有教程均为原创,大部分已经与人民邮电出版社合作出版,禁止转载和抄袭,否则绿叶学习网和人民邮电出版社必将追究法律责任,附录:互联网著作权保护法。【法律顾问:张俊律师】

如果你想要获取更多学习资料,或者在学习过程中遇到疑问想要得到跟教程一样最优质的解答,请通过以下方式关注我们:

(1)官方微博:

(2)新手Q群:69660533(暗号:lvye)(建议初学前端的加)

(3)官方Q群:457631216(暗号:lvye)(建议有JS基础的加)

(4)绿叶论坛:进入论坛

(5)常见问题:绿叶学习网常见问题解答

回到顶部