HTML+CSS基础入门-第十一天（CSS-颜色属性）

最新推荐文章于 2022-06-23 19:18:33 发布

bree working

最新推荐文章于 2022-06-23 19:18:33 发布

阅读量442

点赞数

分类专栏： html+css 文章标签： html css color rgb

本文链接：https://blog.csdn.net/qq_27261927/article/details/66969693

版权

html+css 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

说明

color属性定义文本的颜色

格式

color：green
color：#ff6600
简写式：color：#f60
color：rgb（255,255,255）：红（R）绿（G）蓝（B）每个取值的范围是0-255
color：rgba（255,255,255,1）：rgba代表的是红（R）绿（G）蓝（B）和Alpha的透明度

代码

<!doctype html>
<html>
    <head>
        <title>颜色属性</title>
        <meta charset="utf-8">
        <style type="text/css">
            p{
                color:red;
            }
            .p1{
                color:#ff6600;
            }
            .p2{/* ff0000可以简写成f00*/
                color:#f00;
            }

            .p3{
                color:rgb(255,0,255);
            }
            .p4{
                color:rgba(255,0,0,1);
                font-size:30px;
            }
            .p5{
                color:rgba(255,0,0,0.8);
                font-size:30px;
            }.p6{
                color:rgba(255,0,0,0.6);
                font-size:30px;
            }.p7{
                color:rgba(255,0,0,0.4);
                font-size:30px;
            }.p8{
                color:rgba(255,0,0,0.2);
                font-size:30px;
            }.p9{
                color:rgba(255,0,0,0.1);
                font-size:30px;
            }
        </style>
    </head>

    <body>


        <p>写法一:好好学习天天向上</p>

        <p class="p1">写法二:好好学习天天向上</p>

        <p class="p2">写法三:好好学习天天向上</p>

        <p class="p3">写法四:好好学习天天向上</p>

        <p class="p4">写法五:好好学习天天向上</p>
        <p class="p5">写法五:好好学习天天向上</p>
        <p class="p6">写法五:好好学习天天向上</p>
        <p class="p7">写法五:好好学习天天向上</p>
        <p class="p8">写法五:好好学习天天向上</p>
        <p class="p9">写法五:好好学习天天向上</p>

    </body>
</html>