四种结合方式：
属性方式、标签方式、导入方式、链接方式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css和html的结合方式</title>
</head>
<body>
<!--第一种：属性方式
该方式比较灵活，但是对于多个相同标签的同一样式定义比较麻烦，适合局部修改。
-->
<!--<p style="background: red; color: blue">
中华人民共和国
</p>-->
<!--第二种：标签方式
该方式可以对单个页面的样式进行统一设置，但对于局部不够灵活。
-->
<!--<style type="text/css">
p {
color: #ff0000;
}
</style>
<p>
特斯拉<br>
中国上海临港新区<br>
</p>
<p>
苹果大中华地区总裁
</p>-->
<!--第三种：导入方式
前提是已经存在一个定义好的css文件。
网页的一部分样式需要用到，就可以用这种方式。
如果导入进来的样式与本页定义的样式重复，则以本页定义的样式为准。
-->
<style type="text/css">
@import "css_1.css"; /*本行分号不可省略*/
</style>
<div style="color: red">
王道论坛 <!--字体显示变为红色，就近原则-->
</div>
<!--第四种：链接方式
通过link标签实现，前提也是要先有一个已定义好的css文件。
可以通过多个link标签链接进来多个css文件，
重复的样式以最后链接进来的css样式为准。
-->
<link rel="stylesheet" type="text/css" href="css_1.css">
<div style="color: red">
我的全世界
</div>
</body>
</html>
<!--注意：
1.style标签放在head标签内，要显示的内容放在body标签内。
这里为了笔记清晰，都写在了body标签内。
2.样式优先级：
由上到下，由外到内，优先级逐步变高，即就近原则。
-->
css_1.css文件：
div {
font-size: 2cm;
color: darkorange;
}