来自2022.7.13
今日学习
- 一、EMMET语法
- 1.emmet语法快速生成HTML
- 2.emmet语法快速生成CSS样式
- 3.快速格式化代码
- 二、复合选择器
- 1.什么是复合选择器
- 2.后代选择器
- 3.子选择器
- 4.并集选择器
- 5.伪类选择器
- 5.1链接伪类选择器
- 5.2focus伪类选择器
- 三、元素显示模式
- 1.什么是元素显示模式
- 2.块元素
- 3.行内元素
- 4.行内块元素
- 5.元素显示模式转换
- 6. 小技巧——文字垂直居中
- 四、CSS的背景
- 1.背景颜色
- 2.背景图片
- 3.背景平铺
- 4.背景图片位置
- 参数是方位名词
- 5.背景固定
- 6.背景复合写法
- 7.背景半透明
- 五、CSS的特性
- 1.层叠性
- 2.继承性
- 3.优先级
- 3.1选择器权重
- 3.2继承的权重为0
- 3.3权重叠加
- 六、盒子模型
- 1. 网页布局的本质
- 2. 盒子模型的组成
- 3. 边框（border）
- 3.1 复合属性
- 3.2 边框分开写法
- 4. 表格的细线边框
- 5. 边框会影响盒子的实际大小
- 6. 内边距
- 6.1 复合属性
- 6.2 padding不影响盒子大小的情况
- 七、课堂练习or案例
- 1. 将下面的链接文字修改为红色
- 2.请见下面的大肘子文字修改为红色
- 3.简易小米侧边栏
- 4.成长守护平台小图标案例
- 5.王者荣耀背景大图
- 6.精确方位
- 7.五彩导航
- 8. padding应用-新浪导航
- 八、写在最后
- 快速生成标签——tab
- 快速生成多个div
- 父子关系 >
- 兄弟关系 +
- 快速生成clss
- 快速生成demo
- 想生成的标签里面默认显示几个文字
总结：万物皆可tab键
vscode右键选择格式化
- 更高效的选择目标元素
- 由两个或多个基础选择器通过不同方式组合而成
- 包括：后代选择器、子选择器、并集选择器、伪类选择器
- 可以选择父元素里面的子元素
语法：
元素1 元素2 {样式}
ps：元素间需要空格
元素1为父亲 元素2为后代 最终选择的是元素2
复杂版：
- 只能选择作为某元素的最近一级子元素
- 简单理解就是选亲儿子元素
元素1>元素2
- 可以选择多组标签，同时为它们定义相同的样式
元素1，元素2，元素N {样式}
- 给链接添加特殊的效果
- 例：将光标放到链接上时变色
- 最大特点：冒号
5.1链接伪类选择器
a:link 选择所有未被访问的链接
a:visited 选择所有已被访问的链接
a:hover 选择鼠标指针为其上的链接
a:active 选择活动链接（鼠标未按下）
一定要按顺序写！
a:lik/a:visited/a:ohver/a:acitive
5.2focus伪类选择器
- 用于选取获得焦点的表单元素
- 元素标签以什么方式进行显示
- 比如<div自己占一行，一行可以放多个span
- html元素一般分为块元素和行内元素
- h1-h6
- p
- div 最典型的块元素
- ul
- ol
- li
特点
- 独占一行
- 高度宽度外边距可以控制
- 宽度默认是容器的100%
- 是一个容器盒子，里面可以放块元素或行内元素
ps:<p标签主要用于存放文字，所以不能放块级元素，特别是div，同理h1-h6也不能放
- a
- strong
- b
- em
- i
- u
- span 最典型
特点
- 相邻行内元素在一行上，一行可以显示多个
- 高宽直接设置无效
- 默认宽度就是本身内容宽度
- 行内元素只能容纳文本或其他行内元素
ps:链接里面不能放链接，a里面可以放块级元素
- img
- input
- td
特点
- 和相邻行内元素在一行上，但中间有空白缝隙，一行可以显示多个
- 默认宽度就是本身高度
- 高度行高外边距都可以控制
一个模式的元素需要另外一种模式的特性
转换为块元素：display:block
转换为行内元素：display:inline
转换为行内块元素：display:inline-block
解决方案：让文字的行高等于盒子的高度
行高<盒子高度：文字偏上
行高>盒子高度：文字偏下
bcakground-color:颜色值
一般情况下元素背景默认为transparent（透明）
方便控制位置（精灵图）
background-image：none | url（）
bcakground-repeat:repeat | no-repeat | repeat-X | repeat-Y
平铺 | 不平铺 | 横向上平铺 | 纵向平铺
利用Background-position属性可以改变图片在背景中的位置
background-position: x y;
xy为坐标
参数是方位名词
- 如果指定的两个值都是方位名词，则前后顺序无关
- 比如left top和top left效果一致
- 如果只指定了一个方位名词，另一个值省略，则第二个值默认居中
background-attachment属性设置背景图是否固定或者随页面其余部分滚动
background-attachment:scroll | fixed
习惯性约定顺序：
背景颜色 背景图片地址 背景平铺 滚动 图片位置
background：rgba(0,0,0,0.3)
最后一个范围在0-1
- 层叠性
- 继承性
- 优先级
相同选择器给设置相同的样式，此时一个样式就会覆盖另一个冲突的样式
层叠性原则：
- 样式冲突，遵循就近原则（覆盖）
- 不冲突不会层叠
结果为粉红色
- 子标签会继承父标签的某些样式，如文本颜色和字号
- 子承父业
- 子元素可以继承父元素的样式（颜色字号等）
- 可以继承行高
结果为橘色
- 行高可以跟单位也可以不跟单位
- 如果子元素没有设置行高，则会继承父类的行高
- 此时子元素的行高为：当前子元素文字大小的1.5倍
- 优势是可以根据字体的大小灵活调整行高
3.1选择器权重
但同一个元素指定多个选择器，就会有优先级的产生
- 选择器相同→执行层叠性
- 选择器不同→由选择器权重执行
3.2继承的权重为0
继承的权重为0
标签到底执行哪个样式看这个标签有没有直接选中的元素
3.3权重叠加
复合选择器会有权重叠加问题**（永远不会有进位）**
加就完事了
网页布局过程：
- 先准备好相关的网页元素，网页元素基本都是盒子
- 利用CSS设置好盒子样式，然后放到相应的位置
- 往盒子里装东西
核心：利用CSS摆盒子
CSS盒子模型本质是一个盒子，封装周围的HTML元素，包括：边框、外边距、内边距和实际内容
- border 边框
- content 内容
- padding 内边距
- margin 外边距
border可以设置元素的边框，边框由三部分组成：
- 边框宽度（粗细）
- 边框样式
- 边框颜色
3.1 复合属性
没有顺序
3.2 边框分开写法
border-collapse 属性控制浏览器绘制表格边框的方式，控制相邻单元格的边框
border-collapse合并相邻边框
边框会额外增加盒子的实际大小，两种解决方案：
- 测量盒子大小的时候不量边框
- 测量边框需要减去边框宽度
6.1 复合属性
复合属性：
padding：
一个值为上下左右均为（正方形）
两个值代表上下x，左右y
三个值代表上左下
四个值代表上右下左（顺时针）
padding会影响盒子的大小
解决方案
- 让width/height减去多出来的内边距大小即可
- List item
6.2 padding不影响盒子大小的情况
- 如果盒子没有指定width和height属性，此时padding不会撑开盒子大小
结果：
结果：
效果如下：
结果如下：
效果如下：
效果如下：