1. 内联样式（Inline Styles）：
- 将CSS样式直接写在HTML标签的style属性中。
<p style="color: red; font-size: 16px;">这是一段文本</p>
解析： 浏览器在加载HTML时会直接应用内联样式，但不推荐在大型项目中使用，因为样式与内容紧密耦合，难以维护。
2. 内部样式表（Internal or Embedded Styles）：
- 使用<style>标签将CSS样式写在HTML文档的头部或其他适当位置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
p {
color: blue;
font-size: 18px;
}
</style>
<title>Internal Styles</title>
</head>
<body>
<p>This is a paragraph.</p>
</body>
</html>
解析： 浏览器在加载HTML时会解析<style>标签内的CSS，并应用到文档中的相应元素上。
3. 外部样式表（External Styles）：
- 将CSS代码写在独立的外部文件，然后通过link标签引入HTML文档。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>External Styles</title>
</head>
<body>
<p>This is a paragraph.</p>
</body>
</html>
解析： 浏览器会发送额外的HTTP请求来获取外部CSS文件，但这种方法有助于分离样式和内容，提高代码的可维护性。
4. 导入样式表（Import Styles）：
- 使用@import规则将外部CSS文件导入当前CSS文件中。
/* styles.css */
@import url('other-styles.css');
p {
color: green;
}
解析： 与外部样式表类似，但在CSS文件内部使用，不需要额外的link标签。
总的来说，选择哪种引入CSS的方法取决于项目的需求和结构。一般来说，外部样式表是推荐的做法，因为它提供了最好的可维护性和代码复用性。
转载请注明出处：http://www.zyzy.cn/article/detail/4039/CSS