内部CSS指的是将CSS样式代码直接写在HTML文件内部的<style>标签中，这种方式不需要额外引入外部CSS文件，适合单个页面样式独立、样式代码量不大的场景，是前端开发中基础且常用的样式引入方式。
内部CSS的标准嵌入语法
内部CSS必须放在HTML的<head>标签内部的<style>标签中，<style>标签需要指定type属性为text/css，不过在HTML5规范中，type属性可以省略，浏览器会默认将其识别为CSS样式。基本结构如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>内部CSS示例页面</title>
<style>
/* 这里是内部CSS样式代码 */
body {
margin: 0;
padding: 0;
background-color: #f5f5f5;
}
.content {
width: 1200px;
margin: 0 auto;
padding: 20px;
}
</style>
</head>
<body>
<div class="content">
这是内部CSS生效的内容区域
</div>
</body>
</html>
内部CSS的生效规则
内部CSS的样式优先级遵循CSS层叠规则，当内部CSS和外部CSS、行内样式同时存在时，优先级从高到低为：行内样式 > 内部CSS > 外部CSS（前提是选择器权重相同）。如果内部CSS中同一个选择器定义了多次样式，后面的样式会覆盖前面的样式。
选择器权重说明
内部CSS中不同选择器的权重不同，权重高的样式会优先生效，常见选择器权重对比如下：
| 选择器类型 | 权重值 | 示例 |
|---|---|---|
| 行内样式 | 1000 | <div style="color:red;"></div> |
| ID选择器 | 100 | #header { color: blue; } |
| 类选择器、属性选择器、伪类 | 10 | .item { font-size: 14px; } |
| 元素选择器、伪元素 | 1 | p { line-height: 1.5; } |
内部CSS的使用场景和注意事项
- 适合单个页面的独立样式，不需要多个页面复用样式代码时使用，减少HTTP请求数量。
- 不适合大型项目多页面复用样式，会导致代码冗余，后期维护成本高。
- <style>标签只能放在<head>标签内部，放在<body>标签中虽然部分浏览器可以识别，但不符合HTML规范，可能导致样式加载异常。
- 内部CSS代码如果过长，会影响HTML文件的可读性，建议样式代码超过50行时改用外部CSS引入。
内部CSS和外部CSS的对比
很多开发者会纠结选择内部CSS还是外部CSS，两者的核心差异如下：
- 加载速度：内部CSS随HTML文件一起加载，不需要额外请求CSS文件，首屏加载速度更快；外部CSS需要额外发起HTTP请求加载文件，不过可以被浏览器缓存，多页面访问时速度更快。
- 复用性：内部CSS只能在当前页面生效，外部CSS可以被多个HTML页面引入复用。
- 维护性：内部CSS修改需要修改每个对应的HTML文件，外部CSS只需要修改一个文件即可全局生效。
常见问题解答
内部CSS不生效是什么原因
常见原因包括：<style>标签写在了<body>标签外部、CSS语法错误、选择器权重被更高优先级的样式覆盖、样式被浏览器缓存未更新。可以通过浏览器的开发者工具查看样式是否被应用，排查具体问题。
内部CSS可以放在HTML文件的任意位置吗
按照HTML规范，<style>标签必须放在<head>标签内部，虽然部分浏览器支持放在<body>标签中，但可能导致页面加载时出现样式闪烁问题，不建议这样使用。
/* 内部CSS中常见的语法错误示例 */
/* 错误：属性后面缺少分号 */
body {
background-color: #f5f5f5
margin: 0;
}
/* 正确写法 */
body {
background-color: #f5f5f5;
margin: 0;
}