web/css_sduty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(css): 添加颜色和字体练习

Browse Source
This commit is contained in:
zhuyijun 2024-08-26 18:10:10 +08:00
parent 51e4c43406
commit 5a043a5686
8 changed files with 310 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
09_CSS像素颜色/01_像素.html Normal file
View File

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>01_像素</title>
<style>
.zyjblogs1 {
width: 1cm;
height: 1cm;
background-color: red;
}
.zyjblogs2 {
width: 1mm;
height: 1mm;
background-color: green;
}
.zyjblogs3 {
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div class="zyjblogs1"></div>
<br>
<div class="zyjblogs2"></div>
<br>
<div class="zyjblogs3"></div>
</body>
</html>

20
09_CSS像素颜色/02_颜色_第1种表示_颜色名.html Normal file
View File

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>02_颜色_第1种表示_颜色名</title>
<style>
.zyjblogs1 {
color: rgb(245, 41, 207);
}
</style>
</head>
<body>
<h2 class="zyjblogs1">zyjblogs1</h2>
<br>
<h2 class="zyjblogs2">zyjblogs2</h2>
<br>
<h2 class="zyjblogs3">zyjblogs3</h2>
</body>
</html>

47
09_CSS像素颜色/02_颜色_第2种表示_rgb或rgba.html Normal file
View File

@ -0,0 +1,47 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>02_颜色_第2种表示_rgb或rgba</title>
<style>
.zyjblogs1 {
color: rgb(255, 0, 0);
}
.zyjblogs2 {
color: rgb(0, 255, 0);
}
.zyjblogs3 {
color: rgb(0, 0, 255);
}
.zyjblogs4 {
color: rgb(138, 43, 226);
}
.zyjblogs5 {
color: rgb(100%, 0%,0%);
}
/* rgb 红绿蓝 rgba红 绿 蓝 透明度, a 透明度 [0,1] */
.zyjblogs6 {
color: rgb(255, 0, 0);
}
.zyjblogs7 {
color: rgb(0,174,236);
}
</style>
</head>
<body>
<h2 class="zyjblogs1">zyjblogs1</h2>
<br>
<h2 class="zyjblogs2">zyjblogs2</h2>
<br>
<h2 class="zyjblogs3">zyjblogs3</h2>
<br>
<h2 class="zyjblogs4">zyjblogs4</h2>
<br>
<h2 class="zyjblogs5">zyjblogs5</h2>
<br>
<h2 class="zyjblogs6">zyjblogs6</h2>
<br>
<h2 class="zyjblogs7">zyjblogs7</h2>
</body>
</html>

50
09_CSS像素颜色/03_颜色_第3种表示_HEX或者HEXA.html Normal file
View File

@ -0,0 +1,50 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>03_颜色_第3种表示_HEX或者HEXA</title>
<style>
/* HEX */
.zyjblogs1 {
color: #ff0000;
}
.zyjblogs2 {
color: #00ff00;
}
.zyjblogs3 {
color: #0000ff;
}
.zyjblogs4 {
color: #c7edcc;
}
.zyjblogs5 {
color: #87ceeb;
}
/* HEX 红绿蓝 HEXA红 绿 蓝 透明度, A 透明度 [0,1] */
.zyjblogs6 {
color: #ff0000ff;
}
.zyjblogs7 {
color: #fcdf;
}
</style>
</head>
<body>
<h2 class="zyjblogs1">zyjblogs1</h2>
<br>
<h2 class="zyjblogs2">zyjblogs2</h2>
<br>
<h2 class="zyjblogs3">zyjblogs3</h2>
<br>
<h2 class="zyjblogs4">zyjblogs4</h2>
<br>
<h2 class="zyjblogs5">zyjblogs5</h2>
<br>
<h2 class="zyjblogs6">zyjblogs6</h2>
<br>
<h2 class="zyjblogs7">zyjblogs7</h2>
</body>
</html>

49
09_CSS像素颜色/04_颜色_第4种表示_HSL或者HSLA.html Normal file
View File

@ -0,0 +1,49 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>04_颜色_第4种表示_HSL或者HSLA</title>
<style>
/* HSL hsl(色相，饱和度，亮度) */
.zyjblogs1 {
color: hsl(0, 100%, 50%);
}
.zyjblogs2 {
color: hsl(60, 100%, 50%);
}
.zyjblogs3 {
color: hsl(120, 100%, 50%);
}
.zyjblogs4 {
color: hsl(180, 100%, 50%);
}
.zyjblogs5 {
color: hsl(240, 100%, 40%);
}
/* HSL hsl(色相，饱和度，亮度) A 透明度 [0,1] */
.zyjblogs6 {
color: hsla(315, 78%, 43%, 0.715);
}
.zyjblogs7 {
color: hsl(240, 100%, 90%);
}
</style>
</head>
<body>
<h2 class="zyjblogs1">zyjblogs1</h2>
<br>
<h2 class="zyjblogs2">zyjblogs2</h2>
<br>
<h2 class="zyjblogs3">zyjblogs3</h2>
<br>
<h2 class="zyjblogs4">zyjblogs4</h2>
<br>
<h2 class="zyjblogs5">zyjblogs5</h2>
<br>
<h2 class="zyjblogs6">zyjblogs6</h2>
<br>
<h2 class="zyjblogs7">zyjblogs7</h2>
</body>
</html>

40
10_CS_常用字体属性/01_字体大小.html Normal file
View File

@ -0,0 +1,40 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>01_字体大小</title>
<style>
body {
font-size: 20px;
}
.zyjblogs1 {
font-size: 40px;
}
.zyjblogs2 {
font-size: 30px;
}
.zyjblogs3 {
font-size: 20px;
}
.zyjblogs4 {
font-size: 16px;
}
.zyjblogs5 {
font-size: 12px;
}
.zyjblogs6 {
font-size: 6px;
}
</style>
</head>
<body>
<div class="zyjblogs1">zyjblogs1</div>
<div class="zyjblogs2">zyjblogs2</div>
<div class="zyjblogs3">zyjblogs3</div>
<div class="zyjblogs4">zyjblogs4</div>
<div class="zyjblogs5">zyjblogs5</div>
<div class="zyjblogs6">zyjblogs6</div>
<div>zyjblogs7</div>
</body>
</html>

37
10_CS_常用字体属性/02_字体族.html Normal file
View File

@ -0,0 +1,37 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>02_字体族</title>
<style>
.zyjblogs1 {
font-size: 22px;
font-family: "微软雅黑";
}
.zyjblogs2 {
font-size: 22px;
font-family: "楷体";
}
.zyjblogs3 {
font-size: 22px;
font-family: "宋体";
}
.zyjblogs4 {
font-size: 22px;
font-family: "华文彩云";
}
.zyjblogs5 {
font-size: 22px;
font-family: "YaHei Monaco Hybird","微软雅黑",sans-serif;
}
</style>
</head>
<body>
<div class="zyjblogs1">逝水无痕1 nicemoe</div>
<div class="zyjblogs2">逝水无痕2</div>
<div class="zyjblogs3">逝水无痕3</div>
<div class="zyjblogs4">逝水无痕4</div>
<div class="zyjblogs5">逝水无痕5 nicemoe</div>
</body>
</html>

34
10_CS_常用字体属性/03_字体风格.html Normal file
View File

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>03_字体风格</title>
<style>
.zyjblogs1 {
font-size: 22px;
font-style: normal;
}
.zyjblogs2 {
font-size: 22px;
}
.zyjblogs3 {
font-size: 22px;
}
.zyjblogs4 {
font-size: 22px;
}
.zyjblogs5 {
font-size: 22px;
font-family: "YaHei Monaco Hybird","微软雅黑",sans-serif;
}
</style>
</head>
<body>
<div class="zyjblogs1">逝水无痕1 nicemoe</div>
<div class="zyjblogs2">逝水无痕2</div>
<div class="zyjblogs3">逝水无痕3</div>
<div class="zyjblogs4">逝水无痕4</div>
<div class="zyjblogs5">逝水无痕5 nicemoe</div>
</body>
</html>