CSS 是层叠样式表（Cascading style sheets），用来给页面中的 HTML 标签设置样式，就像一只鸟，有多彩的羽毛才会更漂亮。
语法规则：
CSS 的标点符号都是英文状态下的，每一个键值对样式的后面需要加分号。
1.CSS 引入方式
CSS 的引入方式有三种：
- 内嵌式：CSS 样式写在 style 标签中，通常约定写在 head 标签中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
p {
font-size: 30px;
color: red;
}
img {
width: 150px;
height: 150px;
}
</style>
</head>
<body>
<div>
<p>CSS的引入方式 --- 内嵌式</p>
<img src="./表情包.jpg" alt="图片加载失败" />
</div>
</body>
</html>
- 外联式：CSS 样式单独写在一个 .css 文件中，需要通过 link 标签引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./test.css" />
</head>
<body>
<div>
<p>CSS的引入方式 --- 外联式</p>
<img src="./表情包.jpg" alt="图片加载失败" />
</div>
</body>
</html>
- 行内式：CSS 样式写在标签的 style 属性中，不常用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div>
<p style="font-size: 25px; color: red">CSS的引入方式 --- 行内式</p>
<img src="./表情包.jpg" alt="图片加载失败" width="100px" height="100px" />
</div>
</body>
</html>
