CSS 零基础完整入门教程（超详细版）
1. CSS 简介
CSS 全称 层叠样式表（Cascading Style Sheets） ，是用于修饰和美化网页的核心语言，专门负责网页的视觉样式与布局。
HTML 负责搭建网页结构（骨架），CSS 负责渲染网页样式（颜值），同时 CSS 可配合 JavaScript 等脚本语言，动态修改网页元素样式，实现交互效果、动画效果等动态页面效果。
核心作用：统一页面样式、分离结构与样式、提升页面美观度、适配不同设备布局。
2. CSS 基础语法
2.1 完整语法结构
CSS 样式由 选择器 和 样式声明 两部分组成，基础格式固定：
选择器 {
属性名: 属性值;
属性名: 属性值;
/* 可编写多条样式声明，每条声明以分号结尾 */
}
- 选择器：精准选中页面中需要设置样式的 HTML 元素
- 属性：需要设置的样式类型（如字体、颜色、宽高、边距等）
- 属性值：对应样式的具体参数，决定样式最终效果
- 分号：每条样式声明结束标识，最后一条可省略，建议统一书写规范
2.2 CSS 注释
注释用于标注代码说明、备注逻辑，浏览器解析页面时会自动忽略注释内容，不生效、不占用页面资源。
支持单行/多行注释，统一格式：
/* 这里是注释内容，可单行、可多行 */
2.3 CSS 三种引入方式（优先级：行内 > 内嵌 > 外部）
1. 行内样式（不推荐）
直接在 HTML 标签的 style 属性中编写样式，优先级最高，但结构与样式混杂，不利于代码维护，仅临时调试使用。
<div style="color: red; font-size: 14px;">行内样式文本</div>
2. 内嵌样式（内部样式）
在 HTML 页面的 标签内，通过 标签书写 CSS 样式，仅作用于当前页面。
<head>
<style type="text/css">
/* 此处编写所有当前页面的CSS样式 */
div { color: blue; }
</style>
</head>
3. 外部样式（项目推荐）
将 CSS 代码单独写在 .css 后缀的外部文件 中，通过 标签引入页面，实现样式与结构完全分离，支持多页面复用。
引入位置：head 标签内，meta 标签下方、title 标签上方
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css文件的相对路径">
<title>页面标题</title>
</head>
参数说明： rel="stylesheet"：固定属性，声明当前引入的是样式表文件 href：填写 css 文件的相对/绝对路径
3. 常用 CSS 选择器（8大核心）
选择器的核心作用：精准匹配页面 HTML 元素，为其绑定样式，是 CSS 最基础、最重要的知识点。
3.1 标签选择器（元素选择器）
直接以 HTML 标签名作为选择器，选中页面中 所有同名标签，统一设置样式。
/* 选中页面所有div标签 */
div {
color: #333;
font-size: 14px;
}
3.2 类选择器（最常用）
以 .英文类名 定义，标签通过 class 属性调用，一个类名可作用于多个标签，一个标签可绑定多个类名，灵活性极高。
/* 定义类选择器 */
.box {
width: 100px;
height: 100px;
}
/* HTML调用：<div class="box"></div> */
3.3 ID 选择器
以 #ID名 定义，标签通过 id 属性调用，整个HTML页面中ID值必须唯一，不可重复，常用于定位唯一元素。
/* 定义ID选择器 */
#content {
line-height: 1.8;
}
/* HTML调用：<div id="content"></div> */
3.4 后代选择器
通过 空格 分隔父子元素，选中父元素内部 所有层级 的指定子元素（子孙元素均生效）。
/* 选中类名为box元素内部的所有p标签 */
.box p {
color: #666;
}
3.5 子代选择器
通过 > 分隔父子元素，仅选中父元素的 直接子元素，孙子及更深层级元素不生效。
/* 选中box的直接子级p标签 */
.box > p {
font-weight: bold;
}
3.6 群组选择器（并集选择器）
通过 , 分隔多个选择器，为多个不同元素 统一设置相同样式，简化冗余代码。
/* 给div、p、span统一设置颜色 */
div, p, span {
color: #222;
}
3.7 属性选择器
根据 HTML 标签的属性及属性值匹配元素，适合精准筛选带特定属性的标签。
/* 选中所有type为text的input标签 */
input[type="text"] {
border: 1px solid #ccc;
}
3.8 通配符选择器
以 ***** 表示，匹配页面 所有HTML元素，常用于页面初始化样式重置。
/* 全局重置默认边距 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
4. CSS 三大核心特性
4.1 层叠性
同一个元素可被多个 CSS 样式修饰，样式会自动叠加生效；若出现 相同样式属性冲突，则根据 选择器权重 决定最终生效样式，权重高的样式覆盖权重低的。
4.2 继承性
父元素设置的部分样式，会自动传递给后代子元素，无需重复设置，简化代码。
可继承属性（高频） ：
- 字体类：font-size、font-weight、font-family
- 文本类：color、text-align、text-indent、line-height
- 其他：letter-spacing、word-spacing
不可继承属性：宽高、边距、边框、背景、定位、浮动等布局类属性
4.3 优先级（权重规则）
当同一元素的样式冲突时，按选择器权重优先级生效，权重越高，样式优先级越高；权重相同时，后写的样式覆盖先写的。
权重优先级排序（从低到高） ： 通配符选择器 < 标签选择器 < 类选择器 < 属性选择器 < ID选择器 < 行内样式 < !important（最高优先级，强制生效）
注意：!important 慎用，会破坏样式层级规则，不利于后期维护。
5. 文本与字体全套样式（高频常用）
5.1 字体样式（font 系列）
1. font-style（字体样式）
控制字体是否倾斜
- normal：默认正常字体
- italic：斜体字体（专属斜体字体，更美观）
- oblique：强制倾斜（普通字体倾斜）
2. font-family（字体系列）
设置文本字体，可设置多个字体优先级，浏览器从左到右匹配，有则生效，无则顺延，全部无则使用系统默认字体。
font-family: "微软雅黑", "宋体", sans-serif;
3. font-weight（字体粗细）
控制文字加粗效果，支持关键字与数字取值
- normal：正常粗细（对应数值 400）
- bold：加粗（对应数值 700）
- lighter：细体
- 数字取值：100-900 整数，数值越大字体越粗
4. font-size（字体大小）
设置文字尺寸，最常用单位为 px（像素） ，数值不可为负值。
5. line-height（行高）
控制文本行与行之间的间距，可实现文字垂直居中效果。
取值：normal（默认）、固定像素值、百分比、无单位数字（字体倍数，最常用）
5.2 文本样式（text 系列）
1. text-align（水平对齐）
控制块级元素内部文本、行内元素的水平对齐方式
- left：默认左对齐
- center：水平居中
- right：右对齐
- justify：两端对齐（仅多行文本生效）
2. color（文本颜色）
四种取值方式：
- 英文单词：red、black、#333 等
- 十六进制：#000000，可简写为三位（#000）
- rgb(r,g,b)：三原色取值 0-255
- rgba(r,g,b,a)：a 为透明度（0完全透明-1完全不透明）
3. text-indent（首行缩进）
设置段落首行缩进，常用单位 em（1em = 1个字体大小），支持负值（悬挂缩进）。
text-indent: 2em; /* 首行缩进两个字符 */
4. text-decoration（文本修饰线）
- none：无修饰线（清除a标签默认下划线）
- underline：下划线
- overline：上划线
- line-through：删除线
5. 间距与换行样式
- letter-spacing：文字字符间距
- word-spacing：英文单词间距
- word-break：英文换行规则（break-all 强制截断换行）
- word-wrap：长单词、URL 自动换行
6. 超链接伪类（a标签专属）
伪类用于设置元素 不同状态 的样式，a标签四个核心伪类，必须严格遵循 LVHA 顺序（link > visited > hover > active），否则失效。
- a:link：未被访问的链接（初始状态）
- a:visited：已被访问过的链接
- a:hover：鼠标悬浮在链接上（所有标签通用）
- a:active：鼠标点击瞬间的激活状态
7. display 显示模式（布局核心）
控制元素的显示类型、是否占位、是否换行，是网页布局的核心属性。
- none：隐藏元素，不占位、不占据页面空间
- block：块级元素，独占一行，支持宽高、边距设置（div、p、h系列默认）
- inline：行内元素，同行显示，不支持宽高（span、a、i默认）
- inline-block：行内块元素，同行显示，支持宽高（img、input默认，最常用）
- flex：弹性布局模式，适配现代网页布局
8. list-style 列表样式
专门用于修改有序、无序列表的默认标记样式，开发中最常用 清除默认样式。
- none：清除列表默认符号（高频使用）
- disc：实心小圆点（无序列表默认）
- circle：空心小圆点
- decimal：阿拉伯数字（有序列表默认）
9. overflow 溢出处理
当元素内部内容尺寸 超出自身宽高 时，控制溢出内容的显示方式。
- visible：默认值，溢出内容直接显示
- hidden：溢出内容直接隐藏（高频使用）
- scroll：强制显示横竖滚动条
- auto：内容溢出时自动显示对应方向滚动条，无溢出则不显示
实用技巧：单行文本溢出显示省略号
/* 单行文字超出隐藏并显示三个小圆点 */
.text-ellipsis {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
}
10. 盒模型（网页布局基石）
网页中所有元素都可以看作一个矩形盒子，由内容区(content)、内边距(padding)、边框(border)、外边距(margin) 四部分组成，决定元素实际占位尺寸。
10.1 核心属性
1. width / height（内容宽高）
仅设置元素 内容区域 的尺寸，默认不包含边距和边框。支持 px、百分比、rem、vw 等单位。
2. padding（内边距）
元素内容与边框之间的距离，会撑大元素整体尺寸，取值遵循顺时针规则：上、右、下、左。
padding: 10px; /* 四边统一内边距 */
padding: 10px 20px; /* 上下10px，左右20px */
padding: 10px 20px 30px 40px; /* 上右下左顺时针 */
3. margin（外边距）
元素与其他元素之间的间距，不撑大自身尺寸，支持正负值，取值规则同 padding。
注意：margin 重叠问题：垂直方向相邻块级元素会发生外边距合并，取最大值生效，建议统一设置单边 margin 避免冲突。
10.2 元素实际尺寸计算公式
默认盒模型（content-box）： 实际宽度 = width + 左右padding + 左右border 实际高度 = height + 上下padding + 上下border
11. border 边框样式
为元素设置四周边框，简写属性必须包含三个参数，缺一不可。
border: 宽度 样式 颜色;
/* 示例：1px 黑色实线边框 */
border: 1px solid #000;
边框样式取值：
- solid：实线（最常用）
- dashed：虚线
- dotted：点状线
- none：无边框
支持单边单独设置：border-top、border-bottom、border-left、border-right
12. box-sizing 盒模型切换
用于修改盒模型的尺寸计算规则，解决 padding、border 撑大元素的问题，项目全局必加。
1. border-box（推荐）
设置的 width/height 为 元素最终实际尺寸，padding、border 会向内压缩内容区，不会撑大盒子。
2. content-box（默认）
width/height 仅为内容区尺寸，边距和边框会额外增加元素整体尺寸。
13. 背景全套样式
13.1 基础背景属性
- background-color：背景颜色，取值同 color 文本颜色
- background-image：背景图片，url(路径) 引入图片
- background-repeat：背景重复方式（no-repeat 不重复、repeat-x 水平重复、repeat-y 垂直重复）
- background-position：背景图位置（center 居中、top/right/bottom/left、自定义坐标）
- background-size：背景图尺寸，控制图片缩放
13.2 简写属性
background: 颜色 图片地址 位置/尺寸 重复方式;
注意：background-size 属性必须紧跟在 position 后方，用 / 分隔。
13.3 渐变背景
1. 线性渐变（linear-gradient）
可实现上下、左右、对角渐变，支持多颜色、比例控制
/* 从上到下，红转蓝 */
background: linear-gradient(to bottom, red, blue);
/* 从左到右，红60%、蓝40% */
background: linear-gradient(to right, red 60%, blue);
2. 径向渐变（radial-gradient）
从中心向四周圆形扩散渐变，类似水波扩散效果
background: radial-gradient(red, yellow, blue);
14. position 定位布局
定位用于实现 层级布局、特殊位置摆放，可让元素脱离默认文档流，通过 top/left/right/bottom 控制位置。
14.1 relative 相对定位
相对于 自身默认位置 偏移，保留原有文档流位置，不脱离标准流，多用于配合绝对定位使用，极少单独布局。
14.2 absolute 绝对定位
脱离文档流，不占位；相对于 最近一层设置了定位的父元素 偏移，若无定位父级，则相对于 html 根元素。
核心搭配：父级相对定位（relative），子级绝对定位（absolute），实现元素内部精准定位。
14.3 fixed 固定定位
脱离文档流，相对于 浏览器窗口 固定位置，页面滚动时位置不变，常用于导航栏、回到顶部按钮、悬浮广告。
14.4 sticky 粘性定位
相对定位与固定定位的结合体，滚动页面时达到阈值后切换为固定定位，常用于吸顶导航。
15. 伪元素（高级样式）
伪元素用于 在元素前后创建虚拟子元素，无需新增HTML标签即可添加内容、装饰样式，属于行内元素。
强制规则：必须携带 content 属性，无内容则赋值空字符串，否则伪元素不生效。
15.1 ::before
在元素 内部最前方 生成虚拟内容
15.2 ::after
在元素 内部最后方 生成虚拟内容（常用于清除浮动）
/* 伪元素基础写法 */
.box::before {
content: ""; /* 必须书写 */
display: block;
width: 10px;
height: 10px;
background: red;
}
16. Flex 弹性布局（现代布局首选）
Flex 布局是移动端、现代网页主流布局方案，完美解决传统浮动布局的高度塌陷、对齐困难等问题，布局简单灵活。
使用前提：给父元素设置 display: flex;，子元素自动成为弹性项目，支持各类对齐、排序、自适应效果。
16.1 父容器属性
1. flex-direction（排列方向）
- row：默认，水平从左到右排列
- row-reverse：水平反向排列（从右到左）
- column：垂直从上到下排列
- column-reverse：垂直反向排列（从下到上）
2. flex-wrap（换行规则）
- nowrap：默认，不换行，子元素自动压缩
- wrap：自动换行（最常用），超出父级宽度自动换行展示
- wrap-reverse：反向换行
3. justify-content（水平对齐）
- flex-start：默认左对齐
- flex-end：右对齐
- center：水平居中
- space-between：两端对齐，子元素均匀分布（高频）
- space-around：两侧留白均分，子元素间距统一
4. align-items（垂直对齐）
- flex-start：顶部对齐
- flex-end：底部对齐
- center：垂直居中（高频）
- stretch：默认拉伸，子元素高度铺满父级
- baseline：文字基线对齐
5. flex-flow（复合属性）
简写 flex-direction 和 flex-wrap，默认值：row nowrap
flex-flow: row wrap;
6. align-content（多行垂直对齐）
仅适用于 多行弹性元素，控制整体垂直对齐方式，单行无效。
16.2 子元素项目属性
1. order（排列顺序）
控制子元素排序，默认值0，数值越小越靠前，支持负值。
2. flex-grow（放大比例）
默认0（不放大），设置为1时，自动均分父元素剩余空白空间。
3. flex-shrink（缩小比例）
默认1（自动缩小），设置为0时，元素不压缩，保持原有尺寸。
4. flex-basis（固定尺寸）
设置子元素基准宽度，优先级高于 width。
5. flex（复合简写）
简写 flex-grow、flex-shrink、flex-basis，移动端布局核心属性
flex: 1; /* 均分剩余空间，自适应布局 */
6. align-self（单独对齐）
单独控制某个子元素的垂直对齐方式，覆盖父级 align-items 全局样式。
