内敛样式（最少使用）
定义在 html标签 的 style 属性中
语法
<标签 style="属性1:值1; 属性2:值2; " />
案例1
将 2个h1标签 的字体改成14px，红色字体，参考下面网址：
https://www.w3school.com.cn/css/css_font_size.asp
https://www.w3school.com.cn/css/css_text.asp
<h1 style="color:red; font-size:14px;">CSS样式</h1>
案例2
设置 2个 div标签 边框为红色，参考下面网址：
https://www.w3school.com.cn/css/css_border_shorthand.asp
<div style="border: 5px solid red;">CSS样式</div>
缺点
当HTML标签较多，每个标签样式较多时，代码量非常大
可读性非常差
CSS 代码不能复用，如：多个div标签样式相同时，每个div标签都需要写 css样式
内部样式表（较少使用）
在 style标签 中定义CSS样式
<style>标签 一般定义在 <head>标签中
语法
<style type="text/css">
选择器 {
样式属性1:值;
样式属性2:值;
样式属性3:值;
}
</style>
案例
设置 2个 div标签 边框为红色，高度50像素，参考下面网址：
https://www.w3school.com.cn/css/css_border_shorthand.asp
https://www.w3school.com.cn/css/css_dimension.asp
<!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 type="text/css">
div{
border: 1px solid red;
height: 50px;
}
</style>
</head>
<body>
<div style="border: 5px solid red;">CSS样式</div>
<div >CSS样式</div>
</body>
</html>
所有 div标签 的样式都是相同的
缺点
只能在同一页面内复用代码，不能在多个页面中复用 css 代码
维护起来不方便，中小型项目中会有成百上千个页面，到每个页面中去修改。工作量太大了
应用场景
页面较少，且多个页面很少有相同的样式
外部样式表（最多）
把 CSS样式 写成一个单独的 .css 文件，在 HTML页面中，通过 link标签 引入
css文件 语法
直接写样式，如下：
div{
border: 1px solid red;
height: 50px;
}
link标签 语法
<link type="text/css" rel="stylesheet" href="style.css" />
解释：
- type：文档类型
- rel：当前文档和被连接文档的关系
- href：链接文档的位置
案例
css文件：
div{
border: 1px solid red;
height: 50px;
}
h1{
color:red;
font-size:14px;
}
html文件：
<!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>
<link rel="stylesheet" href="1.css">
</head>
<body>
<div>css样式</div>
<h1>h1标签</h1>
</body>
</html>