HTML 文档中使用 CSS 的三种方法
内容提要
本文讨论了HTML中的三种样式表：内联样式、内部样式和外部样式。内联样式是在HTML标签中直接使用样式属性来定义样式。内部样式是在<head>标签中使用<style>标签定义样式，并在HTML标签中使用类名来引用样式。外部样式是在<head>标签中使用<link>标签引用外部样式表文件，并在HTML标签中使用类名来引用样式。
延伸解读
三种样式方法的核心区别
内联样式直接在HTML标签的style属性中写样式，只影响当前元素；内部样式在<head>的<style>标签中定义，通过类名引用，可影响同一页面多个元素；外部样式将CSS单独存放在.css文件中，通过<link>标签引入，可被多个页面共享。三者的作用范围和复用性依次递增。
从示例看代码组织方式的变化
文章示例中，内联样式把颜色直接写在<h1>和<a>标签上；内部样式把颜色规则提取到<head>的<style>块中，标签改用class引用；外部样式进一步把规则移到styles.css，HTML中只保留<link>和class。这种变化体现了样式与结构逐步分离的思路。
选择样式方法时需注意的要点
内联样式写法直接但分散在标签中，不利于统一维护；内部样式适合单页面内复用，但无法跨页面共享；外部样式便于多页面共用同一套样式，但需要正确设置<link>的href路径。文章示例中外部样式使用了./css/styles.css，路径错误会导致样式无法加载。
Q&A
什么是内联样式？
内联样式是在HTML标签中直接使用样式属性来定义样式。
内部样式是如何定义的？
内部样式是在<head>标签中使用<style>标签定义样式，并在HTML标签中使用类名来引用样式。
外部样式的使用方法是什么？
外部样式是在<head>标签中使用<link>标签引用外部样式表文件，并在HTML标签中使用类名来引用样式。
内联样式和内部样式有什么区别？
内联样式直接在HTML标签中定义样式，而内部样式在<head>标签中使用<style>标签定义样式。
使用外部样式的优点是什么？
使用外部样式可以将样式与HTML分离，便于管理和重用样式。
如何在HTML中引用外部样式表？
在HTML中，可以通过在<head>标签中使用<link>标签来引用外部样式表。
