CSS零基础通俗易懂手册
CSS零基础通俗易懂手册（纯干货入门）
CSS零基础通俗易懂手册（纯干货入门）
一、CSS是什么？（大白话解释）
1.1 官方全称
CSS：Cascading Style Sheets 层叠样式表
1.2 最简单理解
- CSS 不是编程语言，没有逻辑、没有判断、没有运算。
- 专门用来：修饰HTML骨架，改颜色、大小、边距、布局、动画。
- 只负责：好看、排版、美化。
1.3 三连通俗比喻（必背）
- HTML = 房子骨架（墙、门、结构）
- CSS = 装修装饰（刷漆、瓷砖、大小、位置）
- JS = 电器智能（开关、交互、动态效果）
二、CSS 核心特点
- 修饰HTML：不能独立运行，必须依附HTML。
- 层叠性：多个样式可以叠加作用在同一个标签。
- 继承性：父标签样式，子标签可以自动继承（文字居多）。
- 优先级：样式冲突，按照优先级执行，不会报错。
- 语法简单：选择器 + 属性 + 属性值。
三、CSS 标准语法（固定格式）
3.1 语法结构
选择器 {
属性: 属性值;
属性: 属性值;
}
3.2 通俗拆解
- 选择器：我要改谁？（选中HTML标签）
- 属性：我要改什么？（颜色、大小、边距）
- 属性值：改成什么样？（红色、20px、10px边距）
- 分号;：每一条样式结束必须加分号。
3.3 最简单示例
p {
color: red;
font-size: 20px;
}
释义：选中所有p标签，文字改成红色，字体大小20像素。
四、CSS三种引入方式（重点必考）
4.1 行内样式（最直白、优先级最高）
直接写在标签身上，只能作用当前这一个标签。
<p style="color:blue;">我是行内样式文字</p>
缺点：代码混乱、无法复用、不推荐大量使用。
4.2 内部样式（写在html页面内）
写在head标签里面，style标签中，只对当前页面生效。
<head>
<style>
p {color: green;}
</style>
</head>
优点：结构样式分离，适合单页面测试。
4.3 外部样式（企业正式开发、推荐）
单独新建 .css 文件，HTML通过link引入。
<link rel="stylesheet" href="style.css">
优点：一次修改、全站生效、代码整洁、可复用。
4.4 优先级排序（记住顺序）
行内样式 > 内部样式 > 外部样式
就近原则：谁离标签越近，谁优先级越高。
五、CSS三大特性（底层核心）
5.1 继承性
父元素设置文字相关样式，子元素自动继承。
可继承：字体、颜色、行高、对齐。
不可继承：宽高、边距、边框、定位。
5.2 层叠性
同一个标签被多个样式修饰：
- 不冲突：样式全部叠加生效；
- 冲突：按优先级覆盖。
5.3 优先级
样式冲突时，判定规则：
行内 > id选择器 > 类选择器 > 标签选择器 > 通配符
六、常用基础选择器（必须背）
| 选择器 | 符号 | 作用 |
|---|---|---|
| 标签选择器 | p、div | 选中全部同名标签 |
| 类选择器 | .box | 自定义类，多人共用，最常用 |
| id选择器 | #box |
唯一标识，一个页面只能出现一次 |
| 通配符选择器 | * | 选中全部标签，初始化清除样式 |
七、常用基础属性（入门必写）
7.1 文字样式
color: red; /* 文字颜色 */
font-size: 16px; /* 字体大小 */
font-weight: bold; /* 加粗 */
text-align: center; /* 水平居中 */
line-height: 30px; /* 行高 */
7.2 盒子样式
width: 200px; /* 宽度 */
height: 200px; /* 高度 */
background: pink; /* 背景色 */
border: 1px solid #000; /* 边框 */
八、盒子模型（CSS重中之重）
8.1 通俗理解
所有HTML标签全部是盒子。
8.2 四层结构（由内到外）
- 内容区 content：文字图片区域（width、height）
- 内边距 padding：内容和边框之间距离（内留白）
- 边框 border：盒子边线
- 外边距 margin：盒子和盒子之间距离（外留白）
九、标签三大显示类型（布局核心）
9.1 块级元素 block
独占一行、可以设置宽高。
代表：div、p、h1~h6、ul。
9.2 行内元素 inline
同行显示、不能设置宽高。
代表：span、a、b、i。
9.3 行内块 inline-block
同行显示 + 可以设置宽高。
代表：img、input。
十、新手常见坑（直白避雷）
- 忘记写分号：后面样式全部失效。
- 行内元素乱设宽高：span设置width无效。
- 边距塌陷：上下margin叠加，取最大值。
- 路径错误：外部css引入失败，页面无样式。
- 大小写混用：CSS规范全部小写。
十一、通俗易懂总结
- CSS 专门给网页装修美化，无逻辑。
- 语法固定：选择器{属性:值;}。
- 三种引入：行内 > 内部 > 外部。
- 所有标签都是盒子，掌握：边距、边框、宽高。
- 学习顺序：选择器 → 基础样式 → 盒子模型 → 浮动 → 布局。