HTML 引入 CSS 的三种方法

原创于 2025-06-16 14:17:53 发布 · 766 阅读

CC 4.0 BY-SA版权

文章标签：

CSS（层叠样式表）是用于修饰 HTML 页面的语言，它能设置元素的样式（如颜色、布局等），让网页更美观2。在 HTML 中引入 CSS 有三种主要方式：内联样式、内部样式（嵌入式）和外部样式。以下我将逐步解释每种方法，包括语法、示例、优缺点和适用场景。代码示例基于 HTML5 标准。

1. 内联样式 (Inline Style)

行内样式直接在 HTML 元素的 style 属性中定义 CSS 规则。这种方式优先级最高，适用于单个元素的快速样式设置。

语法：在元素标签内添加 style 属性，属性值为 CSS 声明（多个声明用分号分隔）。
示例：

<!DOCTYPE html>
<html>
<head>
    <title>行内样式示例</title>
</head>
<body>
    <h1 style="color: blue; font-size: 24px;">这是一个标题</h1>
    <p style="background-color: #f0f0f0; padding: 10px;">这是一个段落</p>
</body>
</html>

优点：简单快捷，优先级最高（覆盖其他样式）。
缺点：不易维护（样式与内容混杂），不适用于多元素复用。
适用场景：临时修改或测试单个元素样式3。

2. 内部样式 (Internal Style Sheet / Embedded Style)

内部样式在 HTML 文档的 <head> 部分使用 <style> 标签定义 CSS 规则。这种方式适用于单个网页的样式定制。

语法：在 <head> 中添加 <style> 标签，内容为 CSS 规则（选择器 + 声明）。
示例：

<!DOCTYPE html>
<html>
<head>
    <title>内部样式示例</title>
    <style>
        body {
            background-color: linen; /* 背景颜色 */
        }
        h1 {
            color: maroon; /* 标题颜色 */
            margin-left: 40px; /* 左边距 */
        }
        p {
            font-family: Arial, sans-serif; /* 字体 */
        }
    </style>
</head>
<body>
    <h1>欢迎使用内部样式</h1>
    <p>这是一个使用内部样式的段落。</p>
</body>
</html>

优点：集中管理单个页面的样式，易于维护（与内容分离）。
缺点：不能跨页面复用，优先级低于行内样式。
适用场景：小型网站或单页应用13。

3. 外部样式 (External Style Sheet)

外部样式通过 <link> 标签链接到独立的 CSS 文件（扩展名为 .css）。这种方式最适合大型项目，实现样式复用。

语法：在 <head> 中添加 <link> 标签，指定 href 属性为 CSS 文件路径。
示例：
- HTML 文件（如 index.html）：

<!DOCTYPE html>
<html>
<head>
    <title>外部样式示例</title>
    <link rel="stylesheet" type="text/css" href="styles.css"> <!-- 链接外部CSS文件 -->
</head>
<body>
    <h1>外部样式标题</h1>
    <p>这是一个使用外部样式的段落。</p>
</body>
</html>

CSS 文件（如 styles.css）：

body {
    background-color: #ffffff;
}
h1 {
    color: green;
    text-align: center;
}
p {
    padding: 15px;
    border: 1px solid #ccc;
}

优点：最佳可维护性（样式与内容完全分离），支持多页面复用，优先级最低（便于全局覆盖）。
缺点：需要额外文件，加载速度略慢（需 HTTP 请求）。
适用场景：多页网站或团队协作项目23。

优先级总结

CSS 样式的优先级从高到低为：内联样式 > 内部样式 > 外部样式。例如，如果同一个元素在外部样式中定义颜色为红色，但在行内样式中定义为蓝色，则最终显示蓝色3。推荐优先使用外部样式以提升可维护性，仅在需要时使用其他方式。