颜色控制属性

最新推荐文章于 2022-09-22 01:18:06 发布

杨宗健

最新推荐文章于 2022-09-22 01:18:06 发布

阅读量866

点赞数

分类专栏： CSS新手学习

本文链接：https://blog.csdn.net/Ameir_yang/article/details/66478802

版权

CSS新手学习专栏收录该内容

13 篇文章 0 订阅

订阅专栏

一、英文名

直接写颜色的英文名。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>颜色属性</title>
    <base target="_self">
    <style type="text/css">
        p{
           color: red;
        }
    </style>
</head>
<body>
    <p>我是段落</p>
</body>
</html>

二、rgb(x,y,z)

x代表：红色的深浅度。

y代表：绿色的深浅度。

b代表：蓝色的深浅度。

rgb的意思是：red、green、blue简称rgb。

x,y,z都是数字，数字越大，颜色越深。

x,y,z的取值范围：0=<x,y,z<=255

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>颜色属性</title>
    <base target="_self">
    <style type="text/css">
        p{
            color: rgb(255,0,0);
        }
    </style>
</head>
<body>
    <p>我是段落</p>
</body>
</html>

三、rgba(x,y,z,v)

x代表：红色深浅度。

y代表：绿色深浅度。

z代表：蓝色深浅度。

v代表：透明度。

x,y,z的取值范围是：0~255。取值越大颜色越深，越小颜色越浅。

v的取值范围是：0~1。取得值越小越透明，越大越不透明。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>颜色属性</title>
    <base target="_self">
    <style type="text/css">
        p{
            color: rgba(255,0,0,1);
        }
    </style>
</head>
<body>
    <p>我是段落</p>
</body>
</html>

四、#FFEE00（十六进制）

FF代表：红色的深浅度。

EE代表：绿色的深浅度。

00代表：蓝色的深浅度。

十六进制和十进制一样都是一种计数方式。

十进制：逢十进一。

10 （逢10）

十六进制：逢十六进一。

a 10

b 11

c 12

d 13

e 14

f 15

10 16

十六进制和十进制转换的公式：

用十六进制的第一位*16+十六进制的第二位=十进制

00 = 0 * 16 + 0 = 0

FF = F * 16 + F = 15 * 16 + 15 = 240 + 15 = 255

所以00对应十进制中的0 ， FF对应十进制中的255。

把十六进制的取值范围换算成十进制的取值范围也是：0~255。

所以用十六进制和十进制显示颜色，本质上是一样的，因为十六进制与十进制都是一种计数方式。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>颜色属性</title>
    <base target="_self">
    <style type="text/css">
        p{
            color: #FF0000;
        }
    </style>
</head>
<body>
    <p>我是段落</p>
</body>
</html>

五、#FE0（十六进制缩写）

如果十六进制的颜色每两位的值都是一样的，那么就可以简写为一位。

特殊情况：

1. #123456 ：不能简写。其中没有两位相同的。

2.#122334 ：不能简写。 22这两个2，代表不同的颜色，第一个2是红色的，第二个2是绿色的。 33这两个3，代表不同的颜色，第一个3代表绿色，第二个3代表蓝色。所以不能简写。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>颜色属性</title>
    <base target="_self">
    <style type="text/css">
        p{
            color: #F00;
        }
    </style>
</head>
<body>
    <p>我是段落</p>
</body>
</html>

其实以后取颜色可以直接用JetBrains WebStorm中的取色器，直接获取自己想要的颜色。

杨宗健

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
颜色控制属性

一、英文名直接写颜色的英文名。颜色属性 p{ color: red; } 我是段落二、rgb(x,y,z)x代表：红色的深浅度。y代表：绿色的深浅度。b代表：蓝色的深浅度。rgb的意思是：red、green、blue简称rgb。x,y,
复制链接

扫一扫

专栏目录