天天看点

「测试开发全栈-HTML」(12)css字体颜色属性

CSS Text(文本)属性可定义文本的外观,比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。

  用的最多的就是文本颜色,color属性用于定义文本的颜色。语法如下:

div {

    color:red;

}

颜色的表现形式有:

预定义的颜色值: red、green、pink等

十六进制: #FF0000、#FF6600、#29D794等

RGB代码: rgb(255,0,0)或rgb(100%,0%,0%)等

看下效果:

「测试开发全栈-HTML」(12)css字体颜色属性

对应的代码为:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        div {

            color: blue;

        }

    </style>

</head>

<body>

    <div>人保说的是还有7次洗车,5次还是3次道路救援啥的</div>

</body>

</html>

所有div对应的都为蓝色。

使用第二种方法,16进制颜色来表示,先看下效果:

「测试开发全栈-HTML」(12)css字体颜色属性

对应代码为:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        /* div {

            color: blue;

        } */

        div {

            color: #FF0000;

        }

    </style>

</head>

<body>

    <div>人保说的是还有7次洗车,5次还是3次道路救援啥的</div>

</body>

</html>

最后使用第三种方法,看下效果:

「测试开发全栈-HTML」(12)css字体颜色属性

对应的代码为:

<!DOCTYPE html>

<html lang="en">

<head>

 <meta charset="UTF-8">

 <meta http-equiv="X-UA-Compatible" content="IE=edge">

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

 <title>Document</title>

 <style>

 /* div {

            color: blue;

        } */

 /* div {

            color: #FF0000;

        } */

 div {

 color: rgb(255, 193, 100);

        }

 </style>

</head>

<body>

 <div>人保说的是还有7次洗车,5次还是3次道路救援啥的</div>

</body>

</html>