CSS 全称 Cascading Style Sheets，中文叫层叠样式表，作用是给 HTML 网页设置外观样式，包含颜色、大小、间距、布局、动画、圆角、阴影等视觉效果，核心特点是样式和 HTML 结构分离，不再把样式写死在标签内部，方便统一维护，一个页面可以引入多个 CSS 样式表，浏览器会按照层叠规则合并样式，后面的规则优先级会覆盖前面冲突的样式，CSS 一共有三种引入方式，分别是行内样式、内部样式表、外部样式表，项目开发优先推荐外部样式表，下面会讲解基础语法、三种引入方式、选择器、常用属性、层叠优先级规则。
一、CSS 基础语法结构
选择器 {
属性名: 属性值;
属性名: 属性值;
}
示例：
p {
color: 333;
font-size: 16px;
line-height: 1.6;
}
- 选择器：选中要修改的 HTML 标签，比如 div、p、span
- 大括号内部：多条样式声明，每一条必须以分号结尾
- 注释写法：/* 这里是注释，不会被浏览器执行 */
二、三种 CSS 样式表引入方式
| 引入方式 | 写法 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|---|
| 行内样式 | 标签内部 style 属性 | 即时生效，优先级最高 | 代码冗余，不能复用 | 临时测试，少量特殊覆盖 |
| 内部样式表 | HTML 页面 head 标签内写 style 标签 | 单页面统一管理 | 多个页面不能共用 | 单页面小项目 |
| 外部样式表 | 单独新建.css 文件，link 引入 | 多页面复用，维护方便 | 需要额外文件 | 正式项目首选 |
1 行内样式示例
测试文字
2 内部样式表示例
3 外部样式表示例
新建 style.css 文件
.box {
width: 300px;
background: fff;
padding: 20px;
}
HTML 里面引入：
补充：也可以使用@import在 css 文件内部导入其他 css 样式表，但是加载性能略差于 link 标签
三、常用基础选择器
| 选择器 | 语法 | 说明 |
|---|---|---|
| 标签选择器 | div | 选中页面全部 div 标签 |
| 类选择器 | .classname | 最常用，同一个类可以多个元素复用 |
| ID 选择器 | #idname | 页面唯一，id 不能重复 |
| 后代选择器 | .box p | 选中.box 内部所有 p 标签 |
| 伪类选择器 | a:hover | 鼠标悬停状态样式 |
| 通配符选择器 | * | 选中全部元素，一般用来重置默认边距 |
四、高频常用 CSS 属性清单
/ 文本相关 /
color: 222;
font-size: 14px;
font-weight: bold;
text-align: center;
line-height: 1.5;
text-decoration: none;
/ 盒子模型 /
width: 100%;
height: auto;
margin: 0 auto;
padding: 10px;
border: 1px solid ccc;
box-sizing: border-box;
/ 视觉美化 /
background: f5f5f5;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
/ 布局 /
display: flex;
position: relative;
overflow: hidden;
五、层叠与优先级核心规则
CSS 名字里面的层叠，就是多条样式同时命中同一个元素的时候，按照优先级决定最终生效哪一条，优先级从高到低：
- 行内样式 style=""
- ID 选择器 #id
- 类选择器 .class、伪类
- 标签选择器
- 通配符 *
特殊：加上!important可以强制提升优先级，但是不推荐大量使用，容易造成后期维护混乱
同优先级的时候，代码后面写的样式覆盖前面写的样式
六、基础重置样式表（Reset）
浏览器原生标签自带默认 margin、padding，开发经常先写一份重置样式表清除默认样式
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Microsoft Yahei", sans-serif;
}
ul, li {
list-style: none;
}
a {
text-decoration: none;
color: inherit;
}
【常见问题】
问题 1 css 样式表 三种引入方式优先推荐哪一种
回答 1 css 样式表正式项目优先外部样式表，css 样式表可以多页面复用，代码结构清晰，行内样式只适合临时覆盖测试
问题 2 css 样式表 为什么后面的样式没有生效
回答 2 css 样式表大概率是优先级不够，css 样式表同元素被更高优先级选择器命中，或者前面写了！important 强制覆盖
问题 3 css 样式表 @import 和 link 有什么区别
回答 3 css 样式表 link 是 HTML 标签引入，加载性能更好，css 样式表 @import 是在 css 内部导入，会阻塞渲染，大项目一般优先 link
问题 4 css 样式表 box-sizing 是什么作用
回答 4 css 样式表 box-sizing:border-box 可以让 padding 和 border 算进元素总宽高，css 样式表布局计算更方便，是前端开发标配写法
【免责申明】
本文为 CSS 基础教学内容，CSS 不同浏览器存在部分兼容差异，新版本 CSS 特性需要确认浏览器支持情况，代码仅作为学习参考。