小白前端学习|第四周笔记
2026年4月17日-5月3日
学习资源：b站“黑马程序员”前端Web开发HTML5/CSS3+移动web视频教程（第43-48集）
学习工具：VS Code+谷歌浏览器
本周学习的知识点
一、复合选择器
- 定义：由两个或多个基础选择器，通过不同的方式组合而成。
- 作用：更准确、更高效的选择目标元素（标签）
1.后代选择器
- 选定目标：某元素的后代元素
- 写法：父选择器 子选择器{CSS属性}，父子选择器之间用空格隔开。
2.子代选择器
- 选定目标：某元素的子代元素（最近的子集）
- 写法：父选择器>子选择器{CSS属性}，父子选择器之间用“>”隔开
3.并集选择器
- 选中多组标签设置相同的样式
- 写法：选择器1，选择器2，...选择器N{CSS属性}，选择器之间用“，”（逗号）隔开
4.交集选择器（了解）
- 选中同时满足多个条件的元素
- 写法：选择器1选择器2{CSS属性}，选择器之间连写，没有任何符号。
- 注意：如果交集选择器中有标签选择器，标签选择器必须写在最前面。
5.伪类选择器
- 表示元素状态，选中元素的某个状态设置。
- 如果要给超链接设置四个状态，要按照LVHA的顺序书写。
二、CSS特性
- 简化代码/定位问题，并解决问题
1.继承性
- 子集默认继承父级的文字控制属性
- 写法：body{...}
2.层叠性
- 相同的属性会覆盖:相同的标签中，后面的CSS属性会覆盖前面相同的CSS属性
- 不同属性会叠加：相同的标签中，不同的CSS属性都会生效
3.优先级
- 又名权重，当一个标签中使用了多个选择器时，基于不同种类选择器的匹配规则
- 规则：①选择器优先级高的样式会生效；②从左往右依次比较个数，同一级个数多，则优先级更高，同数则下一级比较；③同级个数比较，每一级之间不存在进位。
- 等级：通配选择器<标签选择器<类选择器<id选择器<行内样式<！important,选中标签的范围越大，优先级越低。
4.Emment写法
- 代码的简写方式，输入缩写VS code会自动生成对应的代码。
- CSS大多数简写方式为属性单词的首字母
三、背景属性
1.背景图
- 网页中，使用背景图实现装饰性的图片效果。
- 属性：background-image（bgi）
- 值：url（背景图URL)
- 回到上上级文件夹用../../
2.背景图平铺方式
- 名：background-repeat（bgr）
- 值：no-repeat（不平铺）；repeat（平铺）；repeat-X（纵向铺）；repeat-Y（横向铺）
3.背景图位置
- 名：background-position（bgp）
- 值：水平 垂直
- 关键字：left（左）、right（右）、center（居中）、top（顶部）、bottom（底部）；关键字取值方式写法，可以颠倒取值顺序；可以只写一个关键字，另一个方向默认居中；数字只写一个值表示水平方向、垂直方向居中。
- 坐标：数字+px（正负都可）
- 注意：默认左上角
4.背景图缩放
- 名：font-size
- 值：①cover：等比例缩放背景图片完全覆盖背景区，有背景图片显示不全的可能；②contain：等比例缩放背景图片以完全装入背景区，有背景区部分空白的可能；③百分比：根据盒子尺寸计算图片大小；④数字+单位（如：px） -注意：百分比使用中，图宽度与盒宽一致，图高则根据图宽进行等比例缩放
5.固定
- 背景不会随着元素内容滚动
- 名：background-attachment
- 值：fixed
本周遇到的困难
- 精神上最致命的，我想是倦怠。一方面是目标偏移导致让我会有“放过自己”的想法；一方面是生活中工作任务有点重，物理性疲惫会有想用休息的方式奖励自己。所以这个星期的拖到拖到现在，也让我感到没能自控的挫败。
- 学习上，老师讲的很细致，没有很大问题，就是在做题的过程中上上级文件夹的图片不知道怎么引用，不过靠自己很好的解决了问题。
- 成就感下降，感觉很多点很麻烦，不是难，是麻烦，让我感到无趣；还有注意力不集中，成就感下降了很多。
下周计划
- 继续学习到52集，巩固复习前面的知识点，操作题为主
- 预习+学习第五天的课程内容
自我鼓励
噢噢，一年之计在于春，一日之计在于晨（哇的天，掘金太太太棒了吧，我写错字了，还会提醒修正，真是个好人），好啦！今天我已经很棒了，下次继续！欧耶欧耶~~~
