一、像素
<!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>
