CSS 创建

学会了 CSS 语法，还要知道如何把样式"接"到 HTML 页面上。CSS 有三种主要的插入方式：外部样式表、内部样式表和内联样式。它们各有适用场景，优先级也不同。工程上最推荐把样式抽成独立文件，做到结构、表现相分离。

外部样式表

把 CSS 写在一个独立的 .css 文件中，再用 <link> 标签在 HTML 的 <head> 中引入：

/* style.css 文件内容 */
body { background-color: #f0f0f0; }
h1   { color: navy; }

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>标题</h1>
</body>
</html>

效果说明：href 指向 css 文件路径。多个页面可共用同一个文件，改一处即可全局生效，最利于维护。

内部样式表

把样式直接写在 HTML 的 <style> 标签里，同样放在 <head> 中，只影响当前页面：

<head>
    <style>
        p { color: orange; }
    </style>
</head>
<body>
    <p>这一段是橙色。</p>
</body>

效果说明：适合样式较少、无需复用的单页面；页面较多时不推荐，否则每个页面都要重复粘贴。

内联样式

在标签的 style 属性里直接写声明，多条声明用分号分隔。它不需要选择器，优先级最高：

<p style="color: red; font-size: 20px;">这一段是红色大字。</p>

效果说明：只作用于当前这一个标签。优点是立刻见效，缺点是难以复用、难以维护，应尽量少用。

三种方式的优先级

当同一元素被多种方式设置样式时，按优先级从高到低大致为：

  1. 内联样式（style 属性）；
  2. 内部样式表与外部样式表（后引入者胜出，与书写顺序有关）；
  3. 浏览器默认样式。
p { color: blue; }

<p style="color: green;">绿色</p>   <!-- 内联样式覆盖外部样式 -->

效果说明：上述段落显示为绿色，因为内联样式优先级最高；想覆盖内联样式只能修改 HTML 本身或使用 !important。

引入方式的选择

  • 多页面站点：使用外部样式表，一份 CSS 多处复用，还能利用浏览器缓存。
  • 演示或临时页面：使用内部样式表，方便快速查看效果。
  • 单标签微调或动态脚本改样式：使用内联样式。
  • 注意 CSS 文件应在 <head> 中提前加载，避免页面先"裸奔"再闪变样式。

小结

三种创建方式中，外部样式表最适合真实项目，内部样式表适合单页，内联样式仅用于临时微调。牢记"内联 > 内部/外部（后者看顺序）"这条优先级规则，能帮你快速定位样式不生效的原因。

笔记加载中…

标签：#CSS

返回知识库