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