1.内联样式（Inline Styles）：可以直接在HTML元素的style属性中定义CSS样式。
例如：
<p style="color: red; font-size: 16px;">这是一段红色的文本</p>
内联样式适用于对单个元素应用特定的样式，但不适合用于整个网页或多个元素的样式定义。
2.内部样式表（Internal Style Sheets）：可以在HTML文档的标签中使用
例如：
<head><style>p {color: red;font-size: 16px;}</style>
</head>
<body><p>这是一段红色的文本</p>
</body>
内部样式表适用于在单个HTML文档中定义样式，可以应用于多个元素。
3.外部样式表（External Style Sheets）：可以将CSS样式定义保存在一个独立的CSS文件中，并在HTML文档中通过标签（链接式）或者@import指令（导入式）引入。
通过标签引入（最常用方式）
例如：
<head><link rel="stylesheet" href="styles.css">
</head>
<body><p>这是一段红色的文本</p>
</body>
在这种方式下，CSS样式定义保存在名为styles.css的外部文件中，可以被多个HTML文档共享。这样做可以提高代码的可维护性和可重用性。
通过@import指令引入
@import指令是CSS语言的一部分，使用时把这个指令添加到HTML的一个
要与外部的CSS文件关联起来，得使用url而不是href，并且要把路径放在一个圆括号里面；
<html>
<head>
<style type="text/css"> @import url(css/styles.css);
</style>
<!--此处的type属性是针对HTML4.01的，若在HTML5中则不需要加-->
</head><body>
......
</body>
</html
通过外部样式表，你可以在同一个CSS文件中定义多个样式规则，并将其应用于不同的HTML元素。
以上是CSS的主要引入方式，开发人员可以根据具体需求选择适合的方式。通常情况下，推荐使用外部样式表，因为它提供了最好的可维护性和灵活性。
两种方式的区别
- 标签属于html标签，而@import是css提供的一种方式，标签不仅可以引入css，还可以做其他事，而@import只能引入css；
- 加载顺序的区别：当一个页面被浏览时，link引入的css会被同步加载，而@import引用的css是等到其他元素全被下载完之后才被加载；
- 兼容性的不同：@import是CSS2.1才提出的，所以只有在IE5以上才支持，低版本的浏览器不支持，而标签无此问题；
- 当使用javascript控制DOM去改变样式时，只能使用标签，因为@import不是DOM可以控制的。
参考链接
https://zhuanlan.zhihu.com/p/658723834
https://www.cnblogs.com/zhaoyingli/p/5379990.html
)
