1. 像素
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>像素</title>
<style>
.test {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="test"></div>
</body>
</html>2. 颜色表示方式—颜色名
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>颜色_第1种表示_颜色名</title>
<style>
.test {
color: red;
}
</style>
</head>
<body>
<h2 class="test">孙笑川</h2>
</body>
</html>3. 颜色表示方式—rgb/rgba
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>颜色_第2种表示_rgb或rgba</title>
<style>
/* 若三种颜色的值相同，呈现的是灰色，值越大，灰色越浅 */
.test1 {
color: rgb(255, 0, 0);
}
.test2 {
color: rgb(0, 255, 0);
}
.test3 {
color: rgb(0, 0, 255);
}
.test4 {
color: rgb(138, 43, 226);
}
.test5 {
color: rgba(138, 43, 226, 0.5);
}
</style>
</head>
<body>
<h2 class="test1">孙笑川1</h2>
<h2 class="test2">孙笑川2</h2>
<h2 class="test3">孙笑川3</h2>
<h2 class="test4">孙笑川4</h2>
<h2 class="test5">孙笑川5</h2>
</body>
</html>4. 颜色表示方式—HEX/HEXA
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>颜色_第3种表示_HEX或HEXA</title>
<style>
/*
格式 #ff0000
每一位数字的取值范围是0 ~ f，即：(1,2,3,4,5,6,7,8,9,a,b,c,d,e,f)
所以每一种光的最小值是00，最大值是ff
*/
.test1 {
color: #FF0000;
}
.test2 {
color: #00FF00;
}
.test3 {
color: #0000FF;
}
.test4 {
color: #c7edcc;
}
.test5 {
color: rgba(138, 43, 226, 0.5);
}
</style>
</head>
<body>
<h2 class="test1">孙笑川1</h2>
<h2 class="test2">孙笑川2</h2>
<h2 class="test3">孙笑川3</h2>
<h2 class="test4">孙笑川4</h2>
<h2 class="test5">孙笑川5</h2>
</body>
</html>5. 颜色表示方式—HSL/HSLA
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>颜色_第4种表示_HSL或HSLA</title>
<style>
/*
hsl(色相, 饱和度, 亮（明）度)
色相：取值范围 0 - 360度
饱和度：0% 全灰，100% 没有灰
亮度：0% 亮度没了 黑色，100% 太亮了 白色
*/
.test1 {
color: hsl(0deg, 100%, 50%);
}
.test2 {
color: hsl(60deg, 100%, 50%);
}
.test3 {
color: hsl(120deg, 100%, 50%);
}
.test4 {
color: hsl(0deg, 50%, 50%);
}
.test5 {
color: hsla(0deg, 50%, 50%, 60%);
}
</style>
</head>
<body>
<h2 class="test1">孙笑川1</h2>
<h2 class="test2">孙笑川2</h2>
<h2 class="test3">孙笑川3</h2>
<h2 class="test4">孙笑川4</h2>
<h2 class="test5">孙笑川5</h2>
</body>
</html>
评论 (0)