1. **内联式 (Inline Style)**
内联样式是最直接且局限性最大的方式，在标签内部通过 `style` 属性来应用特定样式的做法：
html
<p style="color:red; font-size: 20px;">这是一个红色、字号为20像素的段落。</p>
这种方式仅对当前元素生效，并不利于代码复用与维护，一般只用于临时或特殊情况下的样式设定。
2. **嵌入式 (Internal Stylesheet)**
嵌入式是指在一个 `<style>` 标签里定义一组样式规则并在文档头部 (`<head>`) 应用到整个页面的做法:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
</style>
</head>
<!-- 其他内容 -->
使用这种方式可以使多条针对网站局部或者全局范围内的样式声明被集中管理，相较于内联样式具有更好的可读性和模块化程度。
3. **外部链接式 (External stylesheet)**
外部引用则是最推荐的一种方式，它涉及到创建一个单独 `.css`文件存放所有样式规则，然后使用 `<link>` 标签将其导入至HTML文档中的<head>部分：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>My Webpage</title>
<link rel="stylesheet" href="styles.css">
</head>
<!-- 页面其他部分 -->
</html>
/* 在 styles.css 中 */
body {background-color: beige;}
h1 {font-family: Arial, sans-serif;}
p {line-height: 1.6em;}
此法最大优点在于能方便地应用于多个页面共享同一套样式方案，有利于提高项目结构清晰度以及降低后期修改的成本，同时也有利于浏览器缓存加速加载速度。
4. **@import 规则**
另外还有一种不常用但同样可行的方法是在 CSS 文档内部利用 @import 语句从另一个 CSS 文件中引入额外的样式规则：
css
/* 主要样式文件 main.css */
@import url("additional_styles.css");
body{
...
}
// additional_styles.css 文件的内容将会在此处合并处理。
虽然这种方法也能实现实现类似的效果，但由于其相对于 link 方式的劣势——如阻塞渲染流程及可能增加HTTP请求次数等，所以并不作为首选推荐手段。
总结来说，在实际开发场景下合理运用这几种不同的CSS插入策略可以极大地提升工作效率和项目的整体质量。通常情况下更倾向于采用内外结合以满足不同层次的需求：对外部样式进行全局控制，必要时辅以内置样式增强灵活性；尽量避免过度依赖于内联样式带来的冗余问题。
标签： html引入css的方法
