CSS样式所有使用方式（书写位置）

EEEzhenliang2026-01-22 15:17

在 Web 开发中，CSS 样式代码 （即用于设置 HTML 元素外观的样式规则）只有三种书写位置（使用方式）：

1.行内样式（Inline Styles）

写在 HTML 元素的 style 属性中

复制代码

<p style="color: red; font-size: 16px;">段落</p>

2.内部样式表（Internal Stylesheet）

写在 HTML 文档中的 <style> 标签内（通常放在 <head> 中）

复制代码

<head>
  <style>
    p { color: red; }
    :root { --main-color: blue; }
  </style>
</head>

3.外部样式表（External Stylesheet）

写在独立的 .css 文件中，通过 <link> 引入（这是传统引入方式，某些框架或构建工具提供了其他方式）

复制代码

<link rel="stylesheet" href="styles.css">

文件内容（styles.css）：

复制代码

body { margin: 0; }
@media (max-width: 600px) { ... }

如果对你有所帮助，不妨支持一下（👍 点个赞｜⭐ 收藏备用｜💬 留言交流）。

这既能支持我，也能让更多人看到这篇文章。