一、CSS 基础1. 引入方式作用把 CSS 样式应用到 HTML 上。方式写法含义与说明行内样式div stylecolor: red;文字/div直接写在标签的style属性里只影响当前元素优先级高但不便于维护。内部样式表style p { color: red; } /style写在 HTML 的style标签中影响当前页面。外部样式表link relstylesheet hrefstyle.css单独.css文件通过link引入最推荐可复用、可缓存。示例!-- 外部样式表 -- link relstylesheet hrefstyle.css !-- 内部样式表 -- style p { color: blue; } /* 所有 p 标签文字变蓝 */ /style !-- 行内样式 -- p stylecolor: red;我是红色文字/p2. 语法选择器 {属性: 值;}含义选择器告诉浏览器“要选中哪些元素”。属性要修改的样式比如color颜色。值具体设置成什么比如red。每条声明以;结尾整体用{}包起来。示例h1 { color: red; /* 文字颜色为红色 */ font-size: 24px; /* 字号 24 像素 */ }选中所有h1让文字变红、字号 24px。3. 注释/* 这是注释不会被浏览器执行 */作用给开发者看解释代码用途方便维护。示例/* 设置主标题样式 */ h1 { color: red; /* 红色标题 */ }二、选择器1. 基础选择器选择器示例作用含义元素选择器p选中所有p直接写标签名类选择器.box选中classbox的元素.表示 classID 选择器#header选中idheader的元素#表示 id页面中 id 应唯一通配选择器*选中所有元素常用于清除默认样式属性选择器[typetext]选中具有该属性的元素方括号匹配属性示例p { color: red; } /* 所有 p 变红 */ .box { color: blue; } /* classbox 变蓝 */ #header { color: green; } /* idheader 变绿 */ * { margin: 0; padding: 0; } /* 清除所有元素默认边距 */ input[typetext] { border: 1px solid #ccc; } /* 只选文本框 */2. 组合选择器选择器示例作用含义后代div p选中 div 内所有 p空格表示“里面的”子代div p只选直接子级 p表示“直接儿子”相邻兄弟h1 p紧跟 h1 后的第一个 p表示“紧挨着的下一个”通用兄弟h1 ~ ph1 后所有同级 p~表示“后面的所有兄弟”并集h1, h2同时选中 h1 和 h2,表示“和”交集div.box选中既是 div 又有 box 类连写表示“同时满足”示例div p { color: red; } /* div 里面所有 p 都变红 */ div p { color: blue; } /* 只有 div 的直接子 p 变蓝 */ h1 p { color: green; } /* h1 后面紧挨着的那个 p 变绿 */ h1 ~ p { color: orange; } /* h1 后面所有同级 p 变橙 */ h1, h2 { font-weight: bold; } /* h1 和 h2 都加粗 */ div.box { background: #eee; } /* 既是 div 又有 box 类的元素加灰底 */3. 伪类作用选中元素在某种“状态”或“位置”下的样式。伪类作用示例:hover鼠标悬停时a:hover { color: red; }:active鼠标按下时button:active { transform: scale(.98); }:focus获得焦点时input:focus { border-color: blue; }:visited已访问过的链接a:visited { color: purple; }:first-child父元素第一个子元素li:first-child { color: red; }:last-child最后一个子元素li:last-child { color: blue; }:nth-child(n)第 n 个子元素li:nth-child(2) { color: green; }:not()排除某些元素p:not(.special) { color: gray; }:checked被选中的表单元素input:checked label { font-weight: bold; }:disabled被禁用的表单元素input:disabled { background: #eee; }示例a:hover { color: red; } /* 鼠标悬停链接变红 */ input:focus { outline: 2px solid blue; } /* 输入框聚焦加蓝框 */ li:nth-child(odd) { background: #f5f5f5; } /* 奇数行加浅灰底 */ p:not(.special) { color: gray; } /* 除了 .special 的 p 都变灰 */4. 伪元素作用选中元素的“某一部分”或“生成内容”。伪元素作用示例::before在元素内容前插入p::before { content: ★; }::after在元素内容后插入p::after { content: ✔; }::first-line第一行文字p::first-line { font-weight: bold; }::first-letter第一个字母p::first-letter { font-size: 2em; }::selection用户选中的文字::selection { background: yellow; }::placeholder输入框占位符input::placeholder { color: #999; }示例p::before { content: ★ ; /* 在每个 p 前加一个星号 */ color: gold; } p::first-letter { font-size: 2em; /* 首字母放大两倍 */ color: red; } ::selection { background: yellow; /* 选中文字时背景变黄 */ }5. 选择器优先级作用当多个规则冲突时决定谁生效。!important 行内样式 ID 类/属性/伪类 元素/伪元素 通配权重计算(a, b, c, d)a行内样式1000bID100c类、属性、伪类10d元素、伪元素1示例p { color: red; } /* 权重 (0,0,0,1) */ .text { color: blue; } /* 权重 (0,0,1,0) 生效 */ #main { color: green; } /* 权重 (0,1,0,0) 生效 */解释#main权重最高所以如果同一个 p 同时有这三个规则最终是绿色。三、盒模型作用CSS 把每个元素看作一个矩形盒子盒模型决定元素的尺寸和间距。1. 组成┌─────────────────────────────┐│ margin ││ ┌───────────────────────┐ ││ │ border │ ││ │ ┌─────────────────┐ │ ││ │ │ padding │ │ ││ │ │ ┌───────────┐ │ │ ││ │ │ │ content │ │ │ ││ │ │ └───────────┘ │ │ ││ │ └─────────────────┘ │ ││ └───────────────────────┘ │└─────────────────────────────┘content内容区域放文字、图片。padding内边距内容与边框之间的距离。border边框。margin外边距盒子与其他元素之间的距离。示例.box { width: 200px; padding: 20px; border: 5px solid black; margin: 10px; }解释内容宽 200px加上左右 padding 各 20px、边框各 5px实际占据宽度 200 40 10 250px默认 content-box 下。2. box-sizing作用决定width是否包含 padding 和 border。box-sizing: content-box; /* 默认width 只算内容 */box-sizing: border-box; /* width 包含 padding border */示例.box1 { width: 200px; padding: 20px; box-sizing: content-box; } /* 实际宽度 200 20 20 240px */ .box2 { width: 200px; padding: 20px; box-sizing: border-box; } /* 实际宽度 200px内容被压缩 */3. 外边距合并作用相邻元素的 margin 会合并成较大的那个。示例.a { margin-bottom: 30px; } .b { margin-top: 20px; }解释.a和.b之间的间距不是 50px而是 30px取较大值。4. 溢出overflow: visible | hidden | scroll | auto;值作用visible默认超出部分可见hidden超出部分隐藏scroll始终显示滚动条auto需要时显示滚动条示例.box { width: 200px; height: 100px; overflow: auto; /* 内容超出时出现滚动条 */ }四、单位与颜色1. 长度单位单位含义示例px像素绝对单位font-size: 16px;em相对父元素字体大小父 16px2em 32pxrem相对根元素html字体大小html { font-size: 16px; }2rem 32px%相对父元素width: 50%;父宽的一半vw视口宽度的 1%100vw 整个视口宽vh视口高度的 1%100vh 整个视口高vminvw 和 vh 中较小值常用于正方形vmaxvw 和 vh 中较大值—示例html { font-size: 16px; } .box { width: 50vw; /* 视口宽度的一半 */ font-size: 2rem; /* 32px */ padding: 1em; /* 相对自身字体 32px */ }2. 颜色作用设置文字、背景、边框等颜色。写法示例含义关键字red预定义颜色名HEX#ff0000十六进制#RRGGBBff255 红000 绿000 蓝RGBrgb(255, 0, 0)Red255, Green0, Blue0即纯红RGBArgba(255, 0, 0, 0.5)多一个 Alpha 透明度0 全透明1 不透明HSLhsl(0, 100%, 50%)Hue 色相 0红Saturation 饱和度 100%Lightness 亮度 50%示例.red { color: #ff0000; } /* 纯红 */ .half-red { color: rgba(255, 0, 0, .5); } /* 半透明红 */ .green { color: rgb(0, 255, 0); } /* 纯绿 */ .blue { color: hsl(240, 100%, 50%); } /* 纯蓝 */解释rgb(255, 0, 0)红色通道最大绿蓝为 0 → 红。hsl(240, 100%, 50%)色相 240° 是蓝色。五、文本与字体作用控制文字的字体、大小、间距、对齐等。font-family: Microsoft YaHei, Arial, sans-serif; /* 字体从左到右依次尝试 */font-size: 16px; /* 字号 */font-weight: bold; /* 字重normal / bold / 100~900 */font-style: italic; /* 斜体 */line-height: 1.5; /* 行高1.5 倍字号 */letter-spacing: 1px; /* 字母间距 */word-spacing: 2px; /* 单词间距 */text-align: center; /* 对齐left / center / right / justify */text-decoration: underline; /* 下划线 */text-indent: 2em; /* 首行缩进两个字符 */text-transform: uppercase; /* 转大写 */text-shadow: 1px 1px 2px #000; /* 文字阴影 */white-space: nowrap; /* 不换行 */overflow-wrap: break-word; /* 长单词换行 */字体的引入font-face {font-family: MyFont;src: url(font.woff2) format(woff2); /* woff2 体积小现代浏览器支持好 */}body {font-family: MyFont, sans-serif;}示例h1 { font-family: Microsoft YaHei, sans-serif; font-size: 32px; text-align: center; text-shadow: 2px 2px 4px rgba(0,0,0,.3); }解释标题用微软雅黑居中带淡淡阴影。六、背景与边框1. 背景作用设置元素背景颜色、图片、位置、大小等。background-color: #f0f0f0; /* 背景色 */background-image: url(bg.jpg); /* 背景图 */background-repeat: no-repeat; /* 不平铺 */background-position: center; /* 居中 */background-size: cover; /* 覆盖整个元素可能裁剪 */background-attachment: fixed; /* 固定不随滚动 */background-clip: text; /* 背景只在文字内显示 */background: #fff url(bg.jpg) no-repeat center / cover; /* 简写 */示例.hero { height: 300px; background: url(hero.jpg) no-repeat center / cover; color: white; }解释hero 区域用 hero.jpg 做背景居中、覆盖文字白色。2. 渐变background: linear-gradient(to right, red, blue); /* 从左到右红→蓝 */background: radial-gradient(circle, yellow, red); /* 中心黄→边缘红 */background: conic-gradient(red, yellow, green, blue, red); /* 圆锥渐变 */含义linear-gradient线性渐变方向 颜色停靠点。radial-gradient径向渐变从中心向外。conic-gradient圆锥渐变绕中心旋转。示例.box { background: linear-gradient(135deg, #3498db, #9b59b6); }解释135° 方向从蓝色渐变到紫色。3. 边框border: 2px solid red; /* 宽度 样式 颜色 */border-radius: 8px; /* 圆角 */border-image: url(border.png) 30 round; /* 图片边框 */outline: 2px dashed blue; /* 轮廓不占空间 */box-shadow: 0 4px 8px rgba(0,0,0,.2); /* 阴影x y 模糊 颜色 */示例.card { border: 1px solid #ddd; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,.1); }解释卡片有 1px 浅灰边框、12px 圆角、柔和阴影。七、布局1. display作用决定元素在页面中以什么形式存在是否独占一行、能否设置宽高、是否参与 flex/grid 布局。常见取值及含义值作用是否独占一行能否设宽高block块级元素是能inline行内元素否不能inline-block行内块否能none隐藏不占空间——flex弹性容器是能grid网格容器是能inline-flex行内弹性容器否能inline-grid行内网格容器否能示例span { display: block; /* 原本行内的 span 变成块级独占一行 */ width: 200px; /* 块级才能设宽 */ height: 50px; background: #eee; }解释span默认是行内元素不能设宽高。改成block后它像div一样独占一行可以设宽高。2. 定位 position作用把元素从正常文档流中“拿出来”精确控制它出现在哪里。五种取值及含义值含义参照物是否脱离文档流static默认正常排列—否relative相对自身原位置偏移自己原来的位置否原位置仍占位absolute绝对定位最近的非 static 祖先是fixed固定定位浏览器视口是sticky粘性定位最近滚动容器否滚动到阈值后固定示例 relative absolute 组合.parent { position: relative; /* 作为定位参照物 */ width: 200px; height: 200px; background: #f0f0f0; } .badge { position: absolute; /* 相对 parent 定位 */ top: 0; right: 0; /* 贴到右上角 */ background: red; color: white; padding: 4px 8px; }解释parent设为relative后成为badge的定位参照。badge的top:0; right:0就是贴到parent的右上角。这是做角标、关闭按钮的常用写法。3. 浮动 float作用让元素靠左或靠右其他内容环绕它。早期用于多列布局现在主要用于文字环绕图片。写法含义float: left; /* 靠左浮动 */float: right; /* 靠右浮动 */float: none; /* 默认不浮动 */clear: both; /* 清除左右两侧浮动影响 */示例 文字环绕图片.article img { float: left; /* 图片靠左 */ margin: 0 16px 16px 0; /* 右侧和下侧留白 */ width: 200px; }解释图片左浮动后文字会环绕在图片右侧和下方。八、响应式设计1. 媒体查询作用根据设备特性宽度、高度、方向、分辨率等应用不同 CSS。语法media 媒体类型 and (条件) {/* 条件满足时生效 */}常用媒体类型all所有设备screen屏幕print打印常用条件(max-width: 768px) /* 宽度 ≤ 768px */(min-width: 1024px) /* 宽度 ≥ 1024px */(orientation: landscape) /* 横屏 */(orientation: portrait) /* 竖屏 */(prefers-color-scheme: dark) /* 系统深色模式 */(prefers-reduced-motion: reduce) /* 用户要求减少动画 */2. 视口 metameta nameviewport contentwidthdevice-width, initial-scale1.0含义widthdevice-width视口宽度 设备宽度。initial-scale1.0初始缩放 1 倍。maximum-scale1.0最大缩放 1 倍可禁止放大但影响无障碍。user-scalableno禁止用户缩放。九、动画与过渡作用让页面元素动起来提升交互体验。1. transition 过渡作用当属性值变化时平滑地从旧值过渡到新值。语法transition: property duration timing-function delay;各部分含义部分含义示例property要过渡的属性color、allduration持续时间0.3s、300mstiming-function速度曲线ease、lineardelay延迟0.1stiming-function 取值linear /* 匀速 */ease /* 默认慢-快-慢 */ease-in /* 慢进 */ease-out /* 慢出 */ease-in-out /* 慢进慢出 */cubic-bezier(0.4, 0, 0.2, 1) /* 自定义贝塞尔曲线 */示例按钮悬停.button { background: #3498db; color: white; transition: background 0.3s ease, transform 0.2s ease; } .button:hover { background: #2980b9; transform: translateY(-2px); }解释鼠标悬停时背景 0.3s 过渡同时上移 2px0.2s 完成。2. transform 变换作用对元素进行位移、旋转、缩放、倾斜不改变文档流不影响其他元素。常用函数函数作用示例translate(x, y)位移translate(20px, 10px)translateX(x)水平位移translateX(50%)translateY(y)垂直位移translateY(-10px)rotate(deg)旋转rotate(45deg)scale(n)缩放scale(1.5)scaleX / scaleY单轴缩放scaleX(2)skew(deg)倾斜skew(10deg)matrix(...)矩阵变换高级用法transform-origintransform-origin: center; /* 默认中心 */transform-origin: top left; /* 左上角 */transform-origin: 0 0; /* 等价于左上角 */十、函数常用函数函数作用示例calc()计算width: calc(100% - 40px);min()取小width: min(50%, 400px);max()取大padding: max(16px, 2vw);clamp()限制范围font-size: clamp(1rem, 2vw, 2rem);var()使用变量color: var(--main);url()引入资源background: url(bg.png);rgb()/hsl()颜色color: rgb(255,0,0);counter()计数器content: counter(item);attr()取属性值content: attr(data-label);1.calc()width: calc(100% - 40px); /* 减法 */height: calc(100vh - 60px);font-size: calc(16px * 1.5); /* 乘法 */margin: calc(10px / 2); /* 除法 */含义混合单位计算注意运算符两侧要有空格。2.min() / max()width: min(50%, 400px); /* 取较小值 */padding: max(16px, 2vw); /* 取较大值 */含义min保证不超过某值max保证不小于某值。3.clamp()font-size: clamp(14px, 2vw, 20px);含义clamp(最小值, 理想值, 最大值)理想值在范围内时用理想值超出则取边界4.rgb() / hsl()color: rgb(255, 0, 0); /* 红 */color: hsl(240, 100%, 50%); /* 蓝 */5.counterol { counter-reset: item; }li { counter-increment: item; }li::before {content: counter(item) . ; /* 1. 2. 3. */}含义自动计数用于自定义列表编号。6.attr()a::after {content: ( attr(href) ); /* 取 href 属性值 */}含义读取 HTML 属性值常用于 tooltip、链接显示。十一、层叠、继承与优先级1. 层叠规则作用当多个规则作用于同一元素时决定谁生效。优先级顺序从高到低!important声明行内样式ID 选择器类、属性、伪类元素、伪元素通配符2. 继承作用某些属性会自动从父元素传给子元素。可继承属性color、font-family、font-size、line-height、text-align等。不可继承margin、padding、border、background、width、height等。控制继承的关键字.inherit { color: inherit; } /* 强制继承父值 */.initial { color: initial; } /* 恢复默认值 */.unset { color: unset; } /* 可继承则继承否则默认 */.revert { color: revert; } /* 回到浏览器默认 */示例.parent { color: red; } .child { color: inherit; } /* 子元素继承红色 */ .child2 { color: initial; } /* 子元素恢复黑色默认 */十二、现代 CSS 特性1. :is() 和 :where()作用简化选择器减少重复。/* 传统写法 */ h1, h2, h3 { color: red; } /* :is() 写法 */ :is(h1, h2, h3) { color: red; }区别:is()权重取括号内最高选择器的权重。:where()权重恒为 0。2. :has()作用父选择器根据子元素是否存在来选中父元素。.card:has(img) {border: 1px solid #ddd; /* 有图片的卡片才加边框 */}.form:has(input:invalid) {border-color: red; /* 表单内有无效输入时变红 */}