HTML 中添加 CSS

学习目标

掌握在 HTML 中嵌入 CSS 的三种主要方式
理解每种方法的适用场景与优缺点
能根据项目规模选择合适的 CSS 引入策略
遵循前端开发中的最佳实践原则

正文内容

内联样式

内联样式通过在 HTML 元素中使用 style 属性直接定义样式。这种方式适用于对单个元素进行一次性、独特的样式设置。

特点：

样式作用范围仅限于当前元素
无需额外文件或标签，写法直接
不具备复用性，难以维护

示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>内联样式示例</title>
</head>
<body>
    <h2 style="color: green;">
        欢迎来到
        <i style="color: blue;">
            编程学院
        </i>
    </h2>
</body>
</html>

提示：虽然可以快速实现效果，但过度使用会使得 HTML 结构与样式混杂，降低可读性和可维护性。

内部样式表

内部样式表将 CSS 代码写在 HTML 文档的 <head> 区域内的 <style> 标签中。这种方式适合为单个页面统一设置样式。

特点：

可以同时控制页面中多个元素的样式
比内联样式更易于组织和管理
仅作用于当前 HTML 文件，无法跨页面复用

示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>内部样式表示例</title>
    <style>
        h2 {
            color: green;
        }
        i {
            color: blue;
        }
    </style>
</head>
<body>
    <h2>欢迎来到编程学院</h2>
</body>
</html>

建议：将 <style> 标签放在 <head> 中，确保浏览器在渲染页面内容前加载样式，避免“无样式内容闪烁”（FOUC）问题。

外部样式表

外部样式表是将 CSS 代码保存在一个独立的 .css 文件中，并通过 HTML 的 <link> 标签引入。这是大型项目中最推荐的方式。

特点：

样式集中管理，便于团队协作
支持多页面共享同一套样式规则
利用浏览器缓存提升加载性能
实现结构（HTML）、表现（CSS）和行为（JavaScript）的分离

HTML 示例：

<!DOCTYPE html>
<html>
<head>
    <title>外部样式表示例</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h2>欢迎来到编程学院</h2>
</body>
</html>

对应的 styles.css 文件内容：

h2 {
    color: green;
}
i {
    color: blue;
}

最佳实践：始终优先使用外部样式表，尤其是在构建多页面网站或需要长期维护的项目中。

重点总结

方法	适用场景	可复用性	可维护性	推荐程度
内联样式	单个元素临时调试或特殊样式	❌	❌	⭐
内部样式表	单页应用或独立页面	⚠️（仅限当前页）	✅	⭐⭐
外部样式表	多页面网站、大型项目	✅	✅✅✅	⭐⭐⭐⭐⭐

核心原则：保持 HTML 与 CSS 分离，提升代码的模块化与可维护性。

思考题

为什么在大型项目中不推荐使用内联样式？请从可维护性和性能两个角度分析。
如果一个网站有 10 个页面都需要相同的导航栏样式，应该选择哪种 CSS 引入方式？为什么？
在什么情况下可以合理使用内部样式表？请举例说明。

源本科技 | 码上会

学习目标

正文内容

内联样式

内部样式表

外部样式表

重点总结

思考题