HTML_CSS学习：CSS像素与颜色

马龙强_

已于 2024-05-03 15:01:32 修改

阅读量669

点赞数 7

文章标签： html css 学习

于 2024-05-01 14:07:50 首次发布

本文链接：https://blog.csdn.net/m0_74972727/article/details/138371906

版权

一、像素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>像素</title>
</head>
    <style>
        .atguigu1{
            /*单位可以是cm，但不能是m,dm*/
            width: 1cm;
            height: 1cm;
            background-color: #f73131;
        }
        .atguigu2{
            /*单位可以是cm、mm，但不能是m,dm*/
            width: 1mm;
            height: 1mm;
            background-color: #f73131;
        }
        .atguigu3{
            /*单位可以是cm、，但不能是m,dm*/
            width: 100px;
            height: 100px;
            background-color: #f73131;
        }

    </style>
<body>
    <div class="atguigu1"></div>
    <br>
    <div class="atguigu2"></div>
    <br>
    <div class="atguigu3"></div>

</body>
</html>

二、颜色_第一种表示_颜色名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>颜色名</title>
    <style>
        .atguigu{
            color: blue;
        }
    </style>
</head>
<body>
    <h2 class="atguigu">尚硅谷</h2>

</body>
</html>

三、颜色_第二种表示_rgb或rgba

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>rgb和rgba表示</title>
    <style>
        .atguigu1{
            color: rgb(255,0,0);
        }
        .atguigu2{
            color: rgb(0,255,0);
        }
        .atguigu3{
            color: rgb(0,0,255);
        }
        .atguigu4{
            color: rgb(133,43,226);
        }
        .atguigu5{
            color: rgb(100%,0%,0%);
        }
        .atguigu6{
            color: rgba(255,0,0,0.5);
        }
        .atguigu7{
            color: rgb(50,50,50);
        }
    </style>
</head>
<body>
    <h2 class="atguigu1">尚硅谷1</h2>
    <h2 class="atguigu2">尚硅谷2</h2>
    <h2 class="atguigu3">尚硅谷3</h2>
    <h2 class="atguigu4">尚硅谷4</h2>
    <h2 class="atguigu5">尚硅谷5</h2>
    <h2 class="atguigu6">尚硅谷6</h2>
    <h2 class="atguigu7">尚硅谷7</h2>

</body>
</html>

四、颜色_第三种表示_HEX或HEXA

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HEX或HEXA</title>
</head>
    <style>
        .atguigu1{
            /*#color: #第一组第二组第三组;没两位一组，16进制*/
            color: #af17bf;
        }
        .atguigu2{
            /*#color: #第一组第二组第三组;没两位一组，16进制*/
            color: #7fbf17;
        }
        .atguigu3{
            /*#color: #第一组第二组第三组;没两位一组，16进制*/
            color: #be9b29;
        }
        .atguigu4{
            /*#color: #第一组第二组第三组;没两位一组，16进制*/
            color: #c7edcc;
        }
        .atguigu5{
            /*#color: #第一组第二组第三组;没两位一组，16进制*/
            color: #87ceebff;
            /*带有透明度*/
        }
        /*HEXA是8位最后1两位是透明度*/
    </style>
<body>
    <h2 class="atguigu1">尚硅谷1</h2>
    <h2 class="atguigu2">尚硅谷2</h2>
    <h2 class="atguigu3">尚硅谷3</h2>
    <h2 class="atguigu4">尚硅谷4</h2>
    <h2 class="atguigu5">尚硅谷5</h2>

</body>
</html>

五、颜色_第五种表示_HSL或HSAL

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HSL或HSLA</title>
    <style>
        .atguigu1{
            /*color: hsl(色相，饱和度，亮度);*/
            color:hsl(0, 100%, 50%);
        }
        .atguigu2{
            /*color: hsl(色相，饱和度，亮度);*/
            color:hsl(60, 100%, 50%);
        }
        .atguigu3{
            /*color: hsl(色相，饱和度，亮度);*/
            color:hsl(120, 100%, 50%);
        }
        .atguigu4{
            /*color: hsl(色相，饱和度，亮度);*/
            color:hsl(180, 100%, 50%);
        }
        .atguigu5{
            /*color: hsl(色相，饱和度，亮度);*/
            color:hsl(240, 100%, 50%);
        }
        .atguigu6{
            /*color: hsl(色相，饱和度，亮度);*/
            color:hsl(300, 100%, 50%);
        .atguigu7{
            /*color: hsl(色相，饱和度，亮度);*/
            color:rgba(300, 100%, 50%, 0.55);
        }
    </style>
</head>
<body>
    <h2 class="atguigu1">尚硅谷1</h2>
    <h2 class="atguigu2">尚硅谷2</h2>
    <h2 class="atguigu3">尚硅谷3</h2>
    <h2 class="atguigu4">尚硅谷4</h2>
    <h2 class="atguigu5">尚硅谷5</h2>
    <h2 class="atguigu6">尚硅谷6</h2>
    <h2 class="atguigu7">尚硅谷7</h2>

</body>
</html>