学习目标:
- 7月16日: VS实操练习
- 7月17日:P44—P53
- 7月18日:P54—P69
- 7月19日:笔记整理
学习内容:
(二)、复合选择器、CSS特性、背景属性、显示模式
1、复合选择器
- 定义:由两个或多个基础选择器,通过不同的方式组合而成
- 作用:更准确、更高效的选择目标元素(标签)
- 后代选择器:选中某元素的后代元素
- 写法:父选择器 子选择器{CSS属性},父子选择器之间用空格隔开
- 子代选择器:选中某元素的子代元素(最近的子级)
- 选择器写法:父选择器>子选择器{CSS属性},父子选择器之间用>隔开
- 并集选择器:选中多组标签设置相同的样式
- 选择器写法:选择器1,选择器2,…,选择器n{CSS属性},选择器之间用,隔开
- 交集选择器:选中同时满足多个条件的元素
- 选择器写法:选择器1选择器2{CSS属性},选择器之间连写,没有任何符号
- 注意:如果交集选择器中有标签选择器,标签选择器必须书写在最前面
- 伪类选择器:伪类表示元素状态,选中元素的某个状态设置样式
- 鼠标悬停状态:选择器:hover(CSS属性)
- 伪类-超链接
2、CSS特性
简化代码/定位问题,并解决问题
- 继承性:子级默认继承父级的文字控制属性
- 如果标签自己有样式则生效自己的样式,不继承
- 层叠性
- 特点
- 相同的属性会覆盖:后面的CSS属性覆盖前面的CSS属性
- 不同的属性会叠加:不同的CSS属性都生效
- 特点
- 优先级(权重):当一个标签使用了多种选择器时,基于不同种类的选择器的匹配规则
- 规则:选择器优先级高的样式生效
- 公式:通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important
- 选中标签的范围越大,优先级越低
- ! important提权功能,提高权重/优先级别 最高,慎用
- 叠加计算规则
- 叠加计算:如果是复合选择器,则需要权重叠加计算
- 公式:(每一级之间不存在进位)
(行内样式, id 选择器个数, 类选择器个数, 标签选择器个数) - 规则
- 从左向右依次比较选个数,同一级个数多的优先级高,如果个数相同,则向后比较
- ! important权重最高
- 继承权重最低
3、Emmet写法
代码的简写方式,输入缩写VS Code会自动生成对应的代码
- HTML
- CSS:大多数简写方式为属性单词的首字母
4、背景属性
- 背景图
- 属性值:url(背景图URL)
- 背景图平铺方式(bgr)
- 属性值
- 属性值
- 背景图位置(bgp)
- 属性值:水平方向位置 垂直方向位置
- 属性值:水平方向位置 垂直方向位置
- 背景图缩放(bgz)
- 属性值
- 属性值
- 背景图固定(bga)
- 属性值:fixed
- 背景复合属性(bg)
- 属性值:背景色 背景图背景平铺方式 背景图位置/背景图缩放 背景图固定(空格隔开各属性值,不区分顺序)
5、显示模式
- 块级元素
- 独占一行
- 宽度默认是父级的100%
- 添加宽高属性生效
- 行内元素
- 一行可以显示多个
- 设置宽高属性不生效
- 宽高尺寸由内容撑开
- 行内块元素
- 一行可以显示多个
- 设置宽高属性生效
- 宽高尺寸也可以由内容撑开
- 转换显示模式
- 属性名:display
- 属性值
(三)、选择器、PxCook软件、盒子模型
1、选择器
- 结构伪类选择器
- 作用:根据元素的结构关系查找元素
- :nth-child(公式)
- 作用:根据元素的结构关系查找多个元素
- 作用:根据元素的结构关系查找多个元素
- 作用:根据元素的结构关系查找元素
- 伪元素选择器
- 作用:创建虚拟元素(伪元素),用来摆放装饰性的内容
必须设置content属性,没有content,伪元素选择器不生效
2、PxCook
PxCook(像素大厨)是一款切图设计工具软件。支持PSD文件的文字、颜色、距离自动智能识别
- 开发面板(自动智能识别)
- 设计面板(手动测量尺寸和颜色)
3、盒子模型
- 组成
- 作用:布局网页,摆放盒子和内容
- 重要组成部分
- 内容区域- width&height
- 内边距- padding(出现在盒子边缘之间)
- 边框线- border
- 外边距- margin(出现在盒子外面)
- 边框线
- 属性名:border(bd)
- 属性值:边框线粗细 线条样式 颜色(不区分顺序)
- 设置单方向边框线
- 属性名:border-方位名词
- 属性值:边框线粗细 线条样式 颜色(不区分顺序)
- 内边距
- 作用:设置内容与盒子边缘之间的距离
- 属性名:padding/padding-方位名词
- 多值写法
- 尺寸计算
- 默认情况
盒子尺寸=内容尺寸+border尺寸+内边距尺寸 - 结论:给盒子加border/padding会撑大盒子
- 解决
- 手动做减法:减掉border/padding的尺寸
- 内减模式:box- sizing:border- box
- 默认情况
- 外边距
- 作用:拉开两个盒子之间的距离
- 属性名:margin
- 提示:与padding属性值写法、含义相同
- 合并现象
- 场景:垂直排列的兄弟元素,上下margin会合并
- 现象:取两个margin中的较大值生效
- 塌陷问题
- 场景:父子级的标签,子级的添加上外边距会产生塌陷问题
- 现象:导致父级一起向下移动
- 解决方法
- 元素溢出
- 属性名:overflow
- 属性值
- 行内元素-内外边距问题
- 场景:行内元素添加margin和padding,无法改变元素垂直位置
- 解决方法:给行内元素添加line- height可以改变垂直位置
- 圆角
- 作用:设置元素的外边框为圆角
- 属性名:border- radius
- 属性值:数字+px/百分比
记忆:从左上角顺时针赋值,没有取值的角与对角取值相同
-
- 常见应用-正圆形状
- 给正方形盒子设置圆角属性值为宽高的一半/50%
- 常见应用胶囊形状
- 给长方形盒子设置圆角属性值为盒子高度的一半
- 常见应用-正圆形状
- 阴影
- 作用:给元素设置阴影效果
- 属性名:box- shadow
- 属性值:X轴偏移量 Y轴偏移量 模糊半径 扩散半径 颜色 内外阴影
注意:
- X轴偏移量和Y轴偏移量必须书写
默认是外阴影,内阴影需要添加inset
学习时间:
- 7月16日上午10点——12点
- 7月17日上午 9 点—— 11 点
- 7月18日下午2点—— 6 点
- 7月19日晚上6点——10点
学习产出:
- CSDN 博客笔记1 篇