在HTML页面中，样式代码用于控制页面元素的外观表现，常见的样式引入方式包括内联样式和外部样式表，不同的方式适用场景差异较大，掌握它们的用法和区别是前端开发的基础能力。
html样式代码的基础使用逻辑
样式代码本质是CSS规则，每条规则由选择器和声明块组成，声明块中包含多个样式属性和对应的值，用来定义选中元素的呈现效果。在HTML中使用样式代码，核心是把CSS规则和目标HTML元素关联起来，不同的关联方式就对应了不同的样式引入形式。
内联样式的使用方法
内联样式是直接把样式代码写在HTML元素的style属性中，仅对该元素生效，优先级是三种样式引入方式中最高的。
内联样式代码示例
<!-- 内联样式直接写在div的style属性中 -->
<div style="width: 200px; height: 100px; background-color: #f0f0f0; color: #333; text-align: center; line-height: 100px;">
这是内联样式控制的元素
</div>
内联样式的特点
- 优点：优先级最高，不需要额外的文件引入，修改时直接定位到对应元素即可，适合临时测试或者单个元素的特殊样式调整。
- 缺点：样式和HTML结构耦合度极高，无法复用，当页面元素较多时，维护成本会大幅上升，也不符合结构与样式分离的开发规范。
外部样式表的使用方法
外部样式表是把所有CSS规则写在一个独立的.css文件中，然后在HTML页面中通过<link>标签引入，所有引入该样式表的页面都可以使用其中的样式规则。
外部样式表的使用步骤
第一步，创建独立的CSS文件，比如命名为style.css，写入样式规则：
/* style.css 文件内容 */
.common-box {
width: 200px;
height: 100px;
background-color: #e8f4ff;
color: #0056b3;
text-align: center;
line-height: 100px;
border: 1px solid #b8daff;
}
第二步，在HTML页面的<head>标签中通过<link>标签引入该CSS文件：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>外部样式表示例</title>
<!-- 引入外部样式表 -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="common-box">
这是外部样式表控制的元素
</div>
<div class="common-box">
另一个复用相同样式的元素
</div>
</body>
</html>
外部样式表的特点
- 优点：实现了结构与样式完全分离，样式可以跨页面复用，维护时只需要修改一个CSS文件就能同步更新所有引用页面的对应样式，适合中大型项目的开发。
- 缺点：需要额外的网络请求加载CSS文件，首次加载时如果文件较大可能会有轻微的加载延迟，优先级低于内联样式。
内联样式与外部样式表的选择建议
实际开发中可以根据需求选择对应的样式引入方式：
| 场景 | 推荐选择 |
|---|---|
| 单个元素的临时特殊样式，不需要复用 | 内联样式 |
| 多个元素复用相同样式，或者中大型项目开发 | 外部样式表 |
| 需要覆盖外部样式表的默认规则，仅对单个元素生效 | 内联样式（不推荐频繁使用，优先用CSS优先级规则调整） |
| 多页面共享统一样式规范 | 外部样式表 |
除了这两种方式，还有内部样式表的方式，就是把样式代码写在HTML页面的<style>标签中，仅对当前页面生效，适合单个页面的独立样式定义，不过复用性不如外部样式表，实际开发中可以根据页面数量灵活选择。