CSS 代码放哪？4 种方式一次讲清楚
很多刚学网页制作的新手，都踩过这个坑：CSS 样式写了半天，页面没变化，样式全乱套。说到底就是代码放错了地方。
其实不用怕，用生活里的化妆逻辑就能搞懂。HTML 是网页的素颜骨架，搭好文字、图片、按钮这些基础结构。CSS 就是化妆品，管颜色、大小、排版和美观度。CSS 的几种存放位置，对应不同的化妆方式，用途一看就明白。
一、CSS 的 4 种存放位置
1. 行内样式：直接写在标签里
这就像临时给单个部位补个妆。只对当前这一个标签生效，改不了别的元素。直接在标签里加 style 属性，把 CSS 代码写进去。适合临时微调单个内容，不用大动干戈。但代码多了会很乱，不适合批量修改。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>行内样式演示</title>
</head>
<body>
<p style="color: red; font-size: 18px; font-weight: bold">这段文字是红色、18px加粗</p>
<p>这段文字不受影响，保持默认样式</p>
</body>
</html>2. 内部样式：放在 head 里的 style 标签（推荐新手用）
这就像给整个页面统一化个全妆。当前页面里所有同类元素都能用上这个样式，改一处全局生效，代码整洁好管理。专门适配单个网页的样式统一，日常练手、做单页网站用这个准没错。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>内部样式演示</title>
<style>
p {
color: blue;
font-size: 16px;
line-height: 1.6;
}
</style>
</head>
<body>
<p>所有段落都会变成蓝色，16px字号</p>
<p>第二段同样套用这个样式，不用重复写</p>
</body>
</html>3. 内部样式：放在 body 里的 style 标签（不推荐）
很多新手会问：style 标签能不能放 body 里？答案是语法上支持、也能生效，但属于不规范的写法。这就像把化妆品随手丢在正文区域，会打乱页面加载顺序，可能出现页面先裸奔再化妆的闪烁情况，也不利于代码维护。只适合临时测试，正式项目绝对不要用。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>body内style演示</title>
</head>
<body>
<style>
p {color: purple; font-size: 17px;}
</style>
<p>文字会变成紫色，但写法不规范，不建议用</p>
</body>
</html>4. 外部样式：单独 CSS 文件加 link 引入（项目首选）
这是正式项目的标准写法。相当于准备一个通用化妆包，单独建一个后缀为 .css 的文件存放所有样式，再用 link 标签链接到 HTML 头部。整个网站所有页面都能共用一套样式，不用重复写代码，后期维护超方便。多页面网站必用。
第一步：新建 style.css 文件
/* style.css 文件内容 */
p {
color: green;
font-size: 16px;
margin: 10px 0;
}第二步：HTML 文件引入外部 CSS
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>外部样式演示</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>样式来自外部CSS文件，多页面可共用</p>
</body>
</html>二、一张表看懂区别
| 样式类型 | 存放位置 | 生效范围 | 是否推荐 | 适合场景 |
|---|---|---|---|---|
| 行内样式 | HTML标签内的style属性 | 仅当前这一个标签 | 临时可用 | 临时微调单个元素 |
| 内部样式（head） | head标签里的style标签 | 当前整个页面 | 强力推荐 | 单页网站、日常练习 |
| 内部样式（body） | body标签里的style标签 | 当前整个页面 | 不推荐 | 只适合临时测试 |
| 外部样式 | 单独.css文件加head里link引入 | 整个网站所有页面 | 项目首选 | 正式项目、多页网站 |
三、记住这几点
临时改单个内容，用行内样式，代码直接写标签里。
单页统一排版，优先用 head 里的 style 标签，规范又好用。
style 标签能放 body 里，但千万别常用。会出现页面闪烁、代码混乱的问题。
多页面网站和正式项目，直接用外部 CSS 文件加 link 引入，最专业也最省心。
新手入门就选 head 里的内部样式，上手快、不出错。避开 body 放 style 这个误区，再也不用愁 CSS 放错位置没效果了。
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
